Let me first explain what i am trying to do:
Every 30 seconds i get array of gps points(lat, long). These points represent a route along which i must move a maker, i'm trying to do it simply by moving a marker from point1 to point2 , then from point2 to point3 and so on. And then when i receive a new array of points i start doing this again. It is guaranteed that the last point of previous array and the first point of current array are the same. This means that routes are connected and each route is a part of one Big Route, which is divided into smaller routes and these smaller routes are sent to me in an order. (If last sentence was too difficult to understand please ignore it, it's not necessary to understand it).
How i implement it
As a marker i use Leaflet's plugin Leaflet Moving Markers
Here as a code: (it's not full, i wrote it as close to my code and as brief as it is possible)
var api = // setting api here..
var marker = L.Marker.movingMarker(
[[0,0],[0,0]],
[0],
{ icon: icons.chosen });
var myPlugin = function(api, marker) {
this._api = api;
this._marker = api;
var that = this.
this._api.on('receive', function(points) { // receiving points here
that.moveMarker(points, 2000);
});
}
myPlugin.prototype.moveMarker = function(points, interval) {
this._marker.initialize(points, interval);
this._marker.start();
}
MyPlugin = new myPlugin(api,marker);
And finally my problem
What happens each time we receive points:
Marker moves as it is supposed to move(from point1 to point2, from point2 to point3 and so on to the last point. Then we wait to receive new points)
We recieved new points.(Cool!). Marker moves correctly, in a correct order, but when it reaches the last point it for some (unclear to me) reasons moves to the first point again and starts moving from point1 to point2, from point2 to point3 and so on. It does a laps. But only twice!
Okay, we received points again and our marker again does laps, 3 laps this time.
We received points again, and our marker does 4 laps...
...And when we receive points for twentieth time our marker does 20 laps. Why?
Thanks for spending your valuable time on reading this and helping me!
Related
I'm new with Google API, I want to change Google Marker position automatically on google map and it's auto-change position on map after five seconds. I didn't have DB for latitude and longitude.
I mean to say marker change its position randomly on the map.
Disclaimer: You can achieve this using vanilla Javascript.
Since you do not have a database, you could use an array of LatLng class to specify the coordinates that you want to be displayed:
//an array of geographical coordinates
var locations = [
new google.maps.LatLng(6.528166, 20.439864), //somewhere in Africa
new google.maps.LatLng(34.494890, 103.854720), //somewhere in China
new google.maps.LatLng(51.802090, 7.771800), // somewhere in Germany
new google.maps.LatLng(46.153450, -101.948783), // somewhere in US
new google.maps.LatLng(-11.495951, -49.266451), // somewhere in Brazil
new google.maps.LatLng(-80.287421, 23.599101) // somewhere in Antartica
];
After that, you can use the setInterval() function which will contain the code that randomizes the items on the array of geographical coordinates and changes the map and marker's position.
// set interval that will repeat every after 5 seconds
setInterval(function() {
// pick random coordinates from the locations array
var randomLocation = locations[Math.floor(Math.random() * locations.length)];
// change the map center
map.setCenter(randomLocation);
// change the marker position
marker.setPosition(randomLocation);
}, 5000);
Please find the working sample here.
I hope this helps!
I can't seem to find a way to get the latitude and longitude from existing markers in MapQuest.
I currently set my directions map using:
var map = L.mapquest.map('map', {
center: [selfLatitude, selfLongitude],
layers: L.mapquest.tileLayer('map'),
zoom: 13
});
L.mapquest.directions().route({
start: [selfLatitude, selfLongitude],
end: [otherLatitude, otherLongitude]
});
This produces a Map with the two points and the direction between them.
I am able to move the end point on the map but want to capture the modified latitude and longitude.
What is the proper way to target and get the coordinates from individual markers in a MapQuest Map using the mapquest.js javascript library?
I thought this would be an easy solution, but I could not find anything easily in their documentation. I tried picking apart their examples and looking everywhere for bit of information. After assuming this would work, but didn't because getLatLng() is not a function:
popup.on('dragend', function(event) {
var marker = event.target;
var position = marker.getLatLng().wrap();
showLL(position, 'USER_DEFINED');
});
At some point I decided to stop looking at the doc's they provided and tried to look at their Lat/Long finder example and look further into the event.target object that was returned and tried to find anything related to the lat and long.
I know you asked for a "proper" way, but I honestly couldn't find one and thought I should share anyways.
The below is def not an official way to do this, but I believe it works. For some reason the moveend event is fired whether the start or end is moved, but I only log the end lat/long anyways.
I noticed that marker._layers[prop].locationIndex was mixed in the layers obj and 0 seems to correlate to the start marker and 1 seemed to point to the end marker.
Here's what I came up with:
let latLng1 = new L.LatLng(35.6009, -82.554);
let latLng2 = new L.LatLng(35.7796, -78.6382);
let map = L.mapquest.map('map', {
center: latLng1,
layers: L.mapquest.tileLayer('map'),
zoom: 13
});
let directions = L.mapquest.directions();
directions.route({
start: latLng1,
end: latLng2
});
map.on('moveend', function(event) {
let marker = event.target;
for (let prop in marker._layers) {
if (!marker._layers.hasOwnProperty(prop)) continue;
// locationIndex- I am assuming 0 for start marker and 1 for end marker.
if (marker._layers[prop].locationIndex === 1) {
let latLong = marker._layers[prop]._latlng;
console.log(latLong)
}
}
});
}
I have a google map application where i am moving markers on a polyline. I am generating a new destination point(latlng coordinates). I would like to extend the polyline to this new destination point.
Can some one tell me how i can move the end point of a polyline to another point on the map.
I have used polyline[index].getPath() in here i can see all the latlng coordinate pairs that make up the route. How to add to this route to make it longer or shorter?
Simple. If you merely wanted to add an additional point to the existing array of points, this works:
var currentPath = polyline[index].getPath();
var newPoint = new google.maps.LatLng(40.781321,-73.965855);
currentPath.push(newPoint);
polyline[index].setPath(currentPath);
If you wanted however to change where the current last point is at, try this instead:
var currentPath = polyline[index].getPath();
var newPoint = new google.maps.LatLng(40.781321,-73.965855);
currentPath.setAt(currentPath.getLength()-1, newPoint);
polyline[index].setPath(currentPath);
I'm working on a pathcreator with osm. Adding lines works fine, but when one makes a very long line and zooms in on it, the line disappears at a high zoom level. It seems that this appears if the viewport is to far away from the start and/or end point of the line. Maybe splitting the line could help, but which is the max size for this?
here is a minified code sample, if you zoom in to level 7 the line is gone:
$(document).ready(function() {
var map = new OpenLayers.Map('map');
var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(mapnik);
var path = new OpenLayers.Layer.Vector("path");
map.addLayer(path);
var pathStyle = {
strokeColor: "#0033ff",
strokeOpacity: 0.7,
strokeWidth: 5
};
var points = new Array(
new OpenLayers.Geometry.Point(-7856503.5146562, 880554.5664875),
new OpenLayers.Geometry.Point(8502243.5278938, 724011.5325875)
);
var line = new OpenLayers.Geometry.LineString(points);
var lineFeature = new OpenLayers.Feature.Vector(line, null, pathStyle);
path.addFeatures([lineFeature]);
map.zoomToExtent(path.getDataExtent());
});
i'm quite new to osm so maybe im just messing up something.. Any ideas? Thanks in advance
I was playing around with firebug and going through the svg elements. It turned out that osm uses svg polyline for making lines. The values of the line are running out of space with values over 15000 which is to much for there renderer.
I checked in a bug report on this issue:
https://github.com/openlayers/openlayers/issues/617
My current workaround is to split the line into 100 km peaces. This works but takes more calculations.
if someone is intressted here is a site with helpful math:
http://www.movable-type.co.uk/scripts/latlong.html
I develop a simple Google Maps application. I need just to place one marker on the map. For whatever reason, the marker is placed outside of the visible area of the map. It's a little bit strange, because the map is centered to the marker's coordinates. Here is the code:
var point1 = new GLatLng(location1.lat,location1.lon);
map1.setCenter(point1, 15);
var marker1 = new GMarker(point1);
map1.addOverlay(marker1);
map1.setCenter(point1);
When we drag the map a little bit, we can see the marker. What do I need is to center the map in the way the marker will be visible without map dragging.
Can anyone help me?
I believe the GLatLng object would accept String arguments as well - but to be safe I would ensure that they are integers - try using:
new GLatLng(parseInt(location.lat), parseInt(location.lon));
I also noticed you call map.setCenter a second time which ought to not be necessary.
Using the following code really ought to do it
map=new GMap(document.getElementById("map"));
var point = new GLatLng(parseInt(location.lat), parseInt(location.lon));
map.setCenter(point,5);
var marker = new GMarker(point);
map.addOverlay(marker);
If you still are having issues I would check that "location" object to make sure the .lat and .lon values are being populated correctly.
Check this code out:
var map = new GMap(document.getElementById("map"));
/* -- snip -- */
map.centerAndZoom(new GPoint(-1.2736, 53.0705), 8);
From a website I made a while ago. Feel free to check the source:
http://www.primrose-house.co.uk/localattractions
Just click the link in the top right to switch to the map view.