I have created polylines with LeafletJS to connect markers on an openstreetmap. However, when I add more than two points to my polyline function an unwanted yellow triangle appears between the points. (Image and code below)
Is this a known issue or is there a bug in my code? I've tried looking at documentation and a couple of examples and they do it the same way.
var firstpolyline = L.polyline([[53.095039, -7.921957],
[51.143901, -1.434145],
[52.915245, 6.869848]], {color: 'red'}).addTo(map);
Turns out you have to specify fill:'false', fillOpacity:'0' where the color is set to remove the yellow triangle (polygon fill). Now there are just the red lines.
The link to the documentation is here: https://leafletjs.com/reference-1.4.0.html#polyline
Related
I am using "mapbox-gl": "^1.3.0"
So, in mapbox GL JS,
I would like to know if there is a way to draw polygons such as triangles and squares like circles on layers.
But the problem is I have to do this in a coordinate that is of the geoJson type: Point not Polygons.
{"type":"Point","coordinates":[307170.943,6679032.568]}
There was an example in the documentation to do this when with "type": "Polygon".
https://docs.mapbox.com/mapbox-gl-js/example/fill-pattern/
But I want to do it with Points just like how we are able to draw circles using
{
'type': 'circle'
}
in the place of points.
Note: I tried adding a sprite and plotted an icon using "icon-image" like this:
"layout": {
"icon-image":"airport-15" ,
"icon-size": 1
}
But the problem is I have more than 100 k points like this. So, rendering so many images is causing the map to lag too much. This doesn't happen when i use circles as i believe drawing is smoother than using images.
Any help would be appreciated.
Using a symbol is probably best. The lag could be if you're avoiding overlaps. Check out the style spec and change the property to allow overlaps should speed it up. Make sure you only have one source and one layer.
When drawing multiple polylines, and zooming out the map, the line starts creating circles on vertexes:
The lines are being draw as follows:
L
.polyline(line, {weight: 4, color: color, smoothFactor: 0, offset:offset})
.addTo(Window.map);
I have tried with different values for the smoothFactor and offset with little difference. Why are the circles only visible when the map is not fully zoomed in? Can it be fixed?
Looks like you apply a pixel offset to the polylines.
When you zoom out, the vertices of your polyline become so close from each other that the offset algorithm determines directions for applying the offset much further than the general trend, leading to these funny circles.
The issue lies in the Leaflet.PolylineOffset plugin, I have created a new pull request which hopefully fixes it or at least serves as a basis to a better solution.
https://github.com/bbecquet/Leaflet.PolylineOffset/pull/21
I have a Leaflet map with a geoJSON containing contour lines. The elevation corresponding to each line is located in feature.properties.Elevation of the geoJSON. I want to achieve the following:
What I've tried to achieve this in leaflet is to calculate the center of each polyline and then add a marker to that position containing the data from feature.properties.Elevation.
L.geoJson(contourJSON, {
onEachFeature: function(feature, layer) {
var label = L.marker(layer.getBounds().getCenter(), {
icon: L.divIcon({
className: 'label',
html: feature.properties.Elevation,
iconSize: [100, 40]
})
}).addTo(map);
}
});
Which kind of works, but does not have a nice styling and it's not really clear which value belongs to a specific line:
What would be a better method of adding the elevation labels in such a way that it is readable and maybe dynamic to the current zoom level? I'm using Leaflet 1.0.3 so maybe Tooltip could offer a solution? Thanks!
You might be interested in those Leaflet plugins, possibly combined: (not sure how easy it would be to combine them)
Leaflet.LabelTextCollision (demo)
…display[s] labels on vector data while avoiding label collisions.
Leaflet.TextPath (demo)
Shows a text along a Polyline.
You might also want to check out the rest of Leaflet plugins.
BTW, I am not sure placing your label / marker at the polyline "center" is appropriate. You might just pick one of its vertices, or for example the farthest to the right / East to have an effect similar to the example you provide.
I draw circles and polygons on Google maps using DrawingManager. I tried to remove a circle/polygon by using the below code.
selectedShape.setMap(null);
Here selectedShape is either circle or polygon.
But it just hides the shape from the view. Internally that shape present in DOM.
For example: I have drawn 2 circles and 2 polygons. Now the total of shapes is 4. If I remove a circle or polygon, the count is still 4. It's not removed from DOM. Just hidden.
I want to completely remove a selected shape out of many shapes.
Has you can read from the documentation:
https://developers.google.com/maps/documentation/javascript/shapes#circle_remove
The .setMap(null) does not delete the circle. It simply removes the circle from the map. If instead you wish to delete the circle, you should remove it from the map, and then set the circle itself to null.
When adding a polygon to a Leaflet map, the border is quite wide (dark blue in image below). For maps of a wide area, this often obscures finer details of the map underneath.
Is it possible to reduce the width of the border, while retaining the other default styling of the polygon?
Currently I am creating the polygon from GeoJSON using
var boundary = { "type": "Feature", "geometry": {"type":"Polygon","coordinates":[....]}};
var poly = L.geoJson(boundary);
map.addLayer(poly);
I am using Leaflet 0.7.3 (latest stable release). I'd be interested in solutions that change the style across all instances of leaflet maps, as well as ways to change it for a specific map.
Please read the Leaflet documentation, which specifies a weight option for paths, which you can specify as an option to L.geoJson.
var poly = L.geoJson(boundary, { weight: 1 });