I try to draw a very large dataset on google map (2500+ rectangles). The rendering of the rectangles take more than 5 secs. The whole page just stuck for the 5 secs, so I am thinking about adding a loading indicator or progress bar during the rendering.
To do this, I need to trap events of rending (start,finish rendering).
I checked the google maps Api documentation, did not find anything useful. Just what to know whether there is some work around or something I miss in the api doc that can help me to trap rendering events.
As of Google Maps v3.14 the answer is no. There's no such event to listen for in the API. If you dug through the code long enough you might be able to find a hack, but given that you're in control of the rectangles you're drawing and you have a count of them, why not iterate the progress bar as you add them? Individually they will render very quickly so whether you iterate the progress before or after each is added to the map should make no difference to the user, despite the fact that it feels like the wrong order to the developer.
This gives an overview of all the events in GMapsV3 http://gmaps-samples-v3.googlecode.com/svn/trunk/map_events/map_events.html
Check if the events you need are there.
Related
Background
I'm writing a browser extension which paints over the map of komoot.com/plan.
Currently I do this by placing a canvas on top of the existing canvas.
This works well but it is static and does not yet react to when the user moves the map around or zooms into it or the website focusses a particular location on the map.
Question
How do I best tie into this event loop of map updates?
Approaches considered
I could mimic / reimplement how komoot processes user input, but this sounds fragile and unreliable and messy. I would do this by adding listeners for mouse button events and cursor movement, etc.
The page's URL contains the lat and long coordinates together with the zoom level, e.g., https://www.komoot.com/plan/#49.9535480,5.3956956,11.345z. It changes after the map has changed. I assume there's a way to be notified of changes in the URL. If so I could then dynamically update my canvas.
This would still require some level of imitation of the page's internals. However, considerably less so than option 1.
Doing so I could only update my canvas after the animation is finished. Not a deal breaker but ideally I'd want to update it frame by frame together with the map itself for a more pleasing user experience.
Additional Details
Komoot seems to be using mapbox-gl
It's a Manifest 2 Content Script extension
This is my first browser extension ever
I'm writing this in Scala.js using this excellent template
Don't let this keep you from posting javascript solutions or pointing me to javascript documentation!
Screenshot
You don't seem to have mentioned the obvious way: use the move event:
map.on('move',e => {...
// get center with map.getCenter()
});
But it's not really clear exactly what you're trying to do, so hard to advise more specifically.
I'm using Mapbox GL JS API to manipulate a Mapbox map. Right before I upload my result (which is a canvas.toDataURL) to the server through HTTP I need to resize my map (bigger resolution) and then use fitbounds to get back to the original points. After fit bounds fires, it takes the map a while to load all new tiles in. Only after this can I actually perform the upload. Right now though, I don't know if there's an event that's capable of telling me if all tiles are loaded.
I've tried all possible load functions and events in the API. There's a few issues on the GITHUB project but they're now at least a year old and there's been no update. Halfway through 2015 they started talking about adding an Idle event, but I can't seem to find any new documentation of it anywhere.
Has anyone found a way to make the code wait for the map to load? Or has any information regarding an update on this feature?
I doubt it matters much, but I'm working in an angular.js app.
We just added a Map#areTilesLoaded check which sounds like what you're looking for. That should go out in the next release (v0.37.0). In the meantime, the following should work.
map.on('sourcedata', (e)=> {
if (map.loaded()) {
// all tiles are loaded
// turn off sourcedata listener if its no longer needed
map.off('sourcedata');
}
});
I'd like to ask if anyone knows a good solution to my problem.
I have a Rails project with a Bing map, where I need to load about 20000 pushpins.
The problem that I have is the speed of my data load. I've tried to optimize the load time by only including required fields for records (id, latitude, longitude). It made some difference but still was not a good load time.
Next thing that I've done - started loading records in batches (a couple hundred at a time). As a result, pushpins started showing up almost instantly, but again, it took a really long time to fully load the data set.
I'd really appreciate any suggestions about a better way to load the data.
Thanks in advance!
You have several solutions to achieve what you want to do but the main question would be, do you really need to display the 20k pushpins onto the map control and display them all at once? I'm pretty sure it will lack of readibility and adding to performance cost, you might consider dynamicaly restrict the number of elements that will be displayed and load only those who can really be seen.
1: Client-side clustering
Using your own implementation or the Bing Maps Module available here: http://bingmapsv7modules.codeplex.com/wikipage?title=Client%20Side%20Clustering, you can create cluster to ease the data manipulation and rendering of the pushpins.
2: Dynamicaly load (Server-side clipping and clustering)
Each time you fire 'onviewchanged', you can make an AJAX call to refresh the information and clear the previously added pin. Also, if you are a zoom level or in a specific area where you have to display every pushpin, you can create cluster of pushpins so you will display only one pushpin that says 'there are 12 pins in here'. I'm sure you get the point.
3: Composing dynamic tile on server-side or on client-side
If you need to display everything, the latest solution would be to draw things on dynamical tiles on server-side or on client-side depending on your use case, see: http://www.web-maps.com/gisblog/?p=1605
I have a request form a client and am looking for advice on the best procedure. I believe that HTML 5 can help however I'm not too experience in the more advanced features of HTML 5 to come to a conclusion.
Basically my client is looking to have a universe which in effect really is just a large graph. Plotted within the universe are elements that are added by users. This amount will increase over time. Hence the graph will increase in dimensions. The idea is to see the universe as a whole with small dots representing elements. Then a user can zoom in and/or pan the universe to discover different elements. Clicking an element bring up a dialog and more information can be gained. Zooming can happen in real time or is it acceptable to click a region and it gets bigger.
My assumption is that the best way to go about this is to use HTML 5 and Javascript. However as stated I'm new to HTML 5 and its limitations.
It would be nice if it could be light-weight and accessible on multiple devices (mobile, tables, etc).
Is HTML the solution here? What would be the best practice? Any suggestions?
A while back I built something very similar by integrating with Google Maps. I pulled addresses from my database, converted using a Geocode tool, then with PHP/Javascript combination I input the data into Google Maps (just using a simple foreach loop) and stuck the code on my site. In all, it was pretty simple since Google handles most the application.
The hardest part, IMO, was validating the addresses and converting them to Geocode.
If you want to take this route, here are some helpful links:
GOOGLE MAPS INTEGRATION DOCUMENTATION (pretty much contains everything you'll need to know)
https://developers.google.com/maps/documentation/javascript/
GEOCODING WITH GOOGLE (Limits you to 2500 hits per day)
https://developers.google.com/maps/documentation/geocoding/
And the rest I'd search here in stackoverflow.
Hopefully this helps point you in the right direction.
I know this is not nearly as straightforward as it is with the Maps API v3, but what would be the best way to effectively limit the zoom or viewable area (if the latter is even possible) with the Earth API? We are trying to prevent people from inadvertently zooming out too far when navigating the small focus area of our map.
Untested, but my first attempt would probably be to listen for the viewchanged event, and check the current view to see if it matches your criteria. If not, you could then flyTo something within your view, and hopefully the effect would be somewhat smooth (but I'm not too sure it would be totally smooth).
See http://code.google.com/apis/ajax/playground/#viewchange_event_(and_viewchangebegin,_viewchangeend) for an example of checking for the viewchanged event.