I am tracking device with gps coordinates. I need to fitbounds map from starting location of device to recently received gps location in realtime. I tried using map.fitbounds(); but unable to achieve it.
Can somebody help on this?
for(markersArray){
var southWest = L.latLng(markers[0].lat, markers[0].lng); // starting marker
var northEast = L.latLng(parseFloat(preciseLat), parseFloat(preciseLng));// current marker
var bounds = new L.LatLngBounds(southWest,northEast);
map.fitBounds(bounds);}
The map.fitBounds function expect a LatLngBounds parameter as stated in the leaflet documentation, you can put the starting point marker and the current point marker in the same layer group and then use this code :
map.fitBounds(myMarkersGroup.getBounds().pad(0.5));
I've created a JSFiddle with a full example : https://jsfiddle.net/ro8nL7s1/
Solved problem with following. Main issue was with maxZoom parameter. I set it so that map is prevented to auto zoom
map.fitBounds([
[preciseLat, preciseLng],
[markers[0].lat, markers[0].lng]
],{maxZoom : 13});
Related
In Mapbox you can use setCenter with an optional "padding" value which is useful for offsetting the map center if there are things such as overlays on part of the map. However getCenter does not seem to have the same padding option. This becomes an issue when I need to get the map center that matches the visual location of the offset center. Does anyone know of a way to get the center of the map with padding taken into account the same way that setCenter does?
The solution I found was to use Mapbox's unproject method. I first obtained the x/y screen coordinates of the offset map center, converted them to a mapbox Point object, and then used unproject to get that latitude and longitude at that location.
const point = new mapboxgl.Point(screenX, screenY);
const latLng = map.unproject(point);
I am working Mapbox-gl.js (v0.38.0) Ionic3 & angular4. I want to set the dynamic center point. The latitude and longitude should be set based on the data in the real time data place's latitude and longitude.
If I set static center point hard-coded, when my real time data changes it will show the center as per the new markers. So I want to set the center point dynamically.
I tried the following following link,
mapbox example
I have added the real time data and marker. But how can I set the expected center point?
Actually my requirement:
For eg: if the real time data has multiple markers in New York, by default the center point should be pointed to New york. Next time the data may change to Callifornia, that time it should point to California.
Based on the markers my center point should be set.
The following snippet is inspired from zoom-to-linestring example on mapbox-gl
As #Aravind mentions above, we use map.fitBounds, however, we have to determine the bounds, we have to reduce the array of features to determine the LngLatBounds.
Just make sure you loaded the feature data.
Example
let features = [feature, feature] // ... array of features
// first coordinate in features
let co = features[0].geometry.coordinates;
// we want to determine the bounds for the features data
let bounds = features.reduce((bounds, feature) => {
return bounds.extend(feature.geometry.coordinates);
}, new mapboxgl.LngLatBounds(co[0].lng, co[0].lat));
// set bounds according to features
map.fitBounds(bounds, {
padding: 50,
maxZoom: 14.15,
duration: 2000
});
You can use the built-in GeolocateControl to find the location of the user and move the center of the map to that location, Check out this example.
You can use the watchPosition option to enable the tracking of the user's location.
MapBox is actively working to improve the location tracking part. You will have better control over this in the next version, Check out this link.
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.
I'm using leaflet.draw, and when a rectangle is created, i'm fetching rectangle's data using layer.toGeoJSON(), and then i save it into a db using ajax.
After that, when the user display the map again, i'm loading previously saved data, and push them into the featureGroup reserved for leaflet.draw using L.GeoJSON.geometryToLayer()
Problem is that my previously created rectangle is now a real polygon for leaflet.draw.
"Rectangle" does not exist in geoJson specs, so i can understand that.
Now, in "properties" of the geojson, i know that the previous shape was a rectangle, with the "type" attribut.
My question is : is there a way to force a shape to be a rectangle in a leaflet.draw point of view ?
Thanks in advance !
I ran into this same problem and have come up with a solutions which works for me although it isn't the most elegant method.
Using leaflet.draw I receive a new layer on which I call layer.toGeoJSON() to save the rectangle to my database. On refresh of the page I'm pulling that GeoJSON representation back from my database and storing it with:
var geojson = JSON.parse(geojson_string);
What I tried first was to build my own Rectangle from the points and add it to drawnItems.
var bounds = L.latLngBounds(geojson.geometry.coordinates);
var rect = L.rectangle(bounds);
drawnItems.addLayer(rect);
This code did not throw an error, but it also didn't show a rectangle on the map. After further investigation I found the coordinate pairs output from layer.toGeoJSON() and the coordinate pairs needed by L.latLngBounds() were reversed (i.e. one was [lat, lng] and the other was [lng, lat]) which caused the Rectangle to be created but in entirely the wrong location. To get around this I constructed the layer first as a GeoJSON layer which results in a polygon, but then use that representation's bounds to construct my Rectangle.
var geojson_layer = L.GeoJSON.geometryToLayer(geojson);
var rect = L.rectangle(geojson_layer.getBounds());
drawnItems.addLayer(rect);
This successfully creates a Rectangle which leaflet.draw recognizes and allows for the edit tools to work correctly.
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);" />'})});"