Quiero agregar un globo de texto/menú emergente personalizado a mi mapa de folleto.
Me atasqué totalmente en el cajero automático.
La ventana emergente que agrego como nueva capa porque se abre automáticamente al cargar.
Mi código:
const map = L.map('map').setView([52.2129919, 5.2793703], 8); // load a tile layer L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a>', maxZoom: 18, }).addTo(map); let markersArray = {}; // create the associative array let magsArray = {}; // here hold the ids that correspond to the mags // load GeoJSON from an external file $.getJSON("geojs.php", data => { L.geoJson(data, { // add GeoJSON layer to the map once the file is loaded pointToLayer: function(feature, latlng) { const mag = feature.properties.message; // here record the mags magsArray[feature.properties.id] = feature.properties.place+' '+feature.properties.message; //testpopup var popupLocation1 = (feature, latlng); <!-- var popupContent1 = '<span class="speed speed-current leaflet-zoom-hide speed-confirmed"><span class="speedContent"><span class="dateTxt">'+feature.properties.place+'</span><br><span class="speedTxt">'+feature.properties.message+'</span><span class="kmphTxt">km/h</span>'+'</span></span>', --> var popupContent1 = '<span class="speedContent"><span class="dateTxt">'+feature.properties.place+'</span> <span class="speedTxt">'+feature.properties.message+'</span><span class="kmphTxt">km/h</span></span>', popup1 = new L.Popup(); popup1.setLatLng(popupLocation1); popup1.setContent(popupContent1); map.addLayer(popup1); }, }); });Cómo se ve ahora:
Como lo quiero:
El logo:
Espero que alguien pueda ayudarme,
Atentamente.