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
};
Related
I'd like to have my icon change based on the zoom, which I have working! BUT, I also have a setTimeout which runs my function every 7 seconds.
The problem is that every time the function is run, the icon gets set back to the bigBusIcon.
I've tried putting both the marker and the zoomend in functions, but I've had no luck... Any help is much appreciated!
const mapBuses = function () {
//other code is here
L.geoJSON(getGeoJson(routeFilter), {
onEachFeature: function (feature) {
let longitude = feature.coordinates[0];
let latitude = feature.coordinates[1];
let marker = L.marker([latitude, longitude], { icon: bigBusIcon, rotationAngle: feature.bearing })
.bindPopup(
`Bus Route: ${feature.routeNum}<br/>Speed: ${Math.round(feature.speed)} km/hr`
).addTo(busLayer);
// set icon size based on zoom (although it resets every 7 seconds)
map.on('zoomend', function () {
var currentZoom = map.getZoom();
if (currentZoom >= 14) {
marker.setIcon(bigBusIcon);
}
else {
marker.setIcon(smallBusIcon);
}
});
}
});
});
// refresh every 7 seconds
setTimeout(mapBuses, 7000);
};
You can check the current zoom while you are initializing your layer:
const mapBuses = function () {
//other code is here
L.geoJSON(getGeoJson(routeFilter), {
onEachFeature: function (feature) {
let longitude = feature.coordinates[0];
let latitude = feature.coordinates[1];
// get current zoom
let currentZoom = map.getZoom();
// add condition to chose icon
let myIcon = currentZoom > 14 ? bigBusIcon : smallBusIcon;
// use myIcon variable in marker creation
let marker = L.marker([latitude, longitude], { icon: myIcon, rotationAngle: feature.bearing })
.bindPopup(
`Bus Route: ${feature.routeNum}<br/>Speed: ${Math.round(feature.speed)} km/hr`
).addTo(busLayer);
// set icon size based on zoom (although it resets every 7 seconds)
map.on('zoomend', function () {
var currentZoom = map.getZoom();
if (currentZoom >= 14) {
marker.setIcon(bigBusIcon);
}
else {
marker.setIcon(smallBusIcon);
}
});
}
});
});
// refresh every 7 seconds
setTimeout(mapBuses, 7000);
};
I am using the Bing Maps v8 API. I have a map that shows a driving route, and a pushpin of another location. I need to get the map to zoom out to show both the waypoint locations and the pushpin location. Right now, I can get the map to zoom to the waypoints of the pushpin location.
I am not sure how to get both to show on the map zoom. I know that I need to use the LocationRect class.
var searchManager;
var startingPoint = document.getElementById('startPoint').value;
var address = $("#addressLine").val();
var loc;
var patAddLoc;
var waypointLoc;
var pinsLocs = [];
// GET ROUTE BASED ON DIRECTION
function GetMap() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
//BING API KEY VIA AZURE
credentials: 'X',
zoom: 10,
});
// geocode patient address
geocodeQuery(address);
// look for patient address
function geocodeQuery(query) {
//If search manager is not defined, load the search module.
if (!searchManager) {
//Create an instance of the search manager and call the geocodeQuery function again.
Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
searchManager = new Microsoft.Maps.Search.SearchManager(map);
geocodeQuery(query);
});
} else {
var searchRequest = {
where: query,
callback: function (r) {
//Add the first result to the map and zoom into it.
if (r && r.results && r.results.length > 0) {
var pin = new Microsoft.Maps.Pushpin(r.results[0].location);
// get patient address location
patAddLoc = r.results[0].location;
map.entities.push(pin);
// add patient location to pushpin array
pinsLocs.push(patAddLoc);
// view is set with route location
//map.setView({ bounds: r.results[0].bestView });
}
// directions manager
// addWaypoint
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function addWaypoint() {
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// if less than 2 point on the map
if (directionsManager.getAllWaypoints().length < 2) {
directionsManager.clearAll();
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('startPoint').value });
directionsManager.addWaypoint(startWaypoint);
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('endPoint').value });
directionsManager.addWaypoint(endWaypoint);
}
// Insert a waypoint
if (document.getElementById('wayPoints').value !== null) {
var addressList = JSON.parse(document.getElementById('wayPoints').value);
var arrayLength = addressList.length;
// insert waypoints from schedule
for (var i = 0; i < arrayLength; i++) {
//alert(addressList[i]);
var hvaddress = addressList[i];
var newWP = new Microsoft.Maps.Directions.Waypoint({ address: hvaddress });
directionsManager.addWaypoint(newWP, 1);
}
}
// Set the element in which the itinerary will be rendered - set autoupdatemapview to false to override autozoom to route
directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('printoutPanel'), autoUpdateMapView: false });
directionsManager.calculateDirections();
var allWaypoints = directionsManager.getAllWaypoints();
// add way point to pinsLocs array
for (var i = 0; i < allWaypoints.length; i++) {
// returns nulls
alert(allWaypoints);
loc = allWaypoints[i].getLocation();
var showMeLoc = loc;
// showMeLoc = undefined.....?
alert(showMeLoc);
pinsLocs.push(loc);
}
// only the address search location is added to the array, waypoint locations are null
alert(pinsLocs);
//Create a LocationRect from array of locations and set the map view.
map.setView({
bounds: Microsoft.Maps.LocationRect.fromLocations(pinsLocs),
padding: 100 //Add a padding to buffer map to account for pushpin pixel dimensions
});
});
},
errorCallback: function (e) {
//If there is an error, alert the user about it.
alert("No results found.");
}
};
//Make the geocode request.
searchManager.geocode(searchRequest);
}
}
}
UPDATE - HERE is the working code for those who have the same question!
var searchManager;
var startingPoint = document.getElementById('startPoint').value;
var address = $("#addressLine").val();
var patAddLoc;
// GET ROUTE BASED ON DIRECTION
function GetMap() {
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
//BING API KEY VIA AZURE
credentials: 'XXXXX',
zoom: 10,
});
// geocode patient address
geocodeQuery(address);
// look for patient address
function geocodeQuery(query) {
//If search manager is not defined, load the search module.
if (!searchManager) {
//Create an instance of the search manager and call the geocodeQuery function again.
Microsoft.Maps.loadModule('Microsoft.Maps.Search', function () {
searchManager = new Microsoft.Maps.Search.SearchManager(map);
geocodeQuery(query);
});
} else {
var searchRequest = {
where: query,
callback: function (r) {
//Add the first result to the map and zoom into it.
if (r && r.results && r.results.length > 0) {
locs = [];
var pin = new Microsoft.Maps.Pushpin(r.results[0].location);
// get patient address location
patAddLoc = r.results[0].location;
map.entities.push(pin);
// add patient location to pushpin array
locs.push(r.results[0].location);
// view is set with route location
//map.setView({ bounds: r.results[0].bestView });
}
// directions manager
// addWaypoint
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function addWaypoint() {
var directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
// if less than 2 point on the map
if (directionsManager.getAllWaypoints().length < 2) {
directionsManager.clearAll();
var startWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('startPoint').value });
directionsManager.addWaypoint(startWaypoint);
var endWaypoint = new Microsoft.Maps.Directions.Waypoint({ address: document.getElementById('endPoint').value });
directionsManager.addWaypoint(endWaypoint);
}
// Insert a waypoint
if (document.getElementById('wayPoints').value !== null) {
var addressList = JSON.parse(document.getElementById('wayPoints').value);
var arrayLength = addressList.length;
// insert waypoints from schedule
for (var i = 0; i < arrayLength; i++) {
//alert(addressList[i]);
var hvaddress = addressList[i];
var newWP = new Microsoft.Maps.Directions.Waypoint({ address: hvaddress });
directionsManager.addWaypoint(newWP, 1);
}
}
// Set the element in which the itinerary will be rendered - set autoupdatemapview to false to override autozoom to route
directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('printoutPanel'), autoUpdateMapView: false });
//Add event handlers to directions manager.
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsError', directionsError);
Microsoft.Maps.Events.addHandler(directionsManager, 'directionsUpdated', directionsUpdated);
// Calculate directions, which displays a route on the map
directionsManager.calculateDirections();
// get route boundaries
function directionsUpdated(e) {
//Get the current route index.
var routeIdx = directionsManager.getRequestOptions().routeIndex;
// get northeast bounding box corner
var bBoxNE = e.routeSummary[routeIdx].northEast;
locs.push(bBoxNE);
// get southwest bounding box corner
var bBoxSW = e.routeSummary[routeIdx].southWest;
locs.push(bBoxSW);
//SET MAP VIEW
//Create a LocationRect from array of locations and set the map view.
map.setView({
bounds: Microsoft.Maps.LocationRect.fromLocations(locs),
padding: 50 //Add a padding to buffer map to account for pushpin pixel dimensions
});
}
function directionsError(e) {
alert('Error: ' + e.message + '\r\nResponse Code: ' + e.responseCode)
}
});
},
errorCallback: function (e) {
//If there is an error, alert the user about it.
alert("No results found.");
}
};
//Make the geocode request.
searchManager.geocode(searchRequest);
}
}
}
If I understand correctly, you want a view that the entirety of the route and the extra location are visible?
How about using directionsManager.getCurrentRoute().routePath to get all the locations on the route, and then using LocationRect.fromLocations(), which can take in an array of locations - in your case all locations of above plus the additional one.
Note that calculateDirections and geocode and asynchronous, so you may want to handle the dependency on patAddLoc (e.g. move the directions code into the geocode callback).
Reference:
https://msdn.microsoft.com/en-us/library/mt750375.aspx
https://msdn.microsoft.com/en-us/library/mt750645.aspx
https://msdn.microsoft.com/en-us/library/mt712644.aspx
I have to manage a map of about 80.000 markers concentrated in France.
To do that, I decided to get the bounds of the viewport and call a dynamic-JSON (with PHP) which contains the markers inside the viewport. And this on the "idle" event.
I faced a problem with this solution. Indeed, the markers which already exist was re-plotted (at the same position), which consequently weigh the map for nothing...
To solve it, the markers list before and after the JSON query are compared (thanks to jQuery), in order to plot only the new markers. And it works!
Now, I would want to remove the markers which are not currently shown on the map. Or a list of markers (I get it thanks to jQuery) designated by an ID which is also the title of the marker. So, how can a delete markers like that ? I specify that I am using MarkerManager.
Otherwise, you guess that if I do not remove these markers, they will be re-plotted in some cases... For example, you are viewing the city A, you move the map to view the city B, and you get back to the city A...
Here is the code:
var map;
var mgr;
var markers = [];
function initialize(){
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(46.679594, 2.109375)
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var mgrOptions = { borderPadding: 50, maxZoom: 15, trackMarkers: false };
mgr = new MarkerManager(map, mgrOptions);
google.maps.event.addListener(map, 'idle', function() {
mapEvent();
});
}
function mapEvent(){
if( map.getZoom() >= 8 ){
var bounds = map.getBounds();
getSupports(bounds.getNorthEast(), bounds.getSouthWest());
} else {
// Todo
}
}
var markerslistID = new Array();
var markerslistData = {};
function getSupports(ne, sw){
newMarkerslistID = new Array();
newMarkerslistData = {};
// Getting the markers of the current view
$.getJSON('./markerslist.php?nelat='+ne.lat()+'&nelng='+ne.lng()+'&swlat='+sw.lat()+'&swlng='+sw.lng(), function(data) {
for (var i = 0; i < data.points.length; i++) {
var val = data.points[i];
newMarkerslistID.push(val.id);
newMarkerslistData[val.id] = new Array(val.lat, val.lng, val.icon);
}
// List of New Markers TO PLOT
var diffNewMarkers = $(newMarkerslistID).not(markerslistID).get();
// List of Old markers TO REMOVE
var diffOldMarkers = $(markerslistID).not(newMarkerslistID).get();
// Plotting the NEW MARKERS
for( var i = 0; i < diffNewMarkers.length; i++ ){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(newMarkerslistData[diffNewMarkers[i]][0], newMarkerslistData[diffNewMarkers[i]][1]),
title : diffNewMarkers[i],
icon : './images/'+newMarkerslistData[diffNewMarkers[i]][2]+'.png'
});
mgr.addMarker(marker, 0);
}
/*****************************************
HERE WE HAVE TO REMOVE
THE MARKERS CONTAINED IN diffOldMarkers
*****************************************/
mgr.refresh();
// Switching the new list to the old, for the next event
markerslistID = newMarkerslistID;
markerslistData = newMarkerslistData;
});
}
Thank you for your help.
A one-liner to hide all markers that ar not in the current viewport.
!map.getBounds().contains(marker.getPosition()) && marker.setVisible(false);
Or,
if (map.getBounds().contains(marker.getPosition()) && !marker.getVisible()) {
marker.setVisible(true);
}
else if (!map.getBounds().contains(marker.getPosition()) && marker.getVisible()) {
marker.setVisible(false);
}
I have a problem when constructing a polygon. The error message says something like:
Invalid value for constructor parameter 0: (49.27862248020283, -122.79301448410035),(49.277964542440955, -122.79370112960816),(49.278524490028595, -122.7950207764435)
It must be something ridiculously simple, but I just can't see it. Any tips you have are useful.
I'm basically painting a map inside an iframe on a modal window (with wicket). Everything is ok, but when I'm trying show a polygon (the points are loaded from a database and sent by webservice) I get the error message.
iframe code: (only the relevant)
/**
* Draws the polygon.
*/
function drawPolygon() {
if (order >= 3) {
deleteMarkers();
// Construct the polygon
// Note that we don't specify an array or arrays, but instead just
// a simple array of LatLngs in the paths property
polygonObject = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});
polygonObject.setMap(map);
isPolygonDrawed = true;
//After we create the polygon send the points to wicket
parent.sendPoints();
//Change the message on the top label
controlText.style.color = '#ADAAAA';
controlText.innerHTML = polygonCreated;
//With this we make sure no other markers are created after the polygon is drawed.
//Is assigned (order - 1) because when this code is called the order has already been added 1.
MAX_POLYGON_VERTEX = order - 1;
//Disable the create polygon button.
enable = false;
createControlText.style.color = '#ADAAAA';
}
else alert(alertMessage);
}
Now the code on the parent (the modal window)
/**
* Show the polygon on map.
*/
function showPolygon(zoneId) {
var url = applicationRootUrl + 'zonePointsOnMap?zoneId=' + zoneId;
$.getJSON(url, function(data) {
if(data.length == 0) {
return false;
}
frames['zoneMapIFrame'].order = parseInt(data.length);
alert(data.length);
$.each(data, function(i, item) {
if(item != null) {
if(item.latitude != null && item.longitude != null) {
var lat = parseFloat(item.latitude);
var lng = parseFloat(item.longitude);
var latlng = new google.maps.LatLng(lat, lng);
var pointOrder = item.order;
frames['zoneMapIFrame'].polygonCoords[pointOrder] = latlng;
alert(item.order + " point " + latlng);
frames['zoneMapIFrame'].bounds.extend(latlng);
}
}
});
});
setTimeout("frames['zoneMapIFrame'].drawPolygon()", 200);
setTimeout("frames['zoneMapIFrame'].fitMapZoomPolygon()", 300);
}
I can see that the points are loaded ok with alerts, but I keep getting the error message.
Help me!
I was having the same problem.
Don't know if its the best solution, probably not, but it worked for me.
The problem was that the Latlng weren't being recognized. So I recreated the array.
var lats = [];
var lat_size = steps[step].lat_lngs.length;
for (var t=0; t <lat_size; t++) {
lats.push(new google.maps.LatLng(steps[step].lat_lngs[t].lat(), steps[step].lat_lngs[t].lng()))
}
var polylineOptions = {
map: map,
path: lats
}
new google.maps.Polyline(polylineOptions);
I have written a small application for a handheld device using JavaScript and Google Maps API's, now II need to move my marker icon anywhere on the map along a route using a timer function. I have a man icon and I need to move it automatically on the map. How can I do this?
A pretty cool example is here:
http://www.kmcgraphics.com/google/
Unfortunately, there is no automatic-marker-movement function in the official GMaps collection.
However, if you have a GRoute, that would mean you have a set of points. To loop through the route steps, you could use something like this:
for (var c = 0; c < yourroute.getNumSteps(); c++) {
yourmarker.setLatLng(yourroute.getStep(c).getLatLng());
}
Of course, you'll probably want to do this asynchronously using the timers:
function moveToStep(yourmarker,yourroute,c) {
if {yourroute.getNumSteps() > c) {
yourmarker.setLatLng(yourroute.getStep(c).getLatLng());
window.setTimeout(function(){
moveToStep(yourmarker,yourroute,c+1);
},500);
}
}
moveToStep(marker,route,0);
For even smoother movement, you could interpolate the points from those you already have.
Here is my solution that works with the v3 API. This animates the marker not with a fixed velocity, but based on the calculated route duration. There is a speed factor, so for example you can drive through the route 10x faster than in reality.
I've tried to do it as simple as possible. Feel free to use it.
var autoDriveSteps = new Array();
var speedFactor = 10; // 10x faster animated drive
function setAnimatedRoute(origin, destination, map) {
// init routing services
var directionsService = new google.maps.DirectionsService;
var directionsRenderer = new google.maps.DirectionsRenderer({
map: map
});
//calculate route
directionsService.route({
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
},
function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
// display the route
directionsRenderer.setDirections(response);
// calculate positions for the animation steps
// the result is an array of LatLng, stored in autoDriveSteps
autoDriveSteps = new Array();
var remainingSeconds = 0;
var leg = response.routes[0].legs[0]; // supporting single route, single legs currently
leg.steps.forEach(function(step) {
var stepSeconds = step.duration.value;
var nextStopSeconds = speedFactor - remainingSeconds;
while (nextStopSeconds <= stepSeconds) {
var nextStopLatLng = getPointBetween(step.start_location, step.end_location, nextStopSeconds / stepSeconds);
autoDriveSteps.push(nextStopLatLng);
nextStopSeconds += speedFactor;
}
remainingSeconds = stepSeconds + speedFactor - nextStopSeconds;
});
if (remainingSeconds > 0) {
autoDriveSteps.push(leg.end_location);
}
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
// helper method to calculate a point between A and B at some ratio
function getPointBetween(a, b, ratio) {
return new google.maps.LatLng(a.lat() + (b.lat() - a.lat()) * ratio, a.lng() + (b.lng() - a.lng()) * ratio);
}
// start the route simulation
function startRouteAnimation(marker) {
var autoDriveTimer = setInterval(function () {
// stop the timer if the route is finished
if (autoDriveSteps.length === 0) {
clearInterval(autoDriveTimer);
} else {
// move marker to the next position (always the first in the array)
marker.setPosition(autoDriveSteps[0]);
// remove the processed position
autoDriveSteps.shift();
}
},
1000);
}
Usage:
setAnimatedRoute("source address or LatLng ...", "destination address or LatLng ...", map);
// start simulation on button click...
$("#simulateRouteButton").click(function() {
startRouteAnimation(agentMarker);
});