Map Picker

Click-to-pick location on a Leaflet map.

python 12 params

Arguments

map_picker(lat=51.5074, lng=-0.1278)

Usage

views.py

from djust import LiveView
from djust.decorators import event_handler
from djust.components import MapPicker


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.component = MapPicker(lat=51.5074, lng=-0.1278)

    @event_handler()
    def set_location(self, value=None, **kwargs):
        pass  # your app acts on 'set_location'; no component state moves

my_template.html

{{ component }}

Events this component sends to the view: set_location.

Needs its script on the page: <script src="{% static 'djust_components/map-picker.js' %}"></script>. djust ships it; without it the markup renders but does not update in the browser.

Parameters

Name	Type	Default	Description
lat	float	0.0	Latitude of the marker.
lng	float	0.0	Longitude of the marker.
pick_event	str — renames the event; identity is `name`	'set_location'	Event name fired on a pick (``{lat, lng}``).
zoom	int	13	Map zoom level (default: 13).
height	str	'400px'	Map height CSS value.
custom_class	str	''	Additional CSS classes.
tile_url	str \| None	None	Leaflet tile URL template (http(s) or root-relative, with ``{z}``, ``{x}``, ``{y}``; ``{s}`` and ``{r}`` allowed). ``None`` (default) is OpenStreetMap's standard layer, ``""`` is no tiles.
attribution	str \| None	None	Attribution text shown on the map (text only, never HTML). Defaults to OpenStreetMap's for the default tiles; set it to your provider's required text with a custom ``tile_url``.
attribution_url	str \| None	None	Optional http(s) link for the attribution text.
max_zoom	int	19	Highest zoom level (default: 19, OpenStreetMap's).
label	str	'Map picker'	Accessible name of the map (default: "Map picker").
**kwargs	— passed to `Component.__init__`: `name=` identifies the instance in the events it sends, `id=` sets `component.id`, and any other keyword is kept as state	—	—

Source & styles

File	Path	Notes
module	djust.components.components.map_picker	Subclass it, or pass custom_class, to change how it renders.
css	djust_components/components.css	Defines 2 of this component's classes at line 2344, 2346. Override those rules, or the custom properties they read, in a stylesheet loaded after it.

Map Picker

Preview

Usage

Parameters