{"id":23501,"library":"dash-leaflet","title":"Dash Leaflet","description":"A Dash component library for interactive maps, wrapping React-Leaflet. Provides Map, TileLayer, Marker, Popup, GeoJSON, and other Leaflet components for Python Dash apps. Current version: 1.1.3, released 2024-09. Active development with occasional breaking changes when aligning with React-Leaflet updates.","status":"active","version":"1.1.3","language":"python","source_language":"en","source_url":"https://github.com/thedirtyfew/dash-leaflet","tags":["dash","leaflet","maps","geospatial","react-leaflet","interactive-maps"],"install":[{"cmd":"pip install dash-leaflet","lang":"bash","label":"Install from PyPI"}],"dependencies":[{"reason":"Required to run Dash apps; dash-leaflet depends on dash >=2.0.","package":"dash","optional":false}],"imports":[{"note":"Functions as dl.Map, dl.TileLayer, etc. Using dash_leaflet.Map fails.","wrong":"import dash_leaflet","symbol":"dl","correct":"import dash_leaflet as dl"},{"note":"center must be a list [lat, lng], not a dict.","wrong":"dl.Map(children=[...], center=dict(lat=..., lng=...), zoom=10)","symbol":"Map","correct":"dl.Map(children=[...], center=[lat, lng], zoom=10, style={'height': '500px'})"}],"quickstart":{"code":"import dash\nfrom dash import html\nimport dash_leaflet as dl\n\napp = dash.Dash(__name__)\n\napp.layout = html.Div([\n    dl.Map(center=[51.505, -0.09], zoom=13, children=[\n        dl.TileLayer(),\n        dl.Marker(position=[51.505, -0.09], children=[\n            dl.Popup('Hello London')\n        ])\n    ], style={'width': '100%', 'height': '50vh'}, id='map')\n])\n\nif __name__ == '__main__':\n    app.run_server(debug=True)","lang":"python","description":"Creates a simple Dash app with a Leaflet map centered on London, including a tile layer and a marker with a popup."},"warnings":[{"fix":"Replace dl.Map(children=[...]) with dl.Map([...]) or use children keyword but ensure it's a list of components.","message":"Version 1.0.0+ changed from 'children' prop to nested children for Map and other components. Old syntax using 'children' as a prop no longer works.","severity":"breaking","affected_versions":"<1.0.0 -> >=1.0.0"},{"fix":"Use center=[51.5, -0.09]","message":"The center prop for Map must be a list of two floats [lat, lng], not a tuple or dict. Many users mistakenly pass a dict like {'lat': 51.5, 'lng': -0.09}.","severity":"gotcha","affected_versions":"all"},{"fix":"Place dl.Popup as a child element: dl.Marker(position=[...], children=[dl.Popup('text')])","message":"The 'children' prop in dl.Marker, dl.Polyline, etc. is deprecated in favor of placing popups/tooltips as children directly. Using children=dl.Popup(...) still works but may be removed in future.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Use: import json; with open('data.geojson') as f: data = json.load(f); dl.GeoJSON(data=data)","message":"GeoJSON data must be a dictionary (GeoJSON FeatureCollection), not a JSON string or file path. Common mistake: loading with json.loads and passing the string directly.","severity":"gotcha","affected_versions":"all"},{"fix":"Set style={'width': '100%', 'height': '500px'} on the Map component.","message":"The 'style' prop on Map must be a valid CSS object (dictionary), not a string. Missing style may cause the map to not render (height defaults to 0).","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use `import dash_leaflet as dl` then `dl.Map(...)`.","cause":"Using `from dash_leaflet import Map` instead of importing the module and using dl.Map.","error":"ImportError: cannot import name 'Map' from 'dash_leaflet'"},{"fix":"Upgrade: pip install --upgrade dash-leaflet, and always use `import dash_leaflet as dl`.","cause":"Older version of dash-leaflet (<1.0) or incorrect import. Also if using `import dash_leaflet` without alias.","error":"AttributeError: module 'dash_leaflet' has no attribute 'Map'"},{"fix":"Always provide center=[lat, lng] and zoom=int.","cause":"Passing `center` as None or forgetting to set it. Map requires center and zoom.","error":"TypeError: 'NoneType' object is not iterable"},{"fix":"Ensure callback returns plain lists/dicts (JSON-compatible) for map properties.","cause":"Returning a Python dict or object that is not JSON-serializable in a callback's output that expects a component property (e.g., center, zoom).","error":"dash.exceptions.InvalidCallbackReturnValue: The callback ... returned a value of type ... which is not JSON serializable."},{"fix":"Add `style={'width': '100%', 'height': '500px'}` to the Map component.","cause":"Missing `style` prop on Map component; default height is 0.","error":"Leaflet map not visible (blank white area)"}],"ecosystem":"pypi","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}