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");
}

How to update rectangle bounds on vertex drag leaflet editable

I have been working with leaflet-editable.js to allow the editing of shapes. Specifically I am creating a rectangle that will maintain an aspect ratio of 4:3 when a corner is dragged. I have created a function to calculate the aspect ratio and return the lat/lng of where the new corners should be drawn.
I have attached this function to the event "editable:vertex:drag".
I'm not sure how to update the actual drawing of the rectangle to keep the scale. I have tried setting the object properties to the new bounds which updates but doesn't change the rectangle.
I think the answer is in refreshing the drawing of the rectangle but I don't know how to get the current rectangle instance nor how to refresh it.
Javascript is new for me
carto.on('editable:vertex:drag', function(e) {
console.log(e);
var cornersNe = e.vertex.latlngs[0], //ne
cornersNw = e.vertex.latlngs[1], //nw
cornersSw = e.vertex.latlngs[2], //sw
cornersSe = e.vertex.latlngs[3]; //se
var distanceWidth = carto.distance(cornersNw, cornersNe).toFixed(2);
var distanceHeight = carto.distance(cornersSw, cornersNw).toFixed(2);
var asR = aspectRatio(distanceWidth, distanceHeight, e.latlng.lat, e.latlng.lng);
var index = e.vertex.getIndex(),
next = e.vertex.getNext(),
previous = e.vertex.getPrevious(),
oppositeIndex = (index + 2) % 4,
opposite = e.vertex.latlngs[oppositeIndex],
bounds = new L.LatLngBounds(asR, opposite);
// L.marker(bounds).addTo(carto);
console.log('first set of bounds ', e.layer._bounds);
console.log('bounds to set ', bounds);
e.layer._bounds = bounds;
console.log('Updated set ',e.layer._bounds);
I am open to other ways of doing it if this is too roundabout.

Use the public function to set the bounds:
e.layer.setBounds(bounds);

Project lat/long to pixels

I´m making an app for smartwatches, where I need to draw the track user is currently using. The track consists of lat/long pairs.
So far I´ve tried many functions, but with this one below I got most consistent results yet there are tracks, that got deformed, like squashed or the route was shifted.
function transformToPixels(lat, lon){
var westLongitude = boundingBox[1].toDegrees()[1];
var eastLongitude = boundingBox[0].toDegrees()[1];
var northLatitude = boundingBox[1].toDegrees()[0];
var southLatitude = boundingBox[0].toDegrees()[0];
var longitudeDiff = eastLongitude - westLongitude;
var latitudeDiff = northLatitude - southLatitude;
var xPixel = (((eastLongitude - lon) / (longitudeDiff).toDouble()) * DISPLAY_WIDTH).toNumber();
var yPixel = (((northLatitude - lat) / (latitudeDiff).toDouble()) * DISPLAY_HEIGHT).toNumber();
var result = new [2];
result[1] = xPixel - 3; //had to try/error these numbers to fit the line on the display
result[0] = yPixel + 25; //had to try/error these numbers to fit the line on the display
return result;
}
Here is the route drawn on phone from lat/long pairs:
And here is drawn on the smartwatch by projecting the same lat/long to X,Y pixels:
Then there is another route:
And here is drawn on the smartwatch by projecting the same lat/long to X,Y pixels:
Here are the GeoJsons from which I get the lat/long pairs.
This one is working fine: https://pastebin.com/1vx8S98V
This one gets deformed: https://pastebin.com/4Mt4MpEq
I don´t need meter-perfect conversion, but the shape of the route shouldn´t be changed.

Leaflet and Turf.js Points within poly

I have a simple map with 17 points (GeoJSON) in leaflet, and using the draw tool, I create a polygon to use to select the points within th polygon.
map.on('draw:created', function (e) { //from draw tool
var type = e.layerType,
layer = e.layer;
editableLayers.addLayer(layer);
GetSelection(editableLayers);
});
function GetSelection(layer){
var count = allPoints.getLayers().length;
console.log(count +" Sites"); //says 17
var drawList = editableLayers.getLayers().length;
console.log(drawList +" Polys"); //Says 1
if (editableLayers.getLayers().length >0){
var fcpt = turf.featurecollection(allPoints);
console.log(fcpt); // says 17
var fcpoly = turf.featurecollection(editableLayers);
console.log(fcpoly); // fails as undefined
//var ptsWithin = turf.within(fcpt,editableLayers);
var ptsWithin = turf.within(fcpt,fcpoly);
console.log(ptsWithin); //never gets this far.
};
};
Any ideas or suggestions?

turf.featurecollection expects an array of GeoJSON Features, not a Leaflet Layer Group like your allPoints and editableLayers variables.
Similarly, turf.within expects 2 GeoJSON Feature Collections as arguments, not Leaflet Layer Groups.
So you could probably try directly:
var ptsWithin = turf.within(allPoints.toGeoJSON(), editableLayers.toGeoJSON());

#ghybs was right, it was a difference between Leaflet and turf, while the points were OK, the polygon did not come over. Passing turf the GeoJson the polygon info allowed it to work.
Working copy:
map.on('draw:created', function (e) {
featureGroup.clearLayers();
layer = e.layer;
featureGroup.addLayer(layer);
GetSelection(featureGroup);
});
function GetSelection(layer){
var shape2 = allPoints.toGeoJSON() //All facilities
var ptsWithin = turf.within(shape2, layer.toGeoJSON());
alert('Found ' + ptsWithin.features.length + ' features');
alert("results "+JSON.stringify(ptsWithin));
};

How do I enlarge LatLngBounds box using LatLng data

I get the current bounds of a google map by calling:
map.getBounds()
This will return LatLngBounds. For example:
((-26.574013562724005, -1.5375947819336488), (-25.230016040794602, 3.735842718066351))
Is it possible to get the the new LatLng points if I want to increase the map bounds by a percentage (e.g. 1%) around the centre of the map.
I have tried multiplying every coordinate by 1.01 but this shifts the map and does not increase the bounds.
I want to use the increased box size to start caching markers, in order to save calls to the server when the user pans or zooms out.
The image below will explain better what needs to happen:

Based on markerclusterer getExtendedBounds function you could use this one:
function getExtendedBounds(map, overlay) {
//With _mapBoundsEnlargePixels we add some extra space surrounding the map
//change this value until you get the desired size
var _mapBoundsEnlargePixels = 500;
var projection = overlay.getProjection();
var bounds = angular.copy(map.getBounds());
// Turn the bounds into latlng.
var tr = new google.maps.LatLng(bounds.getNorthEast().lat(),
bounds.getNorthEast().lng());
var bl = new google.maps.LatLng(bounds.getSouthWest().lat(),
bounds.getSouthWest().lng());
// Convert the points to pixels and extend out
var trPix = projection.fromLatLngToDivPixel(tr);
trPix.x = trPix.x + _mapBoundsEnlargePixels;
trPix.y = trPix.y - _mapBoundsEnlargePixels;
var blPix = projection.fromLatLngToDivPixel(bl);
blPix.x = blPix.x - _mapBoundsEnlargePixels;
blPix.y = blPix.y + _mapBoundsEnlargePixels;
// Convert the pixel points back to LatLng
var ne = projection.fromDivPixelToLatLng(trPix);
var sw = projection.fromDivPixelToLatLng(blPix);
// Extend the bounds to contain the new bounds.
bounds.extend(ne);
bounds.extend(sw);
return bounds;
}