Nueva pregunta

Pregunta:

 
  1  
 
 
Dextron HD Karma: 4 República Dominicana
 
 Fecha: 19-02-2023 13:22:07 (En Español)

¿Puedo hacer que un mapa hecho en OpenStreetMap cargue solo una zona en especifico? [Resuelta]

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? Etiquetas: CSS - HTML5 - Javascript - Maps - MySQL - PHP - phpMyAdmin - SQL Server Votos: 1 - Respuestas: 2 - Vistas: 8 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  •  
      1  
     
     
    Juan Vasquez Karma: 952 Guatemala
     
    Fecha: 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)       Votos: 1 - Link respuesta
     
  •  
      1  
     
     
    Fernando Mosquera Karma: 10200 Argentina
     
    Fecha: 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       Votos: 1 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com