"How to load map using leaflet in templates? " - leaflet

Question

It works in ![django default admin site form] (https://imgur.com/IxwVldn) but not on .
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

Answer 1

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/leaflet#1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.6.0/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 © OpenStreetMap',
//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.stack.imgur.com/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 © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'your.mapbox.access.token'
}).addTo(mymap);