I want to be able to show movement in a google maps just like in this example
http://www.labnol.org/internet/live-flight-tracking-google-maps/12308/
I am starting, and followed an example to load markers from mysql and put them in a map. But this is all static. If I keep track of a moving object in my database, how can I display them in real time?
Thank you
Assuming marker is your Marker instance, you should use some Ajax call to get new coordinates, depending how you return them, lets say your script will return an Object of lat and long and assign it to variable new_location. Now you need to change marker position to new coordinates:
function change_pos(new_location) {
var LatLong = new google.maps.LatLng(new_location.lat, new_location.long);
marker.setPosition(LatLong);
}
Just call this function everytime you got replay from Ajax.
And thats it.
Related
I have a GraphQL query from Apollo + React that I am using on a map component where the parameters are "latitude" and "longitude". The variables are provided by the map's center point and I am trying to get it to update the query as the center point or zoom level is changed but can't find a "simple" way to do this - maybe I am overthinking things.
Is there a way to simply say, here's some new variables, refetch me new data? The only approach I have seen so far is related to mutations but this seems like it is used more for inserting new values. Any ideas or suggestions would be great! Thanks!
Your description sounds quite confused.
If I understand correctly, you would like to send a new GraphQL query whenever the map view (center and/or zoom level) changes.
In that case, you would simply listen to the Leaflet map's 'moveend' and 'zoomend' events and re-send your query based on the new map center and zoom (I would say that view port bounds would probably be more appropriate).
I'm building out a map app that pulls in tiles via an ImgTileProvider. I would like to know when the tiles have been correctly loaded, but the only method exposed by the ImgTileProvider.Options is the getUrl function, which helps me know where to get an image tile, not when it returns.
Is there an event that is fired after each tile/all tiles has/have been created/rendered to the page? I noticed that there was an addListener function available for ImgTileProvider instances, which I would subscribe to if I knew which event was being fired on image create.
So, as I was writing this question, a thought occurred: why not check the source? Using Chrome, I prettified the map-render-display.js file and looked for events added via the addListener function. I didn't see anything for ImgTileProvider, but I found several other providers subscribing to a response event. So I added an event listener on my ImgTileProvider instance and it worked! Below is a sample of working code.
// A magic number representing the total number of tiles in the map.
var magicNumber = 22;
// Returns a new ImgTileProvider.
tileProvider = self.imgTileProvider();
tileProvider.addListener("response", function () {
magicNumber--;
if (magicNumber === 0) {
console.log("All tiles loaded");
}
});
I'm using the basic initialize function from the Google Maps Developer pages. I'm a little new to using maps but I'm managed to achieve what I want from reading the developer site. What I can't find though is a way to call a function once initialize has LOADED the map. For example, I want to update directions based on values in pre-filled forms
I tried something like this...
google.maps.event.addDomListener(window, 'load', function() {
initialize();
updateDirections();
});
Initialize loads the map, updateDirections is the function I want to call to put in directions and some other little things to do with my webpage, but my guess is that maps needs a little time to load, then I should call updateDirections().
How is the best way to do this? I would have thought a callback or onsucess parameter in map options would have been available.
Anyway I think what I'm trying to do is really straight forward but maybe I'm wrong, or maybe it is and I'm just searching for the wrong things. I'm sure it's been answered previously, but I can't seem to find anything that simply does what I'm trying to do.
Thanks
Bizt
Inside your initialize() function, after you create the map and have a reference to it in a variable called map, add an event listener for the idle event:
google.maps.event.addListenerOnce( map, 'idle', function() {
updateDirections();
});
If the only thing you need to do there is call your updateDirections() function, you could just use it directly as the idle callback:
google.maps.event.addListenerOnce( map, 'idle', updateDirections );
Note the use of addListenerOnce() instead of addListener(), so this event listener is only called the first time the event fires. If you used addListener() it would fire every time the map is panned or zoomed.
I need to get markers, overlays and etc, that were loaded from KML, but i don't understand how.
Here https://groups.google.com/forum/?fromgroups=#!topic/umapper/YCfHEWaCxMc is written that i can loop through KMLayer. but i can't!
I loading KML that way:
var nyLayer = new google.maps.KmlLayer("http://www.searcharoo.net/SearchKml/newyork.kml", { suppressInfoWindows: true, map: map });
Then i don't see anyway to find what objects inside. I tried to look in debugger what nyLayer contain inside, but nothing like objects array. Also tried this:
var test = nyLayer[0];
But test is undefined
You can't access the Placemarks in a KmlLayer other than by using a click listener.
You can access them if you use a third party parser like geoxml3 or geoxml-v3, but then you lose the advantage of the KmlLayer's tile based rendering, so you will see performance degradation for large numbers of objects.
Example which creates a dynamic sidebar using geoxml3
I am trying to render a whole heap of vectors in the google earth plugin. I use the parseKml method to create my Kml Feature object and store it in an array. The code looks something like below. I loop over a list of 10,000 kml objects that I return from a database and draw it in the plugin.
// 'currentKml' is a kml string returned from my DB.
// I iterate over 10,000 of these
currentKmlObject = ge.parseKml(currentKml);
currentKmlObject.setStyleSelector(gex.dom.buildStyle({
line: { width: 8, color: '7fff0000' }
}));
ge.getFeatures().appendChild(currentKmlObject);
// After this, I store teh currentKml object in an array so
// I can manipulate the individual features.
This seems to work fine. But when I want to turn the visibility of all these features on or off at once, I have to iterate over all of these kml objects in my array and set their individual visibilities on or off. This is a bit slow. If I am zoomed out, I can slowly see each of the lines disappearing and it takes about 5 - 10 seconds for all of them to disappear or come back.
I was wondering if I could speed up this process by adding a layer and adding all my objects as children of this layer. This way I set the visibility of the whole layer on or off.
I have been unable to find out how to create a new layer in code though. If someone can point the appropriate methods, it would be great. I am not sure if a layer is the right approach to speed up the process either. If you also have any other suggestions on how I can speed up the process of turning on/off all these objects in the map at once, that would be very helpful as well.
Thanks in advance for you help.
Ok, found out how to do this by myself.
In the google earth extensions libarary I use the 'buildFolder' method.
var folder = gex.dom.buildFolder({ name: folderName });
ge.getFeatures().appendChild(folder);
Now, when I iterate over my object array, I add them to the folder instead using the following
folder.getFeatures().appendChild(currentKmlObject);
This way, later on I can turn the visibility on and off at the folder level using
folder.setVisibility(false); // or true
And this works quite well as well. IThere is no delay, I can see all the objects turning on and off at once. It is quite quick and performant.