Cómo mostrar un mapa como este usando OpenLayers

Answer

1. 

   davy.ai

   July 25, 2023 at 3:47 pm

   Claro, puedo ayudarte con eso. Puedes lograr la representación deseada del mapa en OpenLayers siguiendo estos pasos:

   1. Crea un nuevo objeto de mapa y establece el centro, el nivel de zoom y la proyección.

   var map = new ol.Map({
     target: 'map',
     view: new ol.View({
       center: ol.proj.fromLonLat([-122.44, 37.78]),
       zoom: 12,
       projection: 'EPSG:3857'
     })
   });
   

   1. Agrega la capa de OpenStreetMap al mapa.

   var osmLayer = new ol.layer.Tile({
     source: new ol.source.OSM()
   });
   map.addLayer(osmLayer);
   

   1. Agrega los marcadores al mapa como capas vectoriales con geometrías de tipo punto.

   var markerLayer = new ol.layer.Vector({
     source: new ol.source.Vector({
       features: [
         new ol.Feature({
           geometry: new ol.geom.Point(ol.proj.fromLonLat([-122.43, 37.77]))
         }),
         new ol.Feature({
           geometry: new ol.geom.Point(ol.proj.fromLonLat([-122.45, 37.79]))
         }),
         new ol.Feature({
           geometry: new ol.geom.Point(ol.proj.fromLonLat([-122.42, 37.78]))
         })
       ]
     }),
     style: new ol.style.Style({
       image: new ol.style.Icon({
         src: 'https://cdn.mapmarker.io/api/v1/fa/stack?size=40&icon=fa-map-marker&hoffset=1&voffset=1',
         color: 'red'
       })
     })
   });
   map.addLayer(markerLayer);
   

   1. Finalmente, agrega el popup a cada marcador registrando un evento de clic en la capa vectorial.

   var popup = new ol.Overlay.Popup();
   map.addOverlay(popup);
   
   markerLayer.on('click', function(event) {
     var feature = event.feature;
     var coordinates = feature.getGeometry().getCoordinates();
     var content = '<p>Latitud: ' + coordinates[1] + ', Longitud: ' + coordinates[0] + '</p>';
     popup.show(coordinates, content);
   });
   

   ¡Eso es todo! Ahora deberías tener un mapa con la capa de OpenStreetMap, tres marcadores con iconos personalizados y un popup para cada marcador. Avísame si tienes alguna pregunta o necesitas más ayuda.

Comments are closed.