I'm trying to code javascript for the first time, I want to add a few buttons and have the user draw Polygon,line,
can you help please
Related
I'm working website which uses a lot of markers. And for performance reasons I'm going to render only visible markers after each move.
I'm using mapbox js library via react-mapbox-gl react library.
Any advice how to get visible coordinates from map? Top left and bottom right visible coordinates is enough.
You can use map.getBounds() or map.getBounds().toArray().
UPD: Done. Look at this beautiful polygon.
UPD: In Flutter / openstreetmap, I want to let users draw a polygon by tapping a map and/or clicking a button. The polygon should be not filled. I need a very simple example just to get an idea of how it works.
The final task is:
I am making a flutter application that should give the user the ability to get information about markers located within a certain area on the map. I use osm. By pressing the button, the user initiates the construction of an arbitrary polygon, each corner of which is formed at the place of the next pressing of the button. When the construction of the polygon is completed, the objects inside the polygon are shown, the rest are hidden or not built. After that, the cycle ends by clearing the map.
I haven't found any solution for osm. I would appreciate any help. I don't have any code yet)
You can use the flutter_map library, I'm sure you can understand the documentation and how to set it up.
Then use PolygonLayerOptions(polygons: [Polygon(points: polygonList)]) as a layer on top of the OSM layer. Then set up the list polygonList and use the FlutterMap()'s onTap callback to get the position at which the user tapped and add the LatLng to the polygonList list. There are multiple other configuration options within the Polygon() constructor, and those can be found through IntelliSense or similar. To have no fill, just set the color to transparent.
I use this method (or a very similar one) for my app which lets users download areas of map. The user taps the top left and bottom right of a rectangular area they want to download, by code calculates the top right and bottom left, and a polygon is drawn to show the user exactly where they tapped. Make sure to use setState() or similar.
I am using leafletjs in a project. On the map I have several polygons and markers. There is a click event on all of them to display some information when one of them is clicked. I would like to take the information away if the user clicks on a 'blank' part of the map (not on any polygons or markers). I know the map has the 'click' event but so far I am struggling to find a way to detect if the user clicked on a layer. Any advice?
you can use preclick event to clear all the data
https://leafletjs.com/reference-1.2.0.html#map-preclick
Introduction
As i am working on application which uses leaflet api. Live Here
Where first user enter '1' as input to load the image on map.
Then user can draw different shapes(fences) using bottom-left buttons.
The 'eraser' button is suppose to remove all layers from map regarding CurrentFeatureGroup.
Problem
When we click on 'eraser' button, all shapes will be removed from map having currentfeaturegroup.
But after removing when we draw some other shapes, these shapes are invisible, although i have checked the function working properly.
I don't have idea how these shapes are now invisible.
Script(which responsible to remove layers)
L.easyButton('<img src="/delete.png">', function () {
map.removeLayer(currentFeatureGroup);
$('.leaflet-container').css('cursor', '');
}).addTo(map);
Please consider removeLayer, not clearLayer.If someone have any idea
about this problem please do help.Any kind of help or reference will
be appreciated, thanks for your time
If you completely remove the featurelayer from the map by using map.removeLayer(currentFeatureLayer) where do you expect that any new features you draw after that will be added to? If you want to remove all current features from the featurelayer you really should be using currentFeatureLayer.clearLayers() which will keep the featurelayer so that you can continue to add features afterwards.
Is there a plugin (like OverlappingMarkerSpiderfier-Leaflet) or does anyone know how to account for polyline overlapping with markers? I am basically trying to avoid situation line this
UPDATE1:
I specifically want the polyline to go around the marker (like an arc) so that its clear to the user that the curved polyline is connecting the end-most markers and middle marker's polylines are then visible
What exactly is the issue with the above? If it's a matter of the markers appearing below the lines, you just need to either
add the markers after you add the lines
or better yet, use leaflet's .bringToFront() and .bringToBack() methods.
Reordering the z index of a feature layer is a pretty straightforward use case, so I don't imagine you'd need a plugin for it.