<!-- put values safely into HTML attributes -->
  <div
    id="mapContainer"
    data-lat="{{ data.latitude if data and data.latitude else '' }}"
    data-lon="{{ data.longitude if data and data.longitude else '' }}"
  ></div>

  <script>
    const container = document.getElementById("mapContainer");
    const latStr = container.dataset.lat;
    const lonStr = container.dataset.lon;

    // defaults so map always shows
    let lat = 20.5937, lon = 78.9629, zoom = 4;

    if (latStr && lonStr) {
      lat = parseFloat(latStr);
      lon = parseFloat(lonStr);
      zoom = 12;
    }

    const map = L.map("mapContainer").setView([lat, lon], zoom);

    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      maxZoom: 19,
      attribution: "&copy; OpenStreetMap contributors"
    }).addTo(map);

    if (latStr && lonStr) {
      L.marker([lat, lon]).addTo(map);
    }
  </script>
</body>
</html>