"How to load map using leaflet in templates? "

Question

It works in ![django default admin site form] (https://i.sstatic.net/RqIWN.jpg) but not on custom template html file .

i tried passing attributes on leafletwidget, load leaflet_tags . it's not working or as i am new, could't use them properly.

create.html

{% extends 'index.html' %}
{% load leaflet_tags %}
{% leaflet_js plugins="forms" %}
{% leaflet_css plugins="forms" %}
{% load static %}
{% block content %}
<form method="POST"> {% csrf_token %}
{{ form.as_p }}
    <button type="submit" value="Save">Save</button>
</form>
{% endblock %}

view.py

 class AdminForm(forms.ModelForm):

        class Meta:
            model = Outlet
            fields = ['display_name', 'location']
            widgets = {'location': LeafletWidget()}

models.py

location = geomodel.PointField()

want to load map on my create form

imgur.com/IxwVldn default admit site map load imgur.com/1a4E45f custom create page — Rudra
– Rudra, Commented Jul 19, 2019 at 9:24

max · Accepted Answer · 2020-08-11 13:36:38Z

Leaflet has a greate documentation / Quick Start Guide at:
https://leafletjs.com/examples/quick-start/

or simply build upon this *.html snippet (it uses the openstreetmap tile server instead of the MapBox tile server):

{% extends 'index.html' %}
{% block content %}

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>

<div id="mapid" class="w-100 h-100">

  <script>
    var zoom = 10
    var lat = 51.11
    var lon = 9.85
    var mymap = L.map('mapid').setView([ lat, lon, {{world_border.lon}}], zoom);

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
      //maxZoom: 15,
      subdomains: ['a','b','c']
      }).addTo(mymap);

    var marker = L.marker([ lat, lon ]).addTo(mymap);

  </script>
</div>
{% endblock %}

It should look like this
https://i.sstatic.net/gq8r4.png

As in the leaflet Quick Start Guide, you may also use mapbox tile server, looks nicer, but costs (if you exceed more than 25'000 hits per day) and you need to sign in and get a token. But it looks quite nice.
See https://leafletjs.com/examples/quick-start/example.html

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

Collectives™ on Stack Overflow

"How to load map using leaflet in templates? "

create.html

view.py

models.py

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

create.html

view.py

models.py

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related