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.
Related
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 try to repeat a marker at the same coordinates when I am moving the map to infinity, in the same way that layers.
example : https://www.mapbox.com/mapbox-gl-js/example/geojson-polygon/
Has anyone found how to do that please?
If it's not possible, conversely is it possible to not repeat layers when you moving the map ?
Thank you
The Link example you provided is not using Markers to render the shaded area. It is using a feature, in this case a polygon, included in a layer (a layer can have many features).
In MapBox the rendered map is made up of any number of layers (including the tile data) which is rendered whenever you scroll or drag to a particular area of the map. For example as you keep dragging to the right in the map it will just keep rendering in the relevant layers and tiles.
The Marker functionality has a different purpose which is as a one off selected point which is useful for a user click or hover interaction.
at present our project is using the leaflet, I take the map parameters to background program (map.getZoom() and map.getbounds()) , then load the returned picture(return from background program) by imageoverlay.
excuse me how to solve continuous drag or continuous scaling, only the implementation of calling a daemon?
If you mean you dynamically load the base map (i.e. the image that is zoomable, draggable and that fills a big pane, not just a small portion that would have needed a single image overlay), you should probably rather do it through a Canvas Tile Layer:
Used to create Canvas-based tile layers where tiles get drawn on the browser side.
With this, you set up a myCanvasTileLayer.drawTile function that is called by Leaflet anytime the map needs more tiles (due to user panning / zooming). Please refer to Leaflet doc for the function arguments.
If you want to stick with your image overlay technique, you might want to listen to drag and zoomend map events to re-trigger your function that loads a new image overlay.
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.
I'm using a combined tilelayer, which I have to refresh (using .redraw() currently) each time a new layer has been added or an old has been removed. There are no technical problems with my implementation, but when a layer is toggled, there is a brief flicker as the old tiles are instantly removed, but the new ones obviously take a few moments to load in.
Is there any way to keep each of these old tiles until its replacement has been loaded, resulting in a smoother transition?
I have considered using a temporary layer, and loading the new tiles above the old ones, but this would cause a lot of extra work and loading, so I'm hoping leaflet has something more elegant built in, like a delayRemoval option or something.
Here's a jsfiddle: http://jsfiddle.net/Q6586/
If you click the map, it will redraw itself, instantly removing the old tiles, and the map will briefly flash gray before the new ones are loaded.
I want to get rid of that flash. I have temporarily solved this by creating a new layer on top of the old one, but I feel that's a very unelegant solution.
You could create another layer that you would bring to front while you are redrawing.
The event 'load' will tell you when all tiles are loaded
map.on('click', function(e) {
layer2.bringToFront();
layer.on('load', function(e) {
console.log('loaded');
layer.bringToFront();
});
layer.redraw();
});
Have look at this JSFiddle: http://jsfiddle.net/FranceImage/5452r/
I call different tiles so that you can see. Obviously, you will use the same template for both tile layers.