We Keep Coding

Add multiple parentLines to a leaflet marker

I'm trying to create a straight line network in Leaflet, which at each junction has a marker, and on drag of each marker, update the position of the corresponding polyline which connects to it.
I've done some research (mostly this question) & reworked a fiddle to strip it down a bit to try & get it to do what I want. I am able to draw the network with individual polylines, however, I need to add multiple parentLines to the marker which is connected to two polylines. I can't find it in the Leaflet documentation, but punted with this:
marker_arr[1].parentLine = [polyline_a,polyline_b];
My issue is when I call the dragstart/drag/dragend handlers, it doesn't work with multiple polylines. (Edit) I have made some headway in capturing the parentLines as an array, but can only make it work for the first parentLine
function dragHandler(e) {
var polyline=[]
console.log("drag")
if(e.target.parentLine.length){
polyline.push(e.target.parentLine[0]);
} else {
polyline.push(e.target.parentLine);
}
if(polyline){
var latlngPoly = polyline[0].getLatLngs(), // Get the polyline's latlngs
latlngMarker = this.getLatLng(); // Get the marker's current latlng
latlngPoly.splice(this.polylineLatlng, 1, latlngMarker); // Replace the old latlng with the new
polyline[0].setLatLngs(latlngPoly); // Update the polyline with the new latlngs
}
}
Can anyone point me to either the documentation about parentLine, or how I might make this work? Using Leaflet v1.6.0 and cannot use more recent versions as this is to extend an already existing implementation of Leaflet based on 1.6.
Fiddle here

Here is a sample.
Add to the marker the parentLines always as array:
marker_arr[0].parentLine = [polyline_a];
marker_arr[1].parentLine = [polyline_a,polyline_b];
marker_arr[2].parentLine = [polyline_b];
and then loop through all parentLines in the dragstart handler:
// Now on dragstart you'll need to find the latlng from the polyline which corresponds
// with your marker's latlng and store it's key in your marker instance so you can use it later on:
function dragStartHandler(e) {
var marker = e.target;
marker.polylineLatlng = {};
e.target.parentLine.forEach((line)=>{
var latlngPoly = line.getLatLngs(), // Get the polyline's latlngs
latlngMarker = marker.getLatLng(); // Get the marker's current latlng
for (var i = 0; i < latlngPoly.length; i++) { // Iterate the polyline's latlngs
if (latlngMarker.equals(latlngPoly[i])) { // Compare marker's latlng ot the each polylines
marker.polylineLatlng[L.stamp(line)] = i; // If equals store key in marker instance
}
}
})
}
And in the drag handler:
// Now you know the key of the polyline's latlng you can change it
// when dragging the marker on the dragevent:
function dragHandler(e) {
var marker = e.target;
e.target.parentLine.forEach((line)=>{
var latlngPoly = line.getLatLngs(), // Get the polyline's latlngs
latlngMarker = marker.getLatLng(); // Get the marker's current latlng
latlngPoly.splice(marker.polylineLatlng[L.stamp(line)], 1, latlngMarker); // Replace the old latlng with the new
line.setLatLngs(latlngPoly); // Update the polyline with the new latlngs
})
}
And clean it in the dragend handler:
// Just to be clean and tidy remove the stored key on dragend:
function dragEndHandler(e) {
var marker = e.target;
delete marker.polylineLatlng;
console.log("end");
}

Mapbox LngLat object

i have a little problem, need seperates two values from a LngLat Mapbox object. Im creating a marker on double click in the map. Works fine. The problem is that i need to store the value of longtitude and latitude in my database. And i have a problem with getting this values from lnglat object. I was looking in mapbox doc, but there is no any method for that object that could help. Is there any solution for this?
map.on('dblclick', (e) => {
const popupForm = document.querySelector('#marker-popup-form');
const popupText = popupForm['marker-infoo'].value;
// create the popup
var popup = new mapboxgl.Popup().setText(popupText);
popupForm.reset();
// create DOM element for the marker
var el = document.createElement('div');
el.id = 'marker';
// create the marker
new mapboxgl.Marker(el)
.setLngLat(e.lngLat)
.setPopup(popup)
.addTo(map);});

Ok, i found a solution by making and array and then extract the value
// Here array.values() function is called.
var iterator = el.values();
// All the elements of the array the array
// is being printed.
var myLng = iterator.next().value;
var myLat = iterator.next().value;
console.log('Lng = ' + myLng);
console.log('Lat = ' + myLat);
});
Console looks like this:
Lng = 18.263916015625682
Lat = 50.436719121999545

Google Maps Api getting the title from the marker

When I push a marker to the array it plots the marker correctly and adds a title to the array too.
I know this works because when I console.log the console.log(markersArray); it returns the following. the title of the marker is next door.
The below is my marker click that opens up the info window, but when I console.log out the data which is called mll it doesn't have the title inside it.
google.maps.event.addListener(marker, 'click', function(mll) {
console.log(mll);
var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><p>"+mll+"</p></div>";
iw = new google.maps.InfoWindow({content:html});
iw.open(map,marker);
});
How would I be able to get the click function to pull in the title when the array has it and has pushed it successfully?

I remember doing something similar before. In my case, I used infoWindows with circle markers. Essentially, I had both in separate arrays. When I made the circle marker, I gave it a unique value, called place, which was basically it's count (the value of the n-th circle created, was n). On the event listener, I called the infoWindow from the other array based on the position of the current circle.
You can make an array var titles = []; to hold titles.
Each time you make a new marker, increment a var count = 0;, keeping track of how many markers you have.
In your marker options, add place: count. When you need a specific title, you can call titles[marker.place];
var infos = [];
var count = 0;
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var lastWindow;
count++;
var populationOptions = {
//leaving out defaults
place: count
};
var circle = new google.maps.Circle(populationOptions);
lastCircle = circle;
var contentString = 'just a string...';
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: new google.maps.LatLng(data.lon, data.lad)
});
infos.push(infowindow);
google.maps.event.addListener(circle, 'mouseover', function() {
if(lastWindow){
lastWindow.close();
}
infos[circle.place].open(map);
lastWindow = infos[circle.place];
});

Remove Google Maps Markers by label

Im currently working on a cross platform app that has a google map that has a whole bunch of icons on it. I use an Ajax query to get a kendo ui mobile datasource that has a list of lat/lng values and a category of the object.
From there when the user selects turn on that category, those markers appear on the map. This currently works however removing them is the issue.
When I go to remove them, I do not know how to delete all markers with a specific label. Is there a global array of markers that I can iterate through to find the appropriate markers to remove?
If there is I can simply set these particular markers map to null to remove them.
My code for adding markers is below:
var dataItem;
var facData = new kendo.data.DataSource({
........
});
facData.fetch(function() {
if (e.checked == 1) {
for (var i = 0;i < facData.view().length;i++) {
dataItem = facData.view()[i];
dataItemLatLng = new google.maps.LatLng(dataItem.lat, dataItem.lon);
createMarker(dataItemLatLng, "Toilets", toiletIcon);
}
}
else {
Code for removing all markers with label "Toilets"
}
})
}

In some outer scope :
var markers = [];
And your function that creates/removes markers :
function foo() {
var facData = new kendo.data.DataSource({
........
});
facData.fetch(function() {
if (e.checked == 1) {
for (var i = 0; i < facData.view().length; i++) {
var dataItem = facData.view()[i];
var dataItemLatLng = new google.maps.LatLng(dataItem.lat, dataItem.lon);
var marker = createMarker(dataItemLatLng, "Toilets", toiletIcon);
markers.push(marker);
}
}
else {
while(markers.length) {
markers.pop().setMap(null);
}
}
});
}
You need to ensure that createMarker() returns the created marker.
As written, the markers array is emptied as the markers are removed from the map. This seems sensible, otherwise, next time round the array would still contain references to the old markers plus references to all the new ones - much of the time, this would mean duplicate markers created from the same data as last time ... and so on, and so on.

I created a global array that each marker, when added is pushed into. Then the remove code is simply:
for(var i=0; i< markerArray.length;i++){
if(markerArray[i].getTitle()=="Toilets"){
markerArray[i].setMap(null);
}
}

Google Maps: How to zoom out to all locations on map

I am developing am app that shows a list of different places using google maps, i have everything working fine and working with currentLocation and the closestsLocation and it zooms to show this, but I have tried to change this to set it so that it zooms out to show all the buildings and not just the closest one
EDIT: this is the working code
// Sets the bounds of the map to include at lease one visable marker
function setBounds(){
if ( markerCluster.getMarkers().length > 0 && homeMarker != null){
map.setZoom(17);
var visableMarkers = markerCluster.getMarkers();
// want to set the starting position at the homeMarker
//Make an array of the LatLng's of the markers you want to show
var LatLngList = new Array ();
LatLngList.push(homeMarker.position);
$.each(visableMarkers, function() {
LatLngList.push(this.position);
});
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds ();
// Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
// And increase the bounds to take this point
bounds.extend (LatLngList[i]);
}
// Fit these bounds to the map
map.fitBounds (bounds);
}
}

The code for your array LatLngList is incorrect, I think it should say
var LatLngList = new Array (new google.maps.LatLng (52.537,-2.061), new google.maps.LatLng (52.564,-2.017));