y/template/map.html

{%extends 'base.html'%}
{% load static %}

{%block title%} 
NCB-Map

{%endblock%}


{% block content %}

<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>



<!-- Map Container -->
<div id="map" style="height: 500px;"></div>


<script>

    // Initialize the map

    var map = L.map('map').setView([51.505, -0.09], 13);



    // Add a tile layer to the map (you can use different tile providers)

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'

    }).addTo(map);



    // Add a marker to the map

    L.marker([51.5, -0.09]).addTo(map)

        .bindPopup('A marker on the map.')

        .openPopup();

</script>


{% endblock %}