Nizhurin
commented
1 year ago 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
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