Leaflet map not updating when JSON is updated

📊 Plotly Python
1

The following code produces a dash leaflet choropleth map from a JSON file:

import dash_html_components as html
import dash_leaflet as dl
from dash import Dash
from dash.dependencies import Output, Input

def tooltip_text(feature=None):
        return  [html.H5(feature["properties"]['count'])]

geojson = dl.GeoJSON(url="/assets/DATA.json",   
                     children = dl.Tooltip(id='tooltip'),
                     id="geojson")

app = Dash(__name__)

app.layout = html.Div([ 
                        dl.Map(center = [52.5200, 13.4050],
                        children= [dl.TileLayer(), geojson])
                      ], style={'width': '200px', 'height': '100px'})
      
@app.callback(Output('tooltip', 'children'), 
              [Input('geojson', 'hover_feature')])
def hover_info(feature):
    return tooltip_text(feature)
       
if __name__ == '__main__':
    app.run_server()

If I make changes to the JSON file, like for example if I update the count:

import json
with open('assets/DATA.json', 'r') as f:
    DATA = f.read()

data = json.loads(DATA)
data['features'][0]['properties']['count'] = 45

with open('assets/DATA.json', 'w') as f:
    json.dump(data, f)

the tooltip does not show the updated count. Why is this happening? Maybe the solution is to use the dcc.Interval component but I can’t figure out what the callback function should be. Maybe something like

@app.callback(Output('geojson', 'url'),
              Input('interval-component', 'n_intervals'))
def update_graph(n):
    return "/assets/DATA.json"

I don’t whether it’s relevant but I am using Jupyter Notebook.

2

After clearing the browsing history, it shows the updated count. But I want to do something like the following:

import dash_html_components as html
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import pandas as pd

path = 'assets/sample.csv'
df = pd.read_csv(path)

app = dash.Dash()

app.layout = html.Div(
    html.Div([
        html.Div('{0}'.format(df['name'].iloc[0]),id='sample-csv'),
        dcc.Interval( 
            id='interval-component',
            interval=1000,
            n_intervals=0)
    ])
)

@app.callback(Output('sample-csv', 'children'),
              Input('interval-component', 'n_intervals'))
def update_name(n):
        df = pd.read_csv(path)
        return [html.Div('{0}'.format(df['name'].iloc[0]))]

if __name__ == '__main__':
    app.run_server(debug=False)

If I change the first name in the sample.csv, it shows the updated name which it checks for every second. I can’t figure out how to do something similar with leaflet.