How to create big dynamic map in canvas (like google maps- with some kind dynamic tiles), when I scroll the map- the area should be loaded dynamically? I found this- https://github.com/slav123/SpryMap but this is rather for one big image not for dynamic loading
I found something like this- very simple example, but it works pretty, found on https://gamedev.stackexchange.com/questions/42038/what-would-be-a-good-way-to-implement-render-a-2d-tiled-map-for-a-browser-game, first answer
Based on google maps, i believe they have many small images that they dynamically load into the map, they are of different zoom levels and locations, but always the same size. Making it easy to know which to load. You would want to load a buffer around the edges of your canvas to help reduce a loading time if you scroll quickly.
You can see what i'm talking about if you open maps.google.com, it will load block by block and if you scroll you will notice that a buffer of a single tile is loaded around the viewing window.
Related
I have an SVG that I am overlaying on a Google Map. The SVG is 50mb large, so it takes 10 seconds or so to load in the browser.
I can get the SVG split into 171 separate SVG files that make up this big SVG. What is my best strategy to improve load time? I am trying to keep a high resolution at lower zoom levels.
Things I have tried
-Converting Image to PNG and JPG- resolution is not adequate
-Optimizing SVG File- still can't reduce it enough to impact load time
Things I am thinking about trying
- layer SVGs in a certain order on page load, grass first, then cars, then buildings (although with so many, I really do not want to do this)
- there is a library called PolyMaps, not sure if this could help
-utilizing GZIP format of the SVG, but I am not sure what the best way to do this would be to achieve the desired result or how i would do that
Basically, I am just looking from some general direction from devs more experienced with loading a large amount of SVGs onto the google maps api/canvas
this is for an interactive map, there are infowindows that are custom and are already created(not svg), and as of right now, just using standard marker icons(svg). besides the infowindows and markers its really as simple as overlaying a lot of svg data onto the map,
Any help would be appreciated.
thanks
i ended up layering the smaller svgs in the file and completely removing any of the larger ones that I didn't absolutely need.
I have added a Google Maps Javascript API (dynamic map) to my web-site. I want to put a static picture in the bottom left corner over the maps div - something like a legend. It will not move when the user scrows around.
Is there a way to do it through Google Javascript API or shall I just add a div, put it over the map with CSS?
Yes, there is a way to add this sort of thing using the Google Maps Javascript API. It is considered a Custom Control, and here is a link to the documentation. You would do that if you need to have your element move around when screen real estate gets tight and you want Google Maps to take care of it.
If you aren't concerned with reflowing the other controls as the map appears on screens of various sizes, you can just go with an absolutely positioned element. If you don't want your overlay to affect the map ui by capturing mouse events, just set pointer-events:none; on that element.
Basically what I am trying to do is find a way to load ONLY one image/tile which will fill the viewport and not have any surrounding tiles loaded. It appears this is the methodology the good folks at Weather Underground are doing w/their Wundermap.
I've tried digging through their code but to no avail. I tried simply using larger tiles - larger than the actual viewport - but this has several adverse side effects. There was a similar question asked in WMS as a single tile image in Google Maps v3 but that was more about just using larger tiles than using a single tile.
Thanks in advance.
UPDATE:
Here is a link to a page/map on their site that loads a single tile/image that spans the entire viewport:
http://wxug.us/o4ia
If you have the Net tab open in firebug you can see that there is a single tile request. Also, if you keep it open and pan the map - while keeping the mouse down - the data does not fill in until you release the mouse. For all the tiled maps I have seen, as soon as you pan, it starts filling in new tiles.
They're using a custom overlay. You'll need to set up a server-side way of serving out your own image overlays to display on Google Maps, based on the viewport (presuming you want to serve 1 image that displays over the entire viewport). http://goo.gl/zgEKB
I want to make user able to draw routes and areas on static images as it is done on Google Maps. I've never done any JavaScript drawing before. Please advice me:
Any library/plugin who can help me to draw editable polylines and polygones on static images (and make it able to store the lines/points on my server)
What is the common way to draw for most browsers? As I know the "canvas" tag isn't supported enough by many browsers, and to make a line using multiple DIVs wouldn't be the best way to achieve this.
Is it possible to attach Google Maps API to a static picture?
Thank you!
Look into the Google Maps "GroundOverlay" object
http://code.google.com/apis/maps/documentation/javascript/overlays.html#GroundOverlays
This should allow you to lay your static image on top of the map, while keeping all of the map's regular functionality (infowindows, polylines, routes, etc).
Slippy maps are web widgets which allow the user pan around a two dimensional plane by grabbing and dragging it. This control was made popular by Google maps, and can be seen on many modern mapping systems today. It's obvious as you watch them load that they are actually a grid of images which are loaded as-needed as the user pans. My question is; how are those images aligned, moved, and dynamically loaded in HTML/JS/CSS? Are they divs with background images? Are they loaded into a parent div with overflow:hidden? What strategies do they use to keep from leaking memory as the user pans around. Are there any third party libraries that make it easier to build them. I'm not interested in geographic maps persay, just the interface that's commonly used to display them. Thanks!
Normally a grid of image elements are moved around, and as some move off the end of the viewer and become hidden they are moved to the opposite side of the grid and the src attributes changed to point to the new map tile.
All these, as you say, will be loaded into a parent element with overflow:hidden;
In terms of examples you can look at the open source Open Layers implementation:
http://openlayers.org/