Uso de mapas

Ejemplo uso de mapas con leaflet
Tags:

Documentación:

Configurar

  1. Css de leaflet
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
  1. JS de Leaflet
 <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>
  1. En plantilla:
 <div id="map"></div>
  1. Configurar mapa desde js Ejemplo en plantilla de django con coordenadas en variable coords
<script>
    var mimapa = L.map('map').setView([{{coords}}], 13);

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
    }).addTo(mimapa);

    L.marker([{{coords}}]).addTo(mimapa).bindPopup("CPI Los Enlaces");
</script>
  1. Configurar el mapa en css
<style>
    #map { height: 400px ;}
</style>
Última modificación October 21, 2022: inicio django (f6c0691)