How to center a Leaflet Map forms in a Django template - django

Question

after 2 days trying to do it by myself, I need some help please
I'm using GeoDjango and Leaflet. I have a model "listing" having a field location as PointField, my form uses LeafletWidget as per below.
As it is, it is working but when I create a new listing, there is nothing in location, so it shows a default world map.
I would like in my template to setup the following:
CENTER: ({{ user.lat }}, {{ user.lng }}) and zoom: 10
since I know that the New listing will be in the same geographical area as the user.
And I have NO idea how to do it!!!
Model.py
location = models.PointField(null=True, blank=True)
forms.py
from leaflet.forms.fields import PointField
from leaflet.forms.widgets import LeafletWidget
...
LEAFLET_WIDGET_ATTRS = {
'map_height': '600px',
'map_width': '50%',
'display_raw': 'true',
'map_srid': 4326,
}
...
class ListingForm(forms.ModelForm):
required_css_class = 'required'
...
location = forms.PointField(
widget=LeafletWidget(attrs=LEAFLET_WIDGET_ATTRS))
...
template.html
<!-- form start -->
<form action="{% url 'listing_new' %}" method="POST" class="listing-form" role="form" novalidate enctype="multipart/form-data" id="listingform">
{% csrf_token %}
<div class="box-body">
{{ form.non_field_errors }}
{% for field in listingform %}
<div class="fieldWrapper form-group {% if field.errors %} field_error{% endif %} ">
<label for="{{ field.id_for_label }}">
{{ field.label }}{% if field.field.required %}<span class="required-asterisk">*</span>{% endif %}
</label>
{{ field }}
{% for error in field.errors %}
<span class="help-block">{{ error }}</span>
{% endfor %}
</div>
{% endfor %}
</div>
<div class="box-footer">
<button type="submit" class="btn btn-primary" form="listingform">Submit</button>
</div>
</form>
I tried to use the following:
<script type="text/javascript">
window.addEventListener("map:init", function (e) {
var detail = e.detail;
detail.options.djoptions['center']=[{{ listing_lat }}, {{ listing_lng }}];
detail.options.djoptions['zoom']=10;
console.log(detail.options);
console.log(detail.loadmap);
}, false);
</script>
BUT it doesn't modify the code auto-generated by the leaflet widget:
<div id="id_location-map" class="leaflet-container-default"></div>
<script type="text/javascript">
(function () {
function loadmap() {
var djoptions = {"srid": null, "extent": [[-90, -180], [90, 180]], "fitextent": true, "center": null, "zoom": null, "minzoom": null, "maxzoom": null, "layers": [["OSM", "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", "\u00a9 OpenStreetMap contributors"]], "overlays": [], "attributionprefix": null, "scale": "metric", "minimap": false, "resetview": true, "tilesextent": []},
options = {djoptions: djoptions, initfunc: loadmap,
globals: false, callback: id_location_map_callback},
map = L.Map.djangoMap('id_location-map', options);
}
var loadevents = ["load"];
if (loadevents.length === 0) loadmap();
else if (window.addEventListener) for (var i=0; i<loadevents.length; i++) window.addEventListener(loadevents[i], loadmap, false);
else if (window.jQuery) jQuery(window).on(loadevents.join(' '), loadmap);
})();
</script>

Answer 1

So, the solution is to add this piece of JS in the template:
<script type="text/javascript">
window.addEventListener("map:init", function (e) {
var detail = e.detail;
detail.map.setView([{{user_lat}},{{user_lng}}], 10);
}, false);
</script>

Answer 2

in simple JS, you'd set it up like:
map.setView([{{ user.lat }}, {{ user.lng }}], 10);
But with GeoDjango, you could try:
LEAFLET_WIDGET_ATTRS = {
'map_height': '600px',
'map_width': '50%',
'display_raw': 'true',
'map_srid': 4326,
}
LEAFLET_CONFIG {
'DEFAULT_CENTER': ({{ user.lat }}, {{ user.lng }}),
'DEFAULT_ZOOM': 10,
}
See this documentation: https://buildmedia.readthedocs.org/media/pdf/django-leaflet/latest/django-leaflet.pdf

Answer 3

In your Django.settings files add these lines:
LEAFLET_CONFIG = { 'DEFAULT_CENTER': (41.25 ,20), # Latitude , Longitude
'DEFAULT_ZOOM': 8,
'MAX_ZOOM': 28,
'MIN_ZOOM': 1,
'SCALE':'both',
'TILES': [], }