Leaflet multi-color polyline - javascript

Is there an option in Leaflet to make ONE polyline with different path colors?
In google you can use path object with color property, however I haven't found similar option in Leaflet.

There a few libraries like https://github.com/Oliv/leaflet-polycolor
But you don't need a library for this.
You have your "main" polyline and from this you generate new lines segments.
var poly = L.polyline([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047],
[51.51, -0.06],
]);
//.addTo(map); Don't add the main line to the map
setPolylineColors(poly,['#f00','#ff0','#000'])
function setPolylineColors(line,colors){
var latlngs = line.getLatLngs();
latlngs.forEach(function(latlng, idx){
if(idx+1 < latlngs.length ){
var poly = L.polyline([latlng,latlngs[idx+1]],{color: colors[idx]}).addTo(map);
}
})
}
Example: https://jsfiddle.net/falkedesign/2b8t3v6f/

Related

Check if marker Inside A Polygon

How do I know if the marker is inside a few edges or not? using https://leafletjs.com/
e.g. How to check if a marker like
L.marker([51.505000, -0.09000]).addTo(mymap);
is inside a polygon like
L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ,[51.53, -0.047] ]).addTo(mymap).bindPopup("I am a polygon.");
There are several approaches for this. I would go for leaflet-pip, or in a more generic way, TurfJS's booleanPointInPolygon, e.g.:
var pt = turf.point([ -0.09000, 51.505]);
var poly = turf.polygon([[
[ -0.08, 51.509], [-0.06, 51.503], [-0.047, 51.51] ,[-0.047, 51.53]
]]);
if (turf.booleanPointInPolygon(pt, poly)) {
...
} else {
...
}
Note that leaflet-pip needs instances of L.GeoJSON, and that TurfJS handles data in GeoJSON format. Be aware of Leaflet's lat-long vs GeoJSON's long-lat.
Looking at https://leafletjs.com/plugins.html#geoprocessing , it seems that (at the time of this writing) there are no utilities to do point-in-polygon calculations just with L.Marker and L.Polygon instances.

Add existing leaflet polygons to an existing leaflet layer

I have a bunch of polygons which are stored in a database. I would like to add them to the map in such a way that they can be edited using the leaflet-draw toolbar. Although, now the polygons get added to the map, I am unable edit them.
I think this is because they are not added to the layerGroup() to which newly drawn shapes are added.
Please help.
You have to add your polygons to the featureGroup drawnItems ! Let's say,
var polyLayers = dbArray;
is your database array with polygons. First create a feature group with your drawn items:
var drawnItems = new L.FeatureGroup();
and add it to the map:
map.addLayer(drawnItems);
Then you simply need to iterate over your polygons from your database and add them to the drawnItems FeatureGroup:
for(layer of polyLayers) {
drawnItems.addLayer(layer);
};
Now the layers are added to the map and editable.
Here goes an EXAMPLE:
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var polyLayers = [];
var polygon1 = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]);
polyLayers.push(polygon1)
var polygon2 = L.polygon([
[51.512642, -0.099993],
[51.520387, -0.087633],
[51.509116, -0.082483]
]);
polyLayers.push(polygon2)
// Add the layers to the drawnItems feature group
for(let layer of polyLayers) {
drawnItems.addLayer(layer);
}

center of a polygon created with mapbox

I would like to know how to calculate the centre of a polygon created with this code from Mapbox: https://www.mapbox.com/mapbox.js/example/v1.0.0/show-polygon-area/
I would like to place a marker on the centre of the polygon after it's been created.
Thanks in advance.
To calculate the center of a polygon you first need to get it's bounds, that can be done using the getBounds method of L.Polygon which it enherits from L.Polyline:
Returns the LatLngBounds of the polyline.
http://leafletjs.com/reference.html#polyline-getbounds
It returns a L.LatLngBounds object which has a getCenter method:
Returns the center point of the bounds
http://leafletjs.com/reference.html#latlngbounds-getcenter
It returns a L.LatLng object which you can use to create a L.Marker:
var polygon = new L.Polygon(coordinates).addTo(map);
var bounds = polygon.getBounds();
var center = bounds.getCenter();
var marker = new L.Marker(center).addTo(map);
Or you can shorthand it:
var polygon = new L.Polygon(coordinates).addTo(map);
var marker = new L.Marker(polygon.getBounds().getCenter()).addTo(map);
Using that in the Mapbox example would look something like this:
function showPolygonArea(e) {
featureGroup.clearLayers();
featureGroup.addLayer(e.layer);
// Here 'e.layer' holds the L.Polygon instance:
new L.Marker(e.layer.getBounds().getCenter()).addTo(featureGroup);
e.layer.bindPopup((LGeo.area(e.layer) / 1000000).toFixed(2) + ' km<sup>2</sup>');
e.layer.openPopup();
}
You can use turf library.turf.center(features) gives you a point feature at the absolute center point of all input features. where features in your case will be the polygon selected which you can get using mapboxDraw.getAll()

I have a polygon , and I know all of 4 points. How do I determine if a given point is inside the polygon with OpenLayers?

I referred this post
How to determine if a point is inside a 2D convex polygon?
But I want to do the same in OSM with Open Layers.Please help me.
[Link](http://jsfiddle.net/Sanju5390/3tpLs6w3/)
You can do this with turf.js using turf.inside:
var polygon = new ol.Feature(new ol.geom.Polygon([[[-5e6, -1e6], [-4e6, 1e6],
[-3e6, -1e6], [-5e6, -1e6]]]));
var point = new ol.Feature(new ol.geom.Point([-4e6, 0e6]));
var format = new ol.format.GeoJSON();
var isInside = turf.inside(
format.writeFeatureObject(point),
format.writeFeatureObject(polygon));
console.log(isInside);
http://jsfiddle.net/d6o81vc7/22/

Intersection point of two lines in leaflet

I want to get the intersection point of two polylines in leaflet.
I have two lines as given below :-
var latlng1 = L.latLng(-7.9375, 4.46354);
var latlng2 = L.latLng(-7.96875, 16.11979);
var latlongs1 = [ latlng1, latlng2 ];
var polyline1 = L.polyline(latlongs1, {
color : 'red'
}).addTo(map);
var latlng3 = L.latLng(-3.5625, 9.31719);
var latlng4 = L.latLng(-12.125, 9.50469);
var latlongs2 = [ latlng3, latlng4 ];
var polyline2 = L.polyline(latlongs2, {
color : 'blue'
}).addTo(map);
I can get the bounds and latlongs of the endpoints of these lines. I can't get the contiguous array of all latlongs of line. Is there any way to get that ?
If you don't want to code all the logic, there is a small and easy to use library called Turf that provides several geoprocessing algorithms. You can even use just one of the algorithms mostly independent of the rest of the library.
The lineIntersects module does exactly what you want.
var intersection = turf.lineIntersect(polyline1.toGeoJSON(), polyline2.toGeoJSON());
var intersectionCoord = intersection.features[0].geometry.coordinates;
Also you can check the source code of the module for inspiration.

Categories

Resources