Im using a leaflet map with a some markers on it. i also have a sidebar where i can see the marker's name there and if i click the marker's name, the map will zoom to the lnglat of the marker. its working already but my problem is that when i refresh the page, and choose a marker in the sidebar, it will zoom to the marker but the marker's icon is not there but when i click the marker in the sidebar again, then the markers icon is showing.
i have this click function:
$("#mapContainer").on("click",".zoomMarker",function(){
var no = $(this).attr("mapNo");
var deviceID = $(this).attr("deviceID");
console.log("deviceID: ",deviceID);
var events = findMapNo(no).eventData[deviceID].events;
console.log("events: ",events)
if( events.length>0 ){
var lat = events[events.length-1][4];
var lng = events[events.length-1][3];
var latLng = new L.latLng(lat, lng);
findMapNo(no).map.setZoom(20);
findMapNo(no).map.panTo(latLng);
}else{
toaster("Marker No Location","warning");
}
});
i have this function for markers. i tried putting the addTo(mapContnr.map) to the marker variable and its works, but i cant use the addTo(mapContnr.map) since i'm using marker cluster.
var markersLayer, markersCluster, tooltips = [];
function createMarker(data, no, action){
var mapContnr = findMapNo(no);
var markers = [];
var markers2 = []; //will append on arrayMap and the keys is deviceID
var bounds = L.latLngBounds(); // Instantiate LatLngBounds
clearElements(no);
markersCluster = L.markerClusterGroup({
spiderfyOnMaxZoom: true,
showCoverageOnHover: true,
zoomToBoundsOnClick: true,
removeOutsideVisibleBounds: true,
chunkedLoading: true
});
for(var x in data){
if(!data[x].events||data[x].events.length<1){ continue; }
var latest = data[x].events.length-1;
var lat = parseFloat(data[x].events[latest][4]);
var lon = parseFloat(data[x].events[latest][3]);
var accuracy = parseFloat(data[x].events[latest][5]);
var deviceID = data[x].deviceID;
if(lat!=0||lon!=0){
var latLng = L.latLng(lat, lon);
var iconSettings = getAssetSetup(x);
console.log(iconSettings);
var height = iconSettings.iconSizePx.h;
if(!iconSettings){ continue; };
//::customicon
var customIcon = L.icon({
iconUrl: iconSettings.iconURL,
iconSize: [iconSettings.iconSizePx.w, iconSettings.iconSizePx.h],
popupAnchor: [0, 0] // point from which the popup should open relative to the iconAnchor
});
//::marker label/tooltip
var tooltp = L.tooltip({
permanent: true,
className: 'Vlabel',
direction: 'right',
offset: [-6, height/2+11],
}).setContent("<span>"+findVehicleDetails(deviceID).label+"</span>");
tooltips.push(tooltp);
//::popup/infowindow
var temp_content = createPopupContent(x, latest, no);
temp_content += "<div class='menu_logo' style='margin-top:10px; min-height: 15px;'>";
temp_content += "<img src='"+base_url+"assets/img/zoom-logo.png' style='width:18px; height:18px;' class='marker_menu_logo' onclick='zoomMarker("+data[x].events[latest][4]+","+data[x].events[latest][3]+","+no+")'><div class='verticalLine'></div>";
temp_content += "<img src='"+base_url+"assets/img/route-logo.png' style='width:25px; height:10.55px; margin-top: 4px;' class='marker_menu_logo' onclick='getTrail("+deviceID+","+no+")'><div class='verticalLine'></div>";
temp_content += "<img src='"+base_url+"assets/img/direction-logo.png' style='width:18px; height:18px; margin-top: -2px;' class='marker_menu_logo' onclick='leaf_direction("+data[x].events[latest][4]+","+data[x].events[latest][3]+","+no+")'><div class='verticalLine'></div>";
temp_content += "<img src='"+base_url+"assets/img/streetview-logo.png' style='width:18px; height:18px;' class='marker_menu_logo' onclick='streetView("+data[x].events[latest][4]+","+data[x].events[latest][3]+","+data[x].events[latest][8]+","+no+")'>";
temp_content += "</div>";
var popup = L.popup({
minWidth: 200,
closeOnClick: true,
minHeight: 200,
offset: [0, -height/4]
}).setContent(temp_content);
var marker = new L.marker(latLng, { icon: customIcon}).bindTooltip(tooltp).bindPopup(popup).openPopup();
bounds.extend(marker.getLatLng());
markers.push(marker);
markersCluster.addLayer(marker);
}//::END LonLat not 0
} //::END FOR LOOP
//var group = L.featureGroup(markers);
//mapContnr.map.fitBounds(group.getBounds());
markersLayer = L.layerGroup(markers);
//markersLayer.addTo(mapContnr.map); //dont add since there's already a marker cluster layer
markersCluster.on('clusterclick', function (a) {
if (mapContnr.map.getZoom() >= mapContnr.map.options.maxZoom) {
a.layer.spiderfy();
} else{
a.layer.getBounds()
}
});
//mapContnr.map.fitBounds(markersCluster.getBounds());
mapContnr.map.addLayer(markersCluster);
mapContnr.markers = markers;
mapContnr.markerLayers = markersLayer;
mapContnr.markersClusters = markersCluster;
if(mapContnr.markers.length > 1){
mapContnr.map.fitBounds(bounds);
mapContnr.bounds = bounds;
}
if(mapContnr.markers.length == 1){
//mapContnr.map.setZoom(15);
//getLatLng();
var latlng = mapContnr.markers[0].getLatLng();
zoomMarker(latlng.lat,latlng.lng,no);
}
}//END :: createMarker
php
andcodeigniter
since this code and question are aboutjavascript
/leaflet
only – brombeer