Question may I integrate djangodash with dash-leaflet framework or assing function from from dash_extensions.javascript import assign

[Nizhurin]

Thank You for DjangoDash , i will use it, and i like it. Today i need integrate openstreet map , for this i try use dash-leaflet from documentation https://dash-leaflet-docs.onrender.com/ i will try start example with geojson and change icon markers

============================== Example from site https://dash-leaflet-docs.onrender.com/ ======================= import dash_leaflet as dl import dash_leaflet.express as dlx from dash import Dash, html from dash_extensions.javascript import assign

A few countries.

countries = [dict(name="Denmark", iso2="dk", lat=56.26392, lon=9.501785), dict(name="Sweden", iso2="se", lat=59.334591, lon=18.063240), dict(name="Norway", iso2="no", lat=59.911491, lon=9.501785)]

Generate geojson with a marker for each country and name as tooltip.

geojson = dlx.dicts_to_geojson([{**c, **dict(tooltip=c['name'])} for c in countries])

Create javascript function that draws a marker with a custom icon, in this case a flag hosted by flagcdn.

draw_flag = assign("""function(feature, latlng){ const flag = L.icon({iconUrl: https://flagcdn.com/64x48/${feature.properties.iso2}.png, iconSize: [64, 48]}); return L.marker(latlng, {icon: flag}); }""")

Create example app.

app = Dash() app.layout = html.Div([ dl.Map(children=[ dl.TileLayer(), dl.GeoJSON(data=geojson, options=dict(pointToLayer=draw_flag), zoomToBounds=True) ], style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"}, id="map"), ])

if name == 'main': app.run_server() ================================= End Example ==============================================

instead of app = Dash() i use app = DjangoDash('Graph', external_stylesheets=[dbc.themes.BOOTSTRAP])

as a result i see in browser map without markers and i get Error No match for [dashExtensions.default.function0] in the global window object ( dash_renderer.min.js:2)

If the way to make friends djangodash with use javascript from assing operator ?

Thank for the answer

[Nizhurin]

I solved question,

JavaScript variables The dash-extensions library enables mapping of variables in the (global) window object into component properties. Hence, if we create a .js file in the assets folder with the following content,

window.myNamespace = Object.assign({}, window.myNamespace, {
mySubNamespace: {
pointToLayer: function(feature, latlng, context) {
return L.circleMarker(latlng)
}
}
}); the pointToLayer function of the myNamespace.mySubNamespace namespace can be used as a component property,

import dash_leaflet as dl from dash_extensions.javascript import Namespace ns = Namespace("myNamespace", "mySubNamespace") geojson = dl.GeoJSON(data=data, options=dict(pointToLayer=ns("pointToLayer")))

created js file i write to templates page

js file look is

window.dashExtensions = Object.assign({}, window.dashExtensions, { default: { function0: function(feature, latlng) { const flag = L.icon({ iconUrl: ${feature.properties.image}, iconSize: [32, 32] }); return L.marker(latlng, { icon: flag }); } } });

python file look:

app = DjangoDash('Geomap', external_stylesheets=[dbc.themes.BOOTSTRAP]) ns = Namespace("dashExtensions", "default")

geojson = dl.GeoJSON(data=data, options=dict(pointToLayer=ns("function0")), zoomToBounds=True)

and custom icons is opened in map

if someone has problems with a similar question, I can help