I want to add a custom textballoon/popup to my leaflet map.
I totally stuck atm.
The popup i add as new layer because for automatic open on load.
My code:
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);
},
});
});
How it now looks:
How i want it:
The logo:
I hope some one can help me,
Kind regards.