New question

Question:

Date: 19-02-2023 13:22:07 (In Spanish)

¿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 como
hacer e buscado por varios sitios web y aun no encuentro nada.

¿Podrían ayudarme?
Tags: CSS - HTML5 - Javascript - Maps - MySQL - PHP - phpMyAdmin - SQL Server Votes: 1 - Answers: 2 - Views: 7 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: '&copy; <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
 
frjcbbae garagebible.com