Has anyone ever tried to use Leaflet Clustering Plugin + Marker Rotation Plugin? I tried to work with both but they work partially.
In a first view, I can see some clusters and some isolated (and rotated) markers. Every time I zoom in into some Cluster the rotated markers disappear. Does anyone have any idea why this happens?
to simply rotate a marker, use :This Leaflet Plugin
include this in your html :
<script src="../leaflet-plugin/Marker.Rotate.js"></script>
wen create a marker :
var marker = new L.Marker(map.getCenter(), {iconAngle: 90});
a complete example
Found a solution provided by Dave Leaver..it works perfectly.
"You can hack it to work with L.MarkerClusterGroup (so it is no worse than it is already) by changing the start of the update function in the rotate plugin to bail if there is no _icon:
update: function() {
if (!this._icon) {
return;
}
The problem is that the rotate plugin is overwriting the transform and fighting with leaflet on it.
I recommend instead using a DivIcon with a child element that has the rotation, that way leaflet can happily update the transform to move the marker independent of the rotation.
As a totally broken example:
var m = new L.Marker(getRandomLatLng(map), { icon: L.divIcon({html:'<img src="http://cdn.leafletjs.com/leaflet-0.5.1/images/marker-icon.png" style="-webkit-transform: rotate(39deg); -moz-transform:rotate(39deg);" />'})});"
Related
I've draw polyline programmatically (not using leaflet draw) inside polygone using leaflet draw plugin on map, I want to keep only the points of polyline that are inside of polygone and remove those are outside. Do you have any idea how to do that using a leaflet plugin?. Any help is much appreciated. Thanks
Here is a screenshot:
The expected result:
I did research on difference method of **turf" library as #Sam suggested, so finaly I can apply this method on my drawing polygon and line, here is a code snippet:
var line = path.toGeoJSON();
var polygon = selectedPoly.toGeoJSON();
var difference, result = [];
difference = turf.difference(line, polygon);
if (difference)
{
result.push(difference);
var inter = L.geoJson(result).addTo(map);
}
This is a screenshot of the result:
Now I want to remove this part of line and keep only the section inside polygon, I tried to do that but not working. Can you help me please? Thank you
I'm working with turfjs to check for overlapping polygones in leaflet.
map.on('draw:created', function (e) {
var intersection = [];
otherPolysLayer.eachLayer(function (layer) {
if (!_.isUndefined(turf.intersect(e.layer.toGeoJSON(), ))) {
intersection.push(layer);
}
})
});
You could change the above so that instead it checks for the entire polygone, you'd check with the difference method.
difference: Finds the difference between two polygons by clipping the
second polygon from the first.
I've been looking for a good while for a decent library and looked into leaflet-pip, kevlindev amongst others but I find that turf really just works out of the box.
Update
http://jsfiddle.net/ddce1wh5/ how about this? I used intersect, because that is apparently the part you'd like to keep, I misread, apologies. The following http://jsfiddle.net/mcqL1y90/ we use an array of lines that uses either the intersecting line, or if no intersection is taking place it takes the line itself to draw on the map.
I'm using Leaflet with Mapbox and I'd like to set the view of the map so :
all markers are visible
the center is set to a specific point
It's easy to do each points separately with setView and fitbounds but I don't know how to have both at the same time since setView changes the bounds and fitBounds changes the center. A solution could be to define a center and a zoom but how can I know which zoom will allow all my markers to be visible ?
EDIT
I implemented the solution suggested by IvanSanchez and it works as expected:
let ne=leafletBounds.getNorthEast();
let sw=leafletBounds.getSouthWest();
let neSymetric=[ne.lat + (center.lat - ne.lat)*2, ne.lng + (center.lng - ne.lng)*2];
let swSymetric=[sw.lat +(center.lat - sw.lat)*2, sw.lng + (center.lng - sw.lng)*2];
leafletBounds.extend(L.latLngBounds(swSymetric, neSymetric));
Get your bounds, and create a second L.Bounds instance by applying point symmetry along the centerpoint you want. Create a new L.Bounds containing the original bounds and the symmetric bounds. Run fitBounds() with that.
I found another solution to this. You can simply call map.panTo([lat, lng]) after you've adjusted your map with fitBound(). I am using VueJs and calling this in the mounted() lifecycle hook.
I am fitting bounds so you can see a user's location and also a geographic feature far away, but then I use panTo so the user's real location is at the center of the map after fitBounds. It seems to work seamlessly so far.
Say I have a geojson box I've added to leaflet. How can I allow the user to "click and drag the box" to a new location, which in turn updates all the coordinates automatically? I know how to edit the boundary/points that make up the shape using leaflet editing, but am not sure how to actually move the shape.
There is a Leaflet.Draw.Drag plugin for Leaflet Draw that allows you to move polygons when you enter edit mode. It does seem to be a bit finicky about the version, though. At least in a few quick experiments, I was only able to get it to work using Leaflet Draw version 0.2.3. If you have an existing L.GeoJson layer, you can simply specify that as the featureGroup in the edit options of the draw control:
var drawControl = new L.Control.Draw({
edit: {
featureGroup: yourGeoJsonLayer,
edit: {
selectedPathOptions: {
maintainColor: true,
moveMarkers: true
}
}
}
});
In the selectedPathOptions, the maintainColor option just keeps the existing style of the layer while you're editing, and the moveMarkers option places a little square marker in the middle of the polygon as a reminder that you can drag the whole thing rather than just edit the vertices.
Here is an example fiddle:
http://fiddle.jshell.net/nathansnider/qk5bsgn8/
I have a mapItems layer (MarkerClusterGroup) which I use for all my map items. On the run I am adding and removing points from that layer (oh and that's GeoJSON).
And using this to fit all points nicely inside the map:
map.fitBounds(mapItems.getBounds());
Now weird thing happens when I add more points, so the bounds of the layer expands. But when I remove those points, bounds of that map (after using fitBounds of course) stays the same as maximum even though there are no points in some areas.
What could be a problem? Do I have to reset bounds of that layer somehow? Or is it better to destroy layer and create a new one each time I'm loading points to that map?
P.S. I just noticed that If I'm not using L.MarkerClusterGroup but L.FeatureGroup instead, everything works just fine... So it's something to do with clustering.
OK, so my problem was using this to clear the layer:
layer.eachLayer(
function (sublayer) {
layer.removeLayer(sublayer);
}
);
And this doesn't seem to work with L.MarkerClusterGroup. Instead I'm now using this and everything works fine:
layer.clearLayers();
Is it possible with leaflet.js or mapbox.js to determine what terrain / map type a marker is on.. For example the sea, land, road or buildings?
http://leafletjs.com/
http://mapbox.com/
If you are building your own map with TileMill, you could do this with interactivity: http://mapbox.com/tilemill/docs/crashcourse/tooltips/ You wouldn't necessary have to have a popup appear, but could instead use UTFGrid as a key/value store to indicate areas tapped on the map.
This is not a method provided in the LeafletJS package (that I know of).
However, you can combine your Leaflet map with the Google Geocoding API to return the location_type, which will tell you what type of terrain feature you're over.
It's not perfect but should give you the level of detail you're looking for.
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?latlng=' + marker._latlng.lat + ',' + marker._latlng.lng + '&sensor=false', function(data) {
var terrain = data.results[0].geometry.location_type;
});
Here's a jsFiddle showing how this could work.