I have a layerGroup in my map which has a lot of markers and another layerGroup which has a lot of circles. I need to zoom in on these layer groups but I cannot find the exact API method to do so.
I have tried:
var myLayerGroup = L.layerGroup().addTo(map);
myLayerGroup.fitBounds(); // tried this
myLayerGroup.setBounds(); // and this too
I am not sure which method in the API will work for me. How to zoom in on a layer of markers?
Switch from using layerGroup to featureGroup, theb you can use getBounds() on a feature group to retrieve its bounds, then use map.fitBounds(result) to zoom to that view.
Related
my LeafLet map contains a GeoJSON and a Maptiler layer.
First I set up my map by var map = L.map(...). Right after that I add my GeoJSON layer. Then I load my map style via AJAX, change a few things in it, and finally add it to the map as well.
After the map is initialized, both layers seem to have a mismatch in zoom and pan (see image).
I just figured out that the Mapbox-GL-LeafLet-plugin (https://github.com/mapbox/mapbox-gl-leaflet) which is advised by Maptiler, is not working for me.
When I use an open, unstyled TileLayer, the problem is gone.
I need to get lngLat coordinates from Mapbox map container center once the map is loaded and during user interaction with it. Tried to do on the basis of Get coordinates of the mouse pointer example but can't realize how to change e.point JSON coordinates from dynamic mouse cursor XY-coordinates to static XY-coordinates of map viewport center (outerWidht/2 and outerHeight/2).
Mapbox.js and MapboxGL both offer getCenter methods that return a map view's geographic center.
You can use various events such as moveend to update the center dynamically.
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/
so i have a mapbox base map and want to load a dynamic choropleth area map over the top of it. it will cover all continents. i've looked into doing this before using geojson but the resulting file was over 9mb. is there a way to have different geojson vectors loaded at different zoom levels as to reduce the file size ?
the reason the file was so big was because it was a very detailed vector overlay. basically i'd like to replicate the vectors of 'am map' but with the performance of mapbox, with much better vector resolution at bigger zoom levels. (http://www.amcharts.com/javascript-maps/)
the only other way to do this is by using geojson markers that are loaded on top of the base map, but this doesn't give the same visual impact of the fully coloured continent vectors..
any help would be greatly appreciated!
x
Well, you could watch zoomend on the map to add/remove overlays as needed.
map.on('zoomend', function() {
var currentZoom = map.getZoom();
overlayGroup.clearLayers() //remove existing
overlayGroup.addLayer(myZoomLevelMapping[currentZoom]) //add layer for this zoom level.
})
I am working on a map where I have two feature layers.
var myFeatureGroup1 = L.featureGroup().addTo(map);
var myFeatureGroup2 = L.featureGroup().addTo(map);
I am setting bounds like:
map.fitBounds(myFeatureGroup1.getBounds());
map.fitBounds(myFeatureGroup2.getBounds());
But for obvious reasons, myFeatureGroup2 is set bounds on. Is ther a way by which I can fit bounds to multiple layerGroups? Like both of them at once? Is there a way I can merge them into a third layerGroup and fit bounds on it?
map.fitBounds(myFeatureGroup1.getBounds().extend(myFeatureGroup2.getBounds()));
See the LatLngBounds documentation, this is the first documented method.
How about using TurfJS to merge the two bounds together(convert them to geoJSON) first, then map.fitBounds(result).