Question:
Date: 19-02-2023 13:22:07
(In Spanish)
hacer e buscado por varios sitios web y aun no encuentro nada.
¿Podrían ayudarme? Votes: 1 - Answers: 2 - Views: 9 Share on: Google Facebook Twitter LinkedIn Link
¿Puedo hacer que un mapa hecho en OpenStreetMap cargue solo una zona en especifico? [Resolved]
Buenas noches, la idea que tengo es que el mapa solo me cargue una zona en especifico, pero aun no se comohacer e buscado por varios sitios web y aun no encuentro nada.
¿Podrían ayudarme? Votes: 1 - Answers: 2 - Views: 9 Share on: Google Facebook Twitter LinkedIn Link
Answers:
-
Date: 21-02-2023 07:00:43 Puedes ver un gist que yo hice en https://gist.github.com/jcvasquez07/f573f1d6a92320a3a2048b3b3f63248f
Yo uso este código para crear mapas a partir de fotografías (usando los datos del GPS de la cámara) Votes: 1 - Link answer -
Date: 27-02-2023 02:24:13 Hola Dextron, si, mi consejo es que uses https://leafletjs.com/
"Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps."
Para mi la mejor forma de trabajar con OpenStreetMap (en este caso hace mucho sentido usar una librería de terceros que habilite una capa de manejo simplificada).
Un ejemplo para hacer lo que comentas:
Agregas el siguiente CSS en el header:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="crossorigin=""/>
Seguidamente podes agregar un estilo simple para el mapa (por ejemplo definir una altura), o sea, incluis lo siguiente dentro del header:
<style> html, body { height: 100%; margin: 0; } .leaflet-container { height: 400px; width: 600px; max-width: 100%; max-height: 100%; } </style>
Nota: claro que sería mejor que venga de un archivo externo mapa.css
Dentro de la etiqueta <body></body> (o sea, tu página) pones el siguiente div:
<div id="map"></div>
Incluís este JS en el footer (antes del cierre de la etiqueta </body>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script> <script> const map = L.map('map').setView([51.505, -0.09], 13); const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(map); const marker = L.marker([51.5, -0.09]).addTo(map) .bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup(); const circle = L.circle([51.508, -0.11], { color: 'red', fillColor: '#f03', fillOpacity: 0.5, radius: 500 }).addTo(map).bindPopup('I am a circle.'); const polygon = L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ]).addTo(map).bindPopup('I am a polygon.'); const popup = L.popup() .setLatLng([51.513, -0.09]) .setContent('I am a standalone popup.') .openOn(map); function onMapClick(e) { popup .setLatLng(e.latlng) .setContent(`You clicked the map at ${e.latlng.toString()}`) .openOn(map); } map.on('click', onMapClick); </script>
Acá el ejemplo funcionando: ejemplo leafletjs con OpenStreetMap
Saludos y buen código!
Fernando Votes: 1 - Link answer
To actively participate in the community first must authenticate, enter the system.Sign In