Leaflet Delete polyline between 2 markers - leaflet

How I can delete the polyline line between 2 specific marker.
I have many polyline connected with many marker . But i want to delete any sspecific line on double click .
How Can I do that ?
I am using leaflet to draw the polyline.
here suppose I want to delete the polyline between marker 3 and 4 on double click. what will be procedure to do that.
Thank you.
I tried something like this but its not working , Can anybody please help me where is the mistakes ?
//polyline delete on double click
for (var i = 0; i < $scope.polycoords.length; i++) {
var polyline = $scope.polycoords[i];
$scope.polycoords[i].on('click', function (e) {
console.log("sdd",polyline._leaflet_id);
for (var j = 0; j < $scope.polycoords.length; j++) {
if($scope.polycoords[i]._leaflet_id = $scope.polycoords[j]._leaflet_id){
console.log($scope.polycoords[j])
var polyline = $scope.polycoords[j];
map.removeLayer(polyline);
}
}
});
}

polyline.on('dblclick', function (e) {
map.removeLayer(this);
});
Edit
This is going to work because based on your other question here on SO, I know that you create a different polyline for each line. But for anyone else that creates a single polyline with all the coordinates together, this solution will delete the whole polyline, not just a part of it.

Related

Leaflet draw delete features with property

Is it possible to delete multiple features from geojson at once by checking property value?
Using for example code below or using Leaflet draw?
function deleteArea() {
var layers = featureGroup.getLayers();
for (var i = 0; i < layers.length; i++) {
if (layers[i].feature.properties.N == 1)
{
"DELETE?" layer[i];
};
}
};
I have big map and some markers have property: feature.properties.N=1. I can delete them using leaflet draw clicking one by one because I changed marker to red for those layers. But it takes some time.. Is it possible to to this at once?
Thank you very much for your time !
Sure you can simply remove the markers from the map / featuregroup with layer.removeFrom(featureGroup)
function deleteArea() {
var layers = featureGroup.getLayers();
for (var i = 0; i < layers.length; i++) {
if (layers[i].feature.properties.N == 1){
layer[i].removeFrom(featureGroup);
};
}
};
PS: I prefer to use Leaflet-Geoman because it is more modern and is still being supported and gets new features

How to drag a polygon in the same fashion as the dragging a point mapbox-gl-js example?

I have a geojson polygon adding to the map with the click of a button. I also have the style of the polygon changing on the mousedown event on the geojson and the x/y coord pairs (the geojson geometry) printing to the console accessing it through the queryRenderedFeatures call on the API.
I am now wanting to make the polygon draggable like the point example (links below) on the mousedown event on the polygon and be able to move it on the map, updating the x/y coords of the polygon nodes throughout the mousedown event, but keeping the geojson size intact throughout the drag.
Is straight mapbox-gl-js the way to do this, or should I be feeding a pre-configured geojson polygon into a mapbox-gl-draw - draw polygon mode on a user's action?
Any suggestions or examples?
API Drag A Point Example
Drag A Point GitHub Code
Try this
var isDragging = false;
var startCoords;
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['polygon-layer'] });
var polygon = features[0];
if (!polygon) return;
startCoords = polygon.geometry.coordinates[0];
});
map.on('mousedown', function(e) {
isDragging = true;
});
map.on('mousemove', function(e) {
if (!isDragging) return;
var coords = map.unproject(e.point);
var delta = {
lng: coords.lng - startCoords[0],
lat: coords.lat - startCoords[1]
};
polygon.geometry.coordinates[0] = polygon.geometry.coordinates[0].map(function(coord) {
return [coord[0] + delta.lng, coord[1] + delta.lat];
});
map.getSource('polygon-source').setData(polygon);
});
map.on('mouseup', function(e) {
isDragging = false;
});
the polygon is being stored as a GeoJSON feature, and the polygon layer and source are named 'polygon-layer' and 'polygon-source', respectively. You will need to adjust these names to match your setup.

Unable to display correct coordinates of a selected marker

I built a map with Leaflet (inside a Qlikview extension) with many markers.
I want my users go to the map and when they double click on a marker, it displays coordinates.
With the following code, when I click on a marker, I have always coordinates of last marker fetched, not the selected one.
I want to put coordinates in latSel e lonSel variables.
for (var i=0,k=_this.Data.Rows.length;i<k;i++){
var row = _this.Data.Rows [i];
var latitude = parseFloat(row[0].text.replace(",","."));
var longitude = parseFloat(row[1].text.replace(",","."));
//Check to see coordinates are valid
if (latitude != NaN && latitude !='' && latitude <= 90 && latitude >= -90 && longitude != NaN && longitude !='' && longitude <= 180 && latitude >= -180) {
var latlng = new L.LatLng(latitude, longitude);
var poptext = 'Lat & Long:'+latlng+'<br/>'+ row[2].text +'<br/>'+ 'Measure: ' + row[4].text;
var marker = L.marker(latlng).addTo(map).bindPopup(poptext);
marker.on('dblclick', function(e){
latSel = marker.getLatLng().lat;
lonSel = marker.getLatLng().lng
//_this.Data.SelectTextsInColumn(0, true, latSel);
alert("latitude = " + latSel);
});
} else {
//
}
}
What I'm doing wrong?
Thanks in advance.
Assigning onClick listeners in loops can be a bit tricky (search for "javascript onclick loop" in your favourite search engine and you will find some solutions).
Instead of using the marker variable, in Leaflet you can use the variable this inside the callback which refers back to the marker, like so:
marker.on('dblclick', function(e){
latSel = this.getLatLng().lat;
lonSel = this.getLatLng().lng;
alert(latSel);
});
See demo code here: http://plnkr.co/edit/RU3SsoI6A16AYOQAq0xV?p=preview

How to calculate pixels on latlng base: leaflet

I am working with the leaflet api.Where User draw a polyline and latlongs saved in variables.
I been looking for a leaflet function which suppose to take latlongs and calculate pixels.Found the layerPoint function but as i have low understanding of leaflet, can't use the function.
I have used 2 variables to store two latlng parameter, but didn't understand how to use them in layerPoint function.
Script
var polyline = new L.Polyline([]);
var aa;
var bb;
function getDist(e) {
// New marker on coordinate, add it to the map
// Add coordinate to the polyline
polyline.addLatLng(e.latlng).addTo(map).bindPopup();
var ccc = prompt('1st or 2nd');
if (ccc == '1') { aa = e.latlng}
else if (ccc == '2') { bb = e.latlng; convertIt();
}
}
function convertIt(e)
{
var getit = e.latLngToPoint(latlng, map.getZoom());
}
If someone can help, please do help.thanks for your time
latLngToPoint is a method on L.Map. You need to pass a latLng as a parameter to your convertIt function, then return map.latLngToPoint(e), assuming you keep e as the parameter name for convertIt.

remove graphics from inside a class as3

When I click a button in my game it draws shapes using the graphics in as3. simple shapes such as circles and rectangles.
I want to remove the graphics that have been drawn when something happens in one of my classes.
Basically when there is a hitTestObject (which works fine) I want all graphics on stage to be cleared.
if (gb2.hitTestObject(h1s2))
{
trace ("holed")
ySpeed2=0;
xSpeed2=0;
this.visible=false;
var mcSplash:MovieClip =parent.getChildByName("mcSplash") as MovieClip;
mcSplash.visible=true;
//parent.drawings.graphics.clear();
}
My attempt using parent.drawings.graphics.clear(); was unsuccessful, it gives me this error:
Line 481 1119: Access of possibly undefined property drawings through a reference with static type flash.display:DisplayObjectContainer.
Anyone have any suggestions
UPDATE:
this is how, on the min time line, the drawings occur.
var drawings:Shape = new Shape;
for (i=0; i<numRecs; i++)
{
recStartX = Number(xmlContent.rec[i].startpoint.#ptx);
recStartY = Number(xmlContent.rec[i].startpoint.#pty);
recWidth = Number(xmlContent.rec[i].dimensions.#w);
recHeight = Number(xmlContent.rec[i].dimensions.#h);
fillColor=int(xmlContent.rec[i].look.fillhex);
lineThick = Number(xmlContent.rec[i].look.strokethick);
lineColor = int(xmlContent.rec[i].look.strokehex);
drawings.graphics.lineStyle(lineThick, lineColor);
drawings.graphics.beginFill(fillColor);
drawings.graphics.drawRect(recStartX,recStartY,recWidth,recHeight);
drawings.graphics.endFill();
}
Create an array and push in each shape/rect.
Then iterate through this and remove..
for(var iteration:int = 0; iteration < rectArray.length; iteration++)
this.removeChild(rectArray[iteration]);
or if you are calling this from a class, use
MovieClip(this.root).removeChild(rectArray[iteration]);
Hopefully this is helpful :)
Z
What's drawings?! If you draw in mcSplash, you should use mcSplash.graphics.clear(). If you draw in a child called drawings, you should first get it as a child (after mcSplash get): var drawings = mcSplash.getChildByName('drawings); drawings.graphics.clear();. You could write checks to see what's going on: if (mcSlpash) { if (drawings) {, etc..