New question

Question:

Date: 04-04-2019 17:54:08 (In Spanish)

Cómo se implementa OpenStreetMap?[Unresolved]

Hola a todos.

En esta ocacion queria consultarles sobre cómo se implementa OpenStreetMap

He estado leyendo en varios sitios y no me ha quedado nada claro.
Por lo poco que he entendido se debe utilizar librerías javascript como Leaflet o OpenLayers

Un codigo de ejemplo:
Mapa simple de OpenStreetMap con Open Layers
<!DOCTYPE html>
<html>
<head>
<title>Mapa simple de OpenStreetMap con Open Layers</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
</head>
<body>
<h1>Mapa simple de OpenStreetMap con Open Layers</h1>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map" style="width: 50%; height: 50%; position:fixed"></div>
<script>
var map = new ol.Map({
layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
target: 'map',
view: new ol.View({
projection: 'EPSG:4326',
center: [-62.264477, -38.718417],
zoom: 18})});
</script>
</body>
</html>

Pero no aparece en las coordenadas el marker.

Lo que ando necesitando es lo siguiente.
1- Marcar un punto en el mapa por medio de unas coordenadas dadas y marcarlo con un maker de un determinado color por ejemplo rojo.

2- Marcar varios puntos en el mapa con distintos colores de marker, por ejemplo 3 marker color rojo, 4 amarillos y 4 verdes. En realidad son más de 60 puntos con marker de distintos colores que son de esos colores. Todos centrados en una ciudad.



Los puntos 1 y 2 con el zoom seteado a 18 que es el más cercano donde se visualizan las calles.

3- Es posible Marcar un punto en el mapa en vez de utilizar coordenadas utilizar la calle y la altura (direccion)

Espero que alguien haya trabajado con este tipo de sistema de mapas de OpenStreetMap me pueda dar algunas explicaciones y algun codigo para ir experimentando a fin de lograr los puntos que en mencionado anteriormente.

Muchas gracias
Que tengan un excelente dia.
Saludos
Tags: Maps - OSM (Open Street Map) - Question Votes: 1 - Answers: 6 - Views: 12 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 05-04-2019 08:09:05 Hola Walter, toda esta semana estuve viendo el tema de mapas para integrarlo en sistema de control de incidencias que estoy realizando con el framework CakePHP.
    Bueno como mencionas el trabajo de mapas es full JS, y para ellos se usan las librerias que mencionaste.
    En mi periplo descubrí que lo más facil es integrarla con Leaflet (https://leafletjs.com/), esta librería te permite el manejo de mapas, no solamente de openstreetmap, puedes usar TILES de otros mapas, ya que dependiendo del proyecto que realizas puedes necesitar una base topógrafica, una de calles, una en escala de grises, etc. Un ejemplo de estos TILES puede encontrarlos en https://wiki.openstreetmap.org/wiki/Tiles.

    Bueno a lo hecho pecho, para integralo en tu proyecto solo debes hacer el llamado a las librerías ya sea que las hayas descargado o que las llames desde su CDN:

    INDEX.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Nodejs Leaflet</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
        <link rel="stylesheet" href="leaflet-extramarker/css/leaflet.extra-markers.min.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        
        <div id="map-template"></div>
    
        <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="leaflet-extramarker/js/leaflet.extra-markers.min.js"></script>
        <script src="js/main.js"></script>
    </body>
    </html>
    


    Bueno te explico lo que ves,arriba estoy cargando cada uno de los css que requerimos para este proyecto, estoy llamando a bootstrap, fontawesome, leaflet, leaftlet-extramarkers y un main css.
    Me imagino que conoces cada uno de lo mencionados pero si no:

    Bootstrap: te ayuda a maquetar una web de manera sencilla, ademas que te brindara ayuda en el leaflet para dar estilos a tus markers.
    FontAwesome: te da iconos muy monos para personalizar tus webs, en este caso los usaremos dentro de los markers.
    leaftlet: los estilos para la libreria leaftlet.
    leaftlet-extramarkers: es un plugin para personalizar los markers. https://www.npmjs.com/package/leaflet-extra-markers.
    main: bueno aqui estan los estilos personalizados para este ejemplo.

    MAIN.CSS
    body{
        padding: 0;
        margin: 0;
        background: #333;
    }
    
    #map-template{
        height: 100%;
        width: 100%;
        top: 0;
        position: absolute;
    }
    


    Y debajo bueno sus correspondientes JS de las librerias.

    Ahora manos a la ubres el codigo de main.js

    
    /*
    * En la variable map esta inicialiando el mapa para ellos usamos la constante L que instancia leaflet para el manejo de mapas.
    * el setView se usa para decirle a leaflet donde se centrar nuestro mapa y le pasamos lo valores de latitud y longitud, el valor de 10 indica el nivel de zoom por defecto.
    */
    const map = L.map('map-template').setView([-12.1374773,-77.0217879], 10);
    
    //Aqui estoy declarando el TILE que usare, en este caso el de openstreetmap
    const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    
    //Aqui declaramos la capa donde ira los creditos del Tile que usamos, puedes o no declararlo, cuestión de ética.
    L.tileLayer(
        tileUrl,
        {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
            detectRetina: true
        }
        ).addTo(map);
    
    
    //Aqui configuro la personalización del marcador, usamos los iconos de fontawesome, 
    //Mayor informacion sobre extramarkers: https://www.npmjs.com/package/leaflet-extra-markers
    var redMarker = {icon: L.ExtraMarkers.icon({
        icon: 'fa-exclamation-triangle',
        markerColor: 'red',
        shape: 'penta',
        prefix: 'fas'
    })} ;
    
    //Aqui creamos el marcador y le pasamos la personalizacion, con bindPopup le creamos una popup cuando hagamos clik sobre el marcador.
    // y con addTo lo agregamos al mapa que declaramos en la constante map.
    
    L.marker([-12.1374773,-77.0217879], redMarker).bindPopup('Tu estás aqui...').addTo(map);
    



    Espero haber sido lo mas claro posible, ahora como te dije para que php le pase los datos debemos parsear la coordenadas en JSON, o informate sobre el formato geoJSON.

    Yo para mi proyecto estoy usando NodeJS para realizar un servidor de websocket y hacer un broadcast de los puntos de incidencias hacia todos lo clientes lo que hace muy dinámico y útil el proyecto, ya que ves en tiempo real donde están ocurriendo y su estado.

    Un abrazo y saludos desde Perú.
      Votes: 2 - Link answer
     
  • Date: 05-04-2019 12:22:19 Hola, un tiempo me puse a probar un poco openlayers, hice un pequeño codigo para agregar marcadores con imagen personalizada desde un array js que luego iba a reemplazar por datos en json cargados desde un webservice:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    	<script type="text/javascript" src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
    	<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    	<style type="text/css">
    		body {
    			margin: 0;
    			padding: 0;
    			overflow: hidden;
    		}
    		#map:focus {
    			outline: #4A74A8 solid 0.15em;
    		}
    		.overlay-label {
    			text-decoration: none;
    			color: white;
    			font-size: 11pt;
    			font-weight: bold;
    			text-shadow: black 0.1em 0.1em 0.2em;
    		}
    		.popover-content {
    			min-width: 250px;
    		}
    	</style>
    </head>
    <body>
    	<div id="map" class="map">
    		<div id="popup"></div>
    	</div>
    	<script type="text/javascript">
    		var locations = [
    			{ 'id': 1, 'color': 'amarillo', 'x': -63.1997168, 'y': -17.7677971, 'name': 'Sucursal 1', 'address': 'Avenida Noel Kempff Mercado 715, Santa Cruz de la Sierra' },
    			{ 'id': 2, 'color': 'negro', 'x': -63.1991416, 'y': -17.7695694, 'name': 'Sucursal 2', 'address': 'Av. Ovidio Barbery Justiniano (radial 26), Santa Cruz de la Sierra' }
    		];
    
    		var features = [];
    
    		$.each(locations, function(){
    			var that = this;
    
    			$('body').append($("<div id='overlay-"+that.id+"' />").addClass('overlay-label').html(that.name));
    
    			var coordinates = new ol.geom.Point(ol.proj.transform([that.x, that.y], 'EPSG:4326', 'EPSG:3857'));
    			var feature = new ol.Feature({
    				id: 'addressfeature',
    				geometry: coordinates,
    				address: that.address,
    				patito_color : that.color
    			});
    
    			feature.setStyle(
    				new ol.style.Style({
    					image: new ol.style.Icon({
    						opacity: 1,
    						scale: 1,
    						src: 'marker.png'
    					}),
    					text: new ol.style.Text({
    						font: '11px helvatica, sans-serif',
    						fill: new ol.style.Fill({
    							color: '#FAFAFA'
    						})
    					})
    				})
    			);
    			
    			features.push(feature);
    		});
    
    		var vectorSource = new ol.source.Vector({
    			features: features
    		});
    
    		var vectorLayer = new ol.layer.Vector({
    			source: vectorSource
    		});
    
    		var view = new ol.View({
    			center: [0, 0],
    			zoom: 2
    		});
    
    		var map = new ol.Map({
    			layers: [
    				new ol.layer.Tile({
    					source: new ol.source.OSM()
    				}),
    				vectorLayer
    			],
    			target: 'map',
    			view: view
    		});
    
    		map.getView().fit(vectorSource.getExtent(), map.getSize());
    
    		var popup = new ol.Overlay({
    			element: document.getElementById('popup')
    		});
    		map.addOverlay(popup);
    
    		$.each(locations, function(){
    			var that = this;
    			var overlay = new ol.Overlay({
    				position: ol.proj.fromLonLat([that.x, that.y]),
    				element: document.getElementById('overlay-' + that.id)
    			});
    			map.addOverlay(overlay);
    		});
    
    		map.on('click', function(evt){
    			var feature = map.forEachFeatureAtPixel(evt.pixel,function(feature) {
    				return feature;
    			});
    
    			var element = popup.getElement();
    			$(element).popover('destroy');
    
    			if (feature) {
    				var coordinates = feature.getGeometry().getCoordinates();
    				popup.setPosition(coordinates);
    
    				$(element).popover({
    					'placement': 'top',
    					'animation': false,
    					'html': true,
    					'content': '<p>'+feature.get('address')+ ' patito color ' + feature.get('patito_color') + '</p>'
    				});
    				$(element).popover('show');
    			}
    		});
    
    		var geolocation = new ol.Geolocation({
    			projection: view.getProjection()
    		});
    
    		geolocation.setTracking(true);
    
    		var accuracyFeature = new ol.Feature();
    		geolocation.on('change:accuracyGeometry', function(){
    			accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
    		});
    
    		var positionFeature = new ol.Feature();
    		positionFeature.setStyle(new ol.style.Style({
    			image: new ol.style.Circle({
    				radius: 6,
    				fill: new ol.style.Fill({
    					color: '#3399CC'
    				}),
    				stroke: new ol.style.Stroke({
    					color: '#fff',
    					width: 2
    				})
    			})
    		}));
    
    		geolocation.on('change:position', function() {
    			var coordinates = geolocation.getPosition();
    			positionFeature.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null);
    		});
    
    		new ol.layer.Vector({
    			map: map,
    			source: new ol.source.Vector({ features: [accuracyFeature, positionFeature] })
    		});
    	</script>
    </body>
    </html>
    


    Y queda así:
      Votes: 2 - Link answer
     
  • Date: 05-04-2019 12:42:35 Hola de nuevo aqui tienes una segunda versión del main.css, aqui agregamos la funcionalidad de un control de capas para poder cambiar entre tipos de mapas y activar o desactivar los marcadores.

    //Aqui configuro la personalización del marcador, usamos los iconos de fontawesome, 
    //Mayor informacion sobre extramarkers: https://www.npmjs.com/package/leaflet-extra-markers
    var redMarker = {icon: L.ExtraMarkers.icon({
        icon: 'fa-exclamation-triangle',
        markerColor: 'red',
        shape: 'penta',
        prefix: 'fas'
    })} ;
    
    //Aqui asignando a variables los TILE que usare.
    const tile1 = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        tile2 = 'http://tile.thunderforest.com/landscape/{z}/{x}/{y}.png',
        tile3 = 'http://c.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg';
    
    //Aqui declaramos los atributos.
    
    const atributos = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors,';
    
    //Declaramos los marcadores que iran en la capa marcadores.
    var marcas = [
    L.marker([-12.1374795,-77.0217893], redMarker).bindPopup('prueba'),
    L.marker([-12.1474795,-77.0227893], redMarker).bindPopup('prueba2')
    ];
    
    //Aqui declaramos una capa para los marcadores.
    const marcadores = L.layerGroup(marcas);
    
    //declaramos las T
    var map1 = L.tileLayer(tile1, { attribution: atributos});
    var map2 = L.tileLayer(tile2, { attribution: atributos});
    var map3 = L.tileLayer(tile3, { attribution: atributos});
    
    /*
    * En la variable map esta inicialiando el mapa para ellos usamos la constante L que instancia leaflet para el 
    * manejo de mapas.
    */
    const map = L.map('map-template',{center: [-12.1374773,-77.0217879], zoom: 13, layers: [map1, marcadores]});
    
    //Declaramos las capas base.
    var baseLayers = {
        "Normal": map1,
        "Forestal": map2,
        "Acuarela": map3
    };
    
    //Declaramos la capa de marcadores.
    var overlays = {
        "Marcadores": marcadores
    };
    
    //Por ultimos asignamos al mapa los controles de capas
    L.control.layers(baseLayers,overlays).addTo(map);
    


    Recuerda que la documentacion de Leaflet es tu amiga.

    Un abrazo!
      Votes: 2 - Link answer
     
  • Date: 05-04-2019 13:13:17 Hola Walter:

    Hace ya mucho tiempo que intenté implementar Open Layer a mis mapas (estaban por la versión 2.13.1 y ya van por la 5.3.0) Es en la que más confío porque tiene muchos colaboradores, que trabajan a pulmón.

    Si bien la comunidad es muy amplia y va creciendo, yo la deseché porque donde hacían más agua respecto a Google Maps era justamente en tu punto 3: Geocodificación y Geocodificación inversa
    (De una dirección que devuelva coordenadas y de coordenadas que lo traduzca en dirección).
    No sé cómo lo tendrán para Argentina pero en su momento, las pruebas que hice aquí, me daban error en la mayoría de casos teniendo que hacer un híbrido con Geocoder de Google Maps.

    Aparte de ello, las capas de vista terreno, satélite, etc., también están a distancia de las que ofrece Google Maps.

    Sobre tus puntos 1 y 2 no veo problema.
    Difiere de Google Maps en que las capas (Layer) tienes que tenerlas en local (aunque puedes enlazar con lo publicado por la comunidad) así como los estilos y los motores Javascript para después implementar y manipular los códigos. Vamos, como lo hacemos con JQuery pero que en este caso se justifica tenerlo en local: tenemos un mega-archivo máster de la versión X desde la que realizaremos nuestras aplicaciones y, por qué no, los plugin que en este caso serían capas, marcadores, rutas, polilíneas, etc.

    La estructura de desarrollo no difiere tanto de Google Maps, aunque utilizaremos otros nombres.

    Ejemplo:
     <script>
          import Feature from 'ol/Feature.js';
          import Map from 'ol/Map.js';
          import Overlay from 'ol/Overlay.js';
          import View from 'ol/View.js';
          import Point from 'ol/geom/Point.js';
          import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
          import TileJSON from 'ol/source/TileJSON.js';
          import VectorSource from 'ol/source/Vector.js';
          import {Icon, Style} from 'ol/style.js';
    
    
          var iconFeature = new Feature({
            geometry: new Point([0, 0]),
            name: 'Null Island',
            population: 4000,
            rainfall: 500
          });
    
          var iconStyle = new Style({
            image: new Icon(/** @type {module:ol/style/Icon~Options} */ ({
              anchor: [0.5, 46],
              anchorXUnits: 'fraction',
              anchorYUnits: 'pixels',
              src: 'data/icon.png'
            }))
          });
    
    /* Y a partir de ahí comienza la construcción del mapa y la inseción de los datos propios  */
    </script>


    Acabo de descargar la versión 5.3.0 desde openlayers.org/download/ y tienes ejemplos para todos los gustos.

    Además tienes un foro dedicado de apoyo en stackoverflow.com/questions/tagged/openlayers

    No entiendas en lo que te digo que no merece la pena. Todo lo contrario: merecen el reconocimiento a un trabajo de mucho mérito y los pasos que dan son importantes. Entidades de meteorología o aviación han dado el paso prescindiendo de Google Map$$$

    Si sigues con la idea, veré de apoyarte en lo que pueda.
    Si prefieres amoldarte a Google Maps (y mucho depende el uso/visitas que tengas sobre sus cuotas), sabes que tengo desarrollos de todo lo que necesitas, aunque tendré que revisarlos porque hace ya año y medio que no he hecho mas que aplicaciones sencillas.

    Nos cuentas
      Votes: 2 - Link answer
     
  • Date: 06-04-2019 00:27:36 Walter, dale una miradita a esto:

    openlayers.org/en/latest/examples/

    Tienes cualquier cantidad de mapas con Open Layer y sus códigos en la misma página.
      Votes: 2 - Link answer
     
  • Date: 11-04-2019 17:10:04 Pido disculpas por responder con demora, he tenido algunos inconvenientes.

    Muchísimas gracias a todos ustedes por colaborar e interesarse en en este tema respondiendo con mucha información útil.

    Creo que sus respuestas no solo me podran ayudar solo a mi sino que tambien para otros que están en la misma situacion que yo que no entiende como se implementa OpenStreetMap en un proyecto.

    Leere cada una de sus respuestas y luego haré consultas al respecto para tener alguna idea más clara.

    Les comento que he decidido comenzar a utilizar OpenStreetMap ya que es de codigo abierto, posiblemente la API de Google Maps sea más amigable o sencillo de utilizar pero veo tiende a ser más privativo.

    Mis conocimientos sobre javascript son elementales.

    Adelantándoles un poco sobre lo que ando necesitando.
    En el proyecto (de incidencias) que quiero incrustar mapas de OpenStreetMap es similar al que he expuesto en la pregunta.

    Utilizo PHP 5.x, Bootstrap 3.3.7, jQuery 3.3.1

    Es una tabla maquetado con Bootstrap cuyos datos es obtenidos de una fuente de datos obtenidos y procesados e impresos con PHP
    No se utiliza AJAX, solo para una ventana modal.

    Por un lado necesito un mapa con un solo marker.
    Al hacer click en un icono de una fila (registro) se dispara una ventana modal remota donde se obtiene un HTML con ciertos datos por medio de un ID, datos tales como calle, entre calles, estado (success, warning, danger), y coordenadas (Lat, Lon). Datos incrustados (impreso)

    La idea es que la misma ventana modal este el mapa con el zoom más cercano (18) con el marker posicionado en las coordenadas dadas y con un el color de marker correspondiente al estado (success =verde , warning = amarillo, danger = rojo), el marker puede ser "glyphicon glyphicon-map-marker" y en su label el ID

    Por otro lado, otro mapa general con todos los marker con su respectivo color de estado y su label que es un número. La cantidad marker puede ser entre 50 y 70 y todos concentrados en la misma ciudad.

    Espero haber sido más aclarativo.

    Intentare hacer un codigo más simplificado de mi proyecto para mostrarles en este mismo post a ustedes y puedan entender más sobre lo que he referido.

    Nuevamente agradezco la voluntad de todos ustedes por colaborar con sus conocimientos.

    Que tengan un buen dia

    Saludos
      Votes: 0 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In
 
frjcbbae garagebible.com