Remove points of polylines that are outside of polygon using Leaflet - leaflet

I've draw polyline programmatically (not using leaflet draw) inside polygone using leaflet draw plugin on map, I want to keep only the points of polyline that are inside of polygone and remove those are outside. Do you have any idea how to do that using a leaflet plugin?. Any help is much appreciated. Thanks
Here is a screenshot:
The expected result:
I did research on difference method of **turf" library as #Sam suggested, so finaly I can apply this method on my drawing polygon and line, here is a code snippet:
var line = path.toGeoJSON();
var polygon = selectedPoly.toGeoJSON();
var difference, result = [];
difference = turf.difference(line, polygon);
if (difference)
{
result.push(difference);
var inter = L.geoJson(result).addTo(map);
}
This is a screenshot of the result:
Now I want to remove this part of line and keep only the section inside polygon, I tried to do that but not working. Can you help me please? Thank you

I'm working with turfjs to check for overlapping polygones in leaflet.
map.on('draw:created', function (e) {
var intersection = [];
otherPolysLayer.eachLayer(function (layer) {
if (!_.isUndefined(turf.intersect(e.layer.toGeoJSON(), ))) {
intersection.push(layer);
}
})
});
You could change the above so that instead it checks for the entire polygone, you'd check with the difference method.
difference: Finds the difference between two polygons by clipping the
second polygon from the first.
I've been looking for a good while for a decent library and looked into leaflet-pip, kevlindev amongst others but I find that turf really just works out of the box.
Update
http://jsfiddle.net/ddce1wh5/ how about this? I used intersect, because that is apparently the part you'd like to keep, I misread, apologies. The following http://jsfiddle.net/mcqL1y90/ we use an array of lines that uses either the intersecting line, or if no intersection is taking place it takes the line itself to draw on the map.

Related

Using leaflet to determine if a line intersects through a polygon [duplicate]

I am trying to work out the best way to determine if a line goes through a polygon, where it is possible that that points on that line do no fall within the polygon as shown in image below.
My data is multiple polygons and I wish to see if a line (lat,long to lat,long) goes through 1 or more of the polygons.
leaflet has a leaflet-pip that does a point in a polygon but I need to test a line... turf.js has lineIntersect but would this work with a line and a polygon (JSON)? Is there something else I can use but haven't found yet?
Just after some advice on the best way or library to achieve this
Thank you.
turf booleanIntersects works nicely.
Example here: https://codesandbox.io/s/ripkk?file=/src/index.js:9634-9641

is there a smarter way to combine markers and polygons

I'm pretty new in using OpenStreetMaps with leaflet and got stuck trying to find out if there is a smarter way to include a boundary that I found on a map with markers that I created.
The best way I found until now is to find the area I need to show behind my markers ( for example this area : https://www.openstreetmap.org/relation/3123501#map=9/54.1375/-1.3898 ) and convert that to a list of lat/long coordinates that I add using (shortened the poly coordinates) code like this:
var latlngs = [
[54.1508316, -2.5609075],
[54.1498313, -2.5577575],
];
var polygon = L.polygon(latlngs, {color: 'rgba(0, 128, 0, 1.00)'}).addTo(map);
// zoom the map to the polygon
map.fitBounds(polygon.getBounds());
It produces the output I want but having 10k coordinates does not seem like an effective way to do this. Unfortunately my google and reading afforts dit not help me (yet) so I'm asking if somebody can point me in the right direction (if there is any) to do this in a smarter way.
Thanks in advance.

RPG Map questions

I have a map for my Pen and Paper RPG and I want to show it via Leaflet.
I put the Png-File throw a Tile- Making Script and was able to generate this map.
I want to do the following things but don't know how:
Place the equator on the actual equator of the map
Putting bounds on the map, but only for the north-south-axis
The scale calculates with the dimensions of the real earth and i want to give it the dimensions of my world
I want my markers and polygons to repeat every 360°
I would appreciate any help,
Civer
To get the equator you could use a polyline like
var latlngs = [
[0, -180],
[0, 180]
];
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
Not really sure what you mean by "putting bounds on the map". Are you saying you want to limit the user's ability to pan to areas outside of the map? Or are you talking about some sort of visual bounding line?
To do stuff with with different scales I'd suggest you look into how leaflet's Coordinate Reference System works (CRS). Take a look at this page: https://leafletjs.com/examples/crs-simple/crs-simple.html
It looks like you commented out some CRS stuff in your demo.

Leaflet - tooltips for overlapping polylines

Background:
I am working on a web based mapping application for hiking. So the map based on leaflet offers routes on hiking trails that are labeled. As any hiking trail can be part of multiple routes, routes - respectively the corresponding polylines representing the routes - can overlap.
Problem:
Each route has its tooltip (triggered by mouseover, {sticky:true}) showing its label which works as expected for non-overlapping polylines but as soon as two or more routes overlap only the polyline "on top" gets its tooltip opened. This behaviour is not bad per se but as all routes are equally important I would like to show all labels of the routes at the pointer's location (or something like a maximum of 5 labels + x more). I weren't able to find any issue related to this topic.
What I tried:
- Create a feature group for all routes, bind the tooltip to the group, hoping that the tooltip function provides an array of all polylines crossing the pointer's position. As it turned out, I only get information of the polyline on top
- I tried the same with a mousemove event on the map, no success
- Comparing pointer's layerPoint coordinates with all routes' _rings & _parts layPoint arrays to find matching layerPoints, but the success rate is only about 5% as these layerPoints only cover actual points of the polyline but not the connection between two points. Additionally, there is a margin around each polyline that triggers the tolltip before the pointer even touches the polyline (too improve touch action, I guess)
- A solution to the margin problem is to add positive and negative margins to each polyline point before comparing it to the pointer coordinates which improves the outcome but doesn't solve the main problem.
Sidenote:
- All routes are drawn into a single canvas
Long story short, I need external help to accomplish the goal. Maybe some of you have an idea or can provide a solution. Any input is appreciated.
** UPDATE: **
A working but pretty inefficient solution is as follows
Approach:
Calculate the shortest distance from the pointer to all routes in viewport. If distance from the pointer to a route is under a certain threshold, add them to the array of route labels that should be displayed.
Steps:
1.) bind a blank tooltip to the a feature group containing all routes
2.) bind mousemove event to the feature group with the follwing function
var routesFeatureGroup = L.featureGroup(routesGroup)
.bindTooltip('', {sticky: true})
.on('mousemove', function(e){
var routeLabels = [e.layer.options.label]; // add triggering route's label by default
var mouseCoordAbs = el.$map.project(e.latlng);
$.each(vars.objectsInViewport.routes, function(i, v){
if (e.layer.options.id != el.$routes[i].options.id && el.$routes[i]._pxBounds.contains(e.layerPoint)){
var nearestLatlngOnPolyline = getNearestPolylinePoint(e.latlng, el.$routes[i]);
var polyPointCoordAbs = el.$map.project(nearestLatlngOnPolyline);
var distToMouseX = polyPointCoordAbs.x - mouseCoordAbs.x;
var distToMouseY = polyPointCoordAbs.y - mouseCoordAbs.y;
var distToMouse = Math.sqrt(distToMouseX*distToMouseX + distToMouseY*distToMouseY);
if (distToMouse < 15) {
routeLabels.push(el.$routes[i].options.label);
}
}
})
var routesFeatureGroup.setTooltipContent(routeLabels.join('<br>'));
})
Explanation:
I already gather all objects (routes and markers) in the current viewport for another part of the app. All routes currently visible are stored in vars.objectsInViewport.routes (respectively their ids), so I dont have to go through all routes. The layer that triggered the mousemove event is added by default. I then check for each of the routes currently visible if:
- their id is different to the layer that trigger the mousemove event (as this label is added by default)
- if their bounds (in cartesian coordinates: "_pxBounds") contain the cartesian layerPoint of the mousemove event (for a rough approch to exclude routes that don't intersect)
If these conditions are met for a route, calculate the closest latlng point from the pointer to the route. I do this with a custom function, which is a bit to long to post it in this context. (I will if someone asks for it)
The mouse position and the latlng point on the polyline / route are then converted to absolute coordinates using the map-project method
http://leafletjs.com/reference.html#map-project
At last, the distance between these to points is calculated using pythagoras. It is pixel based, so that the zoom level isn't a factor. If the distance is below a certain threshold (15px) they are close enough to the pointer to be considered as being hovered (with the default margins around a polyline), so the label of the route is added to the label array.
Finally the tooltip for the feature group is filled with all labels.
Results are pretty promising even though the operation is pretty expensive. I added a timeout of 50ms to reduce the function call a bit:
var tooltipTimeout;
var routesFeatureGroup = L.featureGroup(routesGroup)
.bindTooltip('', {sticky: true})
.on('mousemove', function(e){
clearTimeout(tooltipTimeout);
tooltipTimeout = setTimeout(function(){
// collect labels
// ...
},50);
.on('mouseout', function(){
clearTimeout(tooltipTimeout);
})
I can give you an idea of how to do this, but I am not 100% sure that it will do the job. There is a plugin for Leaflet (Mapbox) that can tell you if a point is within a Polygon and it returns all the Polygons that contain that point.
If this plugin doesn't work for polylines you can create a polygon from a polyline by just going back from the last point to the first and closing the line (I am not sure if this suits you solution). For example if you have a polyline of connected points of [0, 1, 2, .... n-1, n] you then go back with connecting [n with n-1, n-1 with n-2, ... 1 with 0]. This way you will have the same shape of the polyline but it will be a polygon. This isn't the most optimized solution, it is a quick fix that uses a known and available plugin.
Once you get all the tooltips, you can open all of them at once for each polygon/polyline. Or maybe open some helper tooltip where the user can select which one he wants to open.
I hope this helps! If you figure out a better solution (or find a plugin that does the job) please post it here.

Leaflet Map Clustering + Marker Rotation

Has anyone ever tried to use Leaflet Clustering Plugin + Marker Rotation Plugin? I tried to work with both but they work partially.
In a first view, I can see some clusters and some isolated (and rotated) markers. Every time I zoom in into some Cluster the rotated markers disappear. Does anyone have any idea why this happens?
to simply rotate a marker, use :This Leaflet Plugin
include this in your html :
<script src="../leaflet-plugin/Marker.Rotate.js"></script>
wen create a marker :
var marker = new L.Marker(map.getCenter(), {iconAngle: 90});
a complete example
Found a solution provided by Dave Leaver..it works perfectly.
"You can hack it to work with L.MarkerClusterGroup (so it is no worse than it is already) by changing the start of the update function in the rotate plugin to bail if there is no _icon:
update: function() {
if (!this._icon) {
return;
}
The problem is that the rotate plugin is overwriting the transform and fighting with leaflet on it.
I recommend instead using a DivIcon with a child element that has the rotation, that way leaflet can happily update the transform to move the marker independent of the rotation.
As a totally broken example:
var m = new L.Marker(getRandomLatLng(map), { icon: L.divIcon({html:'<img src="http://cdn.leafletjs.com/leaflet-0.5.1/images/marker-icon.png" style="-webkit-transform: rotate(39deg); -moz-transform:rotate(39deg);" />'})});"