Develop Reference

How to render a map with bounds which are saved on zoomend function in leaflet

I have to save the Zoom level of the Map. In zoom end function of Map I saved it in a local storage and while again the component is rendered, I tried to check whether any zoom value is preserved or not. Based on it I tried to render the Map.Everythings works fine but I need to save the location also so I tried to get the bounds and do the same as in Zoom level.It's not working I tried to apply fitBounds if there is any value in local storage. Please help me to solve this issue.
initializeMap = () => {
const { user } = this.props;
const zoomLevel = localStorage.getItem('itemsZoom');
let boundCoordinates = {};
boundCoordinates = JSON.parse(localStorage.getItem('itemsBounds'));
if (zoomLevel !== null && Object.keys(boundCoordinates).length > 0) {
this.map.fitbounds(boundCoordinates);
}
this.map.fitbounds(boundCoordinates);
this.map = L.map('map', {
center: [38.778, -73.554]
zoom: zoomLevel !== null ? zoomLevel : 18
});
L.gridLayer.googleMutant({ type: 'satellite', maxZoom: 20 }).addTo(this.map);
this.map.on(L.Draw.Event.CREATED, (e) => {
this.onMarkerCreated(e);
});
this.map.on('draw:editmove', (e) => {
this.onMarkerEdited(e);
});
this.map.on('zoomend', (e) => {
const zoom = this.map.getZoom();
localStorage.setItem('itemsZoom', zoom);
const bounds = this.map.getBounds();
localStorage.setItem('itemsBounds', JSON.stringify(bounds));
});
}

use this to save the bounds localStorage.setItem('itemsBounds',this.map.getBounds().toBBoxString())) and then when you read out call:
[west, south, east, north] = localStorage.getItem('itemsBounds').split(',').map(parseFloat)
var bounds = new L.LatLngBounds(new L.LatLng(south, west), new L.LatLng(north, east))
this.map.fitBounds(bounds);
PS: fitBounds with "B"

Open Layer 3 Animation

i want to animate a marker in Ol3. I used this example from Ol.
The Animation works but with a little bug an i dont know how to fix it.
//main animating loop
var moveFeature = function(event) {
var vectorContext = event.vectorContext;
var frameState = event.frameState;
if (animating) {
var elapsedTime = frameState.time - now;
var now1 = new Date().getTime();
if((now1 - lastTime) > 100){
// stop if end reached
if(curIndex >= coordinates.length){
stopAnimation(true);
requestData(true);
// console.log(" end ");
return;
}
var newPoint = coordinates[curIndex];
var lastP = newPoint;
if(curIndex>=1)
lastP = coordinates[curIndex-1];
if(newPoint !== null & typeof newPoint != " undefined "){
curPoint = ol.proj.fromLonLat(newPoint);
lastCourse = course;
// calculate azimuth between two coordinates
course = calcBearing(lastP,newPoint);
lastTime = now1;
}
curIndex++;
lastTime = now1;
}
//every time render marker position ?? needed ? or only when new one
geoMarker.getGeometry().setCoordinates(curPoint);
//styles.geoMarker.getImage().setRotation(course); //rotates the feature
debugger;
lastCourse = course;
vectorContext.drawFeature(geoMarker, styles.geoMarker);
// do we need follow the bus due to rendering out of current extend =
calcExtend();
}
// tell OL3 to continue the postcompose animation
map.render();
};
I draw the new pos of the marger with vectorContext.drawFeature(geoMarker, styles.geoMarker);
Every time the new position is plotted the vectorlayer is new generated. I dont know why.
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [geoMarker]
//features: [pointFeature]
}),
style: function(feature) {
// hide geoMarker if animation is active
if (animating && feature.get('type') === 'geoMarker') {
// TODOBug
return styles[feature.get('type')];
}
return styles[feature.get('type')];
}
});
With this example above i get the following problem on the map. If the map is clicked, the marker duplicates, one marker stays at the old position and the other one is moving forwoard. Thats a problem.
When i change the code of the vectorlayer like this.
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [geoMarker]
//features: [pointFeature]
}),
style: function(feature) {
// hide geoMarker if animation is active
if (animating && feature.get('type') === 'geoMarker') {
debugger;
console.log("return null")
// TODOBug
return null;
}
return styles[feature.get('type')];
}
});
The problem with the duplicate marker is solved but then the marker isnt clickable while the animation is in progess.
The Question is: How can i achieve that the marker doesen´t duplicates and is clickable while animating???

Leaflet: layer.getLatLng not working with .eachLayer function

I'm trying to do something very similar to what Chris Essig did here. Because I need to know how much datapoints there are in a radius of 20 meters from where the user has put down the 'trashMarker'.
So far I've got this code:
// Create the FeatureGroup and add it to the map
var jsonGroup = new L.FeatureGroup();
mapOverview.addLayer(jsonGroup)
//Retrieve all data and add to map
$.each(datalistObject['idlist'], function(key, value) {
$.getJSON('http://mydata.com' + value['id'], function(data) {
textbox = value['name'];
var dataid = L.geoJson([data], {
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: value['icon']
});
}
}).addTo(jsonGroup);
},function(xhr) { console.error(xhr); });
});
//Code to find the markers within a 20 meter radius of trashMarker
function markersInRadius() {
// Lat, long of trash marker on overview map
var trashMarkerLat_long = trashMarkerOverview.getLatLng();
// counter of the amount of markers that are within a 20 meter radius
var counter_markers_in_radius = 0;
console.log(jsonGroup);
// Loop through each point in JSON file
jsonGroup.eachLayer(function (layer) {
// Lat, long of current point
layerLatLong = layer.getLatLng();
// Distance from our circle marker
// To current point in meters
distance_from_layer_circle = layerLatLong.distanceTo(trashMarker_lat_long);
// See if meters is within raduis
// The user has selected
if (distance_from_layer_circle <= 20) {
counter_markers_in_radius += 1;
};
console.log(counter_markers_in_radius);
});
// Close pointsInCircle
};
When I run this code, I get the error saying layer.getLatLng is not a function.
After doing a console.log on the jsonGroup FeatureGroup, I found out that the group has two objects in it's layers tab without any latlng information, but instead a layers tab of its own, containing all the datapoints with
latlng info... Maybe this is where the problem is?

Managed to fix it by running the eachLayer function twice on the jsonGroup variable like so:
function markersInRadius() {
// Lat, long of trash marker on overview map
var trashMarkerLatLng = trashMarkerOverview.getLatLng();
// counter of the amount of markers that are within a 20 meter radius
var pointsInRadius = 0;
console.log(jsonGroup);
// Loop through each point in JSON file
jsonGroup.eachLayer(function (layer) {
layer.eachLayer(function (layer) {
// Lat, long of current point
layerLatLong = layer.getLatLng();
// Distance from trashMarker
// To current point in meters
distanceFromTrashMarker = layerLatLong.distanceTo(trashMarkerLatLng);
// See if meters is within radius
if (distanceFromTrashMarker <= 20) {
pointsInRadius += 1;
};
});
});
console.log(pointsInRadius);
// Close pointsInCircle
};

Update marker position on google map without page load

I'm trying to update the google map marker position in every 20 seconds which comes from database but it's doesn't work.
Code :
for (i = 0; i < purple.length; i++) {
if (purple[i][1] == latitude && purple[i][2] == longitude) {
nogreen = 1;
}
marker = new google.maps.Marker({
position : new google.maps.LatLng(purple[i][1], purple[i][2]),
map : map,
title : purple[i][0],
data : purple[i][0],
zoom : maxZoomService,
icon : 'img/purple.png',
shadow : 'img/purple.png'
});
setInterval(function () {
position : new google.maps.LatLng(purple[i][1], purple[i][2]),
marker.setPosition(position);
}, 20000);
};
Is this correct or how can i do that ?

This code here isn't valid javascript:
setInterval(function() {
position: new google.maps.LatLng(purple[i][1], purple[i][2]),
marker.setPosition(position);
}, 20000);
You want to do:
setInterval(function() {
position = new google.maps.LatLng(purple[i][1], purple[i][2]);
marker.setPosition(position);
}, 20000);

Show a moving marker on the map

I am trying to make a marker move(not disappear and appear again) on the map as a vehicle moves on the road.
I have two values of latLng and I want to move the marker between the two till the next point is sent by the vehicle. And then repeat the process again.
What I tried:[This is not a very efficient way, I know]
My thought was to implement the above using the technique in points below:
1) Draw a line between the two.
2) Get the latLng of each point on 1/10th fraction of the polyline.
3) Mark the 10 points on the map along with the polyline.
Here is my Code:
var isOpen = false;
var deviceID;
var accountID;
var displayNameOfVehicle;
var maps = {};
var lt_markers = {};
var lt_polyLine = {};
function drawMap(jsonData, mapObj, device, deleteMarker) {
var oldposition = null;
var oldimage = null;
var arrayOflatLng = [];
var lat = jsonData[0].latitude;
var lng = jsonData[0].longitude;
//alert(jsonData[0].imagePath);
var myLatLng = new google.maps.LatLng(lat, lng);
if (deleteMarker == true) {
if (lt_markers["marker" + device] != null) {
oldimage = lt_markers["marker" + device].getIcon().url;
oldposition = lt_markers["marker" + device].getPosition();
lt_markers["marker" + device].setMap(null);
lt_markers["marker" + device] = null;
}
else {
console.log('marker is null');
oldimage = new google.maps.MarkerImage(jsonData[0].imagePath,
null,
null,
new google.maps.Point(5, 17), //(15,27),
new google.maps.Size(30, 30));
oldposition = myLatLng;
}
}
var image = new google.maps.MarkerImage(jsonData[0].imagePath,
null,
null,
new google.maps.Point(5, 17), //(15,27),
new google.maps.Size(30, 30));
lt_markers["marker" + device] = new google.maps.Marker({
position: myLatLng,
icon: image,
title: jsonData[0].address
});
if (oldposition == myLatLng) {
alert('it is same');
lt_markers["marker" + device].setMap(mapObj);
mapObj.panTo(myLatLng);
}
else {
alert('it is not same');
var markMarker = null;
var i = 10;
for (i = 10; i <= 100; i + 10) {
//-------
// setTimeout(function() {
if (markMarker != null) {
markMarker.setMap(null);
markMarker = null;
}
alert('inside the loop');
var intermediatelatlng = mercatorInterpolate(mapObj, oldposition, myLatLng, i / 100);
alert('Intermediate Latlng is :' + intermediatelatlng);
arrayOflatLng.push(intermediatelatlng);
var flightPath = new google.maps.Polyline({
path: arrayOflatLng,
strokeColor: "#FFFFFF",
strokeOpacity: 1.0,
strokeWeight: 1
});
flightPath.setMap(mapObj);
if (i != 100) {
markMarker = new google.maps.Marker({
position: intermediatelatlng,
icon: image,
title: jsonData[0].address,
map: mapObj
});
}
else {
markMarker = new google.maps.Marker({
position: intermediatelatlng,
icon: oldimage,
title: jsonData[0].address,
map: mapObj
});
}
mapObj.panTo(intermediatelatlng);
//--------
// }, 1000);
}
}
}
function mercatorInterpolate(map, latLngFrom, latLngTo, fraction) {
// Get projected points
var projection = map.getProjection();
var pointFrom = projection.fromLatLngToPoint(latLngFrom);
var pointTo = projection.fromLatLngToPoint(latLngTo);
// Adjust for lines that cross the 180 meridian
if (Math.abs(pointTo.x - pointFrom.x) > 128) {
if (pointTo.x > pointFrom.x)
pointTo.x -= 256;
else
pointTo.x += 256;
}
// Calculate point between
var x = pointFrom.x + (pointTo.x - pointFrom.x) * fraction;
var y = pointFrom.y + (pointTo.y - pointFrom.y) * fraction;
var pointBetween = new google.maps.Point(x, y);
// Project back to lat/lng
var latLngBetween = projection.fromPointToLatLng(pointBetween);
return latLngBetween;
}
Problems Faced:
1) The marker is not showing up on the map because the process of plotting and removal of marker is so fast that the marker is not visisble on screen. I've tried setTimeOut, and It does not help at all.
2) if I alow the browser to run this code for more than 5 minutes, the browser crashes.
Note: The Above function is called every 10 seconds using setInterval.
What Can be a better solution? Please Help..

For the marker to move relatively smoothly, you need to
Update more than every 1/10 fraction of the polyline (at least every few pixels)
Call the update method more frequently
Don't delete and re-add the marker
For example, something like:
var counter = 0;
interval = window.setInterval(function() {
counter++;
// just pretend you were doing a real calculation of
// new position along the complex path
var pos = new google.maps.LatLng(35, -110 + counter / 100);
marker.setPosition(pos);
if (counter >= 1000) {
window.clearInterval(interval);
}
}, 10);
I made a simple example at http://jsfiddle.net/bmSbU/2/ which shows a marker moving along a straight path. If this is what you want, most of your code above regarding where along the line you are can be reused (or check out http://broady.github.io/maps-examples/points-along-line/along-directions.html )

You can use marker-animate-unobtrusive library to make markers
smoothly transition from one location to another (instead of reappearing).
You could initialize your marker like that:
var marker = new SlidingMarker({
//your original marker options
});
Just call marker.setPosition() each time new vehicle's coordinate arrive.
P.S. I'm the author of the library.

Why not keep the existing Marker/ MarkerImage and call setPosition() to move it, either on a timer or as the position changes?
Deleting it & recreating it is what causes it to flash/ flicker and eventually crash. If you keep the same instance but just move it, you should do much better.
See: Marker.setPosition()
https://developers.google.com/maps/documentation/javascript/reference#Marker