I have a GeoJson having 40,000 features as MultiPolygon.Can anyone guide me that how can i select individual polygon from it and edit that selected one. Right now when I click edit in Leaflet-Geoman toolbar it selects all 40,000 features and make them editable that crash browser window.
if I understand right your question, you need to filter that objects by property.
Maybe you could send some screenshots or code examples?
You could try to do it like this:
let obj = []
if (condition) continue
for (obj in geoJson) {
obj.push(geoJson[obj])
}
console.log(“filtered objects”, obj)
Related
I have a google layer (baselayer) GoogleMutant and want to update its options. I try to
map.remove(google.layer)
//update the POI visibility
google.layer.options.styles.forEach(i=>i.stylers[0].visibility = "off")
map.addLayer(google.layer)
this updates the layer options but the Points of interest are still on the map. Is there any way to update the options and apply them to the baselayer?
Thanks
Here is an example with google mutant https://jsfiddle.net/benderlio/2m4c01w6/10/
There is a button "remove POI", and I want to remove all poi from current layer with leaflet API
Leaflet doesn't work changing settings on the fly. You have to remove the whole object and create a substitute.
Like if you need to change a layer, you have to remove it like:
roadMutant.removeFrom(map); // or
map.removeLayer(roadMutant);
And then create and add the new one:
roadMutant.addTo(map);
I created a fiddle to help the change based on yours. It still have bugs and somewhere to grow, but it's a base...
I've been figuring out how to add the popup after geocding search result.
Currently, i am using below documentation to try out. In the documentation, it only shows how to search using your own dataset and the marker will appear when the search is completed.
However, i would like to add the popup when the marker is clicked.
I've read up other documentation on Mapbox on "popup". However, i cannot seem to be able to implement in this code.
here is the documentation that i am currently trying for geocoding: https://docs.mapbox.com/mapbox-gl-js/example/forward-geocode-custom-data/
Welcome! I had this problem long ago. I had polygons where I needed a popup to appear onclick. My polygons were areas of the ocean where hazardous seas were (a warning for ships, etc). Here, I have a function that activates onclick. It then makes sure the popup appears in the correct order on the screen, and optionally will change the style of the mouse cursor.
I would explain more in detail but I think the code is self-explanatory for the most part. It is difficult to find good examples in documentation sometimes (although Mapbox is making great strides lately in the documentation side of things.)
Check the solution below and feel free to accept it if it works for you, otherwise I can help with questions as well if you need. I have commented it for you.
map.on('click', 'HazardousSeasWarning', function (e) {
var coordinates = e.features[0].geometry.coordinates[0][0].slice();
var description = e.features[0].properties.description;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter', 'HazardousSeasWarning', function () {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'HazardousSeasWarning', function () {
map.getCanvas().style.cursor = '';
});
I'm using Leaflet.markercluster 1.0.1
I'm trying to add button on my map, so users can enter in 'edit mode'. On click on that button it should toggle dragging state for all markers. I don't really know how to implement that correctly, but I wrote that code
var drag = false;
$('#button').on('click', function () {
drag = !drag;
markers.eachLayer(function (marker) {
marker.options.draggable = drag;
if (marker.dragging) {
drag ? marker.dragging.enable() : marker.dragging.disable();
}
});
});
It works for some time, but then I get Exception on .enable()
Uncaught TypeError: Cannot read property 'classList' of null
Is anyone know any correct way to do that?
Thanks in advance!
It seems that the logic for the forEach method in MarkerClusterGroup iterates through markers not visible on the map after dragging a spiderified marker. Then the logic for enabling dragging fails, as the marker does not have an icon instance, because it has been removed from the map.
I've cleaned up the reproducible example a bit, and left a copy at https://playground-leaflet.rhcloud.com/qate/1/edit?html,output - I strongly suggest that you turn this into a good bug report in the Leaflet.MarkerCluster.
You may also check if each of the markers has a marker._map private property to check if they are on the map, and skip those which are not, but this may lead to other issues down the road.
In Leaflet, is it possible to define a marker or polyline with {clickable:false}, so that a click is passed through to whatever lies beneath - be it the map or a clickable geometry object?
At the moment I solve this problem by making the marker/polyline clickable and passing the event onwards myself. But this leads to the mouse cursor always showing as the hand symbol. Ideally, the mouse cursor should look like the normal pointer or the hand, depending on whether what is beneath the marker/polyline is clickable.
This may not be the answer you are looking for, but you can use featureGroups to have all of your clickable polylines come to the front so that the actions are surfaced.
var lg_noclick = new L.FeatureGroup().addTo(map);
var lg_click = new L.FeatureGroup().addTo(map);
// Add lines
lg_click.bringToFront();
updated fiddle
Also if you can afford to know your lines before hand, correct ordering of when you add the lines it will work as well.
I know this is not ideal but it suited my situation just fine, so it might be good for you as well.
This hides the icon and brings it back after a second using mouseenter and mouseleave events:
$('.leaflet-marker-icon').mouseenter(function() {
$(this).hide();
});
$('.leaflet-marker-icon').mouseleave(function() {
$(this).delay(1000).show(0);
});
I am using KineticJS for implementing a graphical editor. I would like to drag a KineticJS Group and drop it into another shape. So far so good, done binding the "dropend" event to a handler in the group.
But I would like to change color to the potential destination shape while hovering on it during dragging, so as to give evidence that it is a suitable shape for drop.
I can't see a way of doing it and I am not been able to find any help in Kinetic documentation. How could I do?
Thanks,
eca
After some mumbling, I think I have found a solution:
var aShape = new Kinetic.Shape(...);
:
aShape.on("dragmove", function(evt) {
// Detect shapes under mouse position
var pos = aShape.getStage().getUserPosition(evt);
var collidingShapes = aShape.getStage().getIntersections(pos);
:
// If needed, filter out colliding shapes not suitable for drop
:
// Highlight drop target candidates, e.g. simulating a "mouseover"
for (var iTarget = 0; iTarget < collidingShapes.length; ++iTarget)
collidingShapes[iTarget].simulate("mouseover");
// If you need to remove highlighting, keep track of previously
// highlighted shapes and call simulate("mouseout") on those
// not currently in the candidates set.
});
Though what you did is actually working, I find it very slow. What I did, was to replace the line 3142 of kineticjs (v4.0.1):
else if(this.targetShape && !go.drag.moving)
with
else if (this.targetShape)
and it works like a charm. The mouseout and mouseover events are now fired.
Anyway, I don't know why, but there had been a property of the stage object (shapedragging or so) which pointed to a potential target, but it had been removed.