I have a large high-resolution image that I am using for an overlay using Google Maps v3 API. This works fine for desktop and laptop computers with a reasonable network connection, but unsurprisingly it does not work so well for mobile users.
What's the best/easiest way to break the image up into 2D tiles at the various zoom levels so I can act as a tile server for Google Maps via the API?
Is there a program that will reliably generate the tiles for me and provide me with the necessary zoom and coordinates for each resulting tile and/or give me the correct tile if I provide the zoom and coordinates?
Is it pretty easy to write a tile server to do it on the fly once you gather the right info? Perhaps there's source code out there that I can use as a model? (I found a tile server at http://blog.gmapify.fr/a-map-tile-server-part-2-understanding-google-maps-tile-overlays-and-building-up-a-tile-server which is certainly helpful, but it doesn't serve tiles from a source image, so I'd have to at least figure that part out...)
Or perhaps there is step-by-step algorithm that I can manually follow if that's more straightforward? (Since it's only one image and it covers an area on the map of maybe a square mile, manually doing it like that is perhaps feasible if not preferable.)
you can check MapTiler http://code.google.com/p/maptiler/. It can generate the tiles you need.
Tile server is really easy to write. The easiest way is just to host static files (your tiles) in a directory structure. The directory structure is then usually servername/zoom/x/y.png (or zoom/y/x.png). Such structure is also produced by MapTiler. MapTiler also generates an example web page using the tiles (but I guess it uses Google Maps API v2).
Information about using your tiles in Google Maps API v3 can be found here: http://code.google.com/apis/maps/documentation/javascript/maptypes.html#CustomMapTypese
You can do the entire thing clientside without tile pre-cutting
See https://github.com/Murtnowski/GMap-JSlicer
slicer = new JSlicer(document.getElementById('map'), 'myImage.png');
slicer.init();
Very simple.
There's a really good video tutorial on making maps with maptiler, which can be found here:
Mobile Maps That Aren't Terrible
It focuses on mobile maps, but also covers maptiler and other basics. I found that very helpful.
Related
The goal is to display large amount of data on Google Maps. By large amount I mean around 10 millions of segments stored in PostgreSQL database. The segments represent some characteristics of roads, so segments should overlay the roads in base map. The segment properties may change over time.
The best technical solution for this problem is to use custom tile server (please correct if wrong).
According to Google Maps JS API, I found out two ways to draw over the map using custom tile server:
using GeoJson/KML data (https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson)
using PNG images (https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes)
I have tried both. The first one does not fit my needs because GeoJson appears too large, what results in performance issues. The second one is bad from UX point of view, because it is using raster tiles, whereas nowadays we should use vector tiles. I also looked at OpenLayers / Leaflet, but didn't find an official way to go with Google Maps (see https://github.com/mapbox/mapbox-gl-js/issues/1791).
The key here would be to use vector tiles, however I cannot manage to render vector tiles (MVT) on Google Maps.
Is there any ways at all to render vector tiles on Google Maps Platform?
I've reached Google Maps Platform support and they advised me to use a deck.gl.
It is a technology for displaying huge data sets on a map, including Google Maps. It uses official Google Maps API for rendering, especially OverlayView.
There is a good blog post about Google Maps & deck.gl here:
https://cloud.google.com/blog/products/maps-platform/high-performance-data-visualizations-google-maps-platform-and-deckgl
I've managed to display custom vector tiles on Google Maps using angular and here is the sample repo:
https://github.com/yterletskyi/deckgl-angular
BTW, thanks to LuisTavares solution about the https://github.com/landtechnologies/Mapbox-vector-tiles-basic-js-renderer library which relies on OverlayView too. I have not tried it but the approach is the same as in deck.gl so there should not by any issues.
UPD:
After playing around with deck.gl, the problem turned to implement this on mobile iOS & Android platforms. After some research I had contacted Google Support but unfortunately there seems to be no solution to this. Google Support quote:
Hello Yura,
Unfortunately there is no way to render vector tiles with the mobile APIs. I also have no recommendations for services that allow you to do this with the Google Maps API.
My apologies,
Check this library to load vector tiles in Google Maps:
https://github.com/techjb/Vector-Tiles-Google-Maps
You just have to create an mbtiles file, then upload to Mapbox or another server, and finally connect to Google Maps.
I have been trying for some weeks to come up with a price map. My inspiration is the heatmap found on the website of Housing.com . The link to the map is:
https://housing.com/dsl/heatmaps/mumbai/buy
I have tried:
Google maps Javascript API 3
heatmap,js library
and many other websites.
The resulting map that I am getting is visually less appealing.
Have they defined boundaries for very small regions and then introduced the gradient(which, again I am unaware how to implement.)
Any thoughts on how it might have been implemented are welcomed.
They don't use Google Maps Heatmaps Layer in the application, or any other library for creating heatmaps. You can see that between the requests the webpage makes are images like this, this and also more for bigger zoom levels. They just render these images over custom styled google maps as tiles.
More on how to render custom tiles over google maps, check this part of docs. For more information how to style the map below the heatmap to look like in the example, check this parts of docs.
Creating tiles images to render over your google maps can be troublesome, there are some tools, like this one which should be able to help you, but is paid. I don't know of any free solutions, you can create it manually although it might take some time.
Hope this helps you to better understand the implementation techniques behind the referenced map.
I have noticed that the zoom on maps.google.com behaves differently (read: smoother) than my custom map using version 3 of the google maps api. I later found out that this also applies to the demo from Google here.
Is there a way to get the same smooth zoom feeling on maps using the Google Maps API v3?
I've been trying to search around the net for a solution, but all I can find is people asking how to do zoom animations, which is not what I'm looking for.
The native Google Maps site maps.google.com uses the HTML5 canvas element for rendering maps. The Google Maps API v3 does not. It is currently (as of late 2015) not possible to get the smooth continuous zoom behavior using the Google Maps API.
After searching Google docs and the web for answers without results, I took some time to understand how the API v3 and how maps.google.com basically work to render and display maps. There's one major difference that makes immediately clear why a continuous zoom won't work using the API:
Google Maps API v3 creates a map made of image tiles each rendered into single <div /> containers with a fixed default size of 256 x 256 px. When switching the zoom level every single tile has to be re-rendered with a new image (of whatever type, possibly dynamically styled with custom overlays and so on). This is a very expensive task, so every additional zoom step adds extra resources to be loaded and extra computation costs for re-rendering the whole scene via DOM manipulation. A fluid zoom experience is nearly impossible, even with modern browsers on high CPU/memory machines.
maps.google.com uses the HTML5 canvas object for rendering map scenes (I'm pretty sure there's a API v3 style fallback variant for old browsers). Drawing in a natively supported canvas object is way less expensive than replacing images in DOM elements. Google uses a vector graphics based approach which basically allows to do a continuous zoom into detail without the need to fetch additional resources. Additionally needed information for a specific zoom level though could be fetched as smaller chunks of data and applied to the drawing routines.
I must admit that I don't know how this works in detail. It's just what I discovered by inspecting the source and I hope it pretty much sums up why a "smooth zoom" is currently not possible using the maps API. Anyway, let's look forward to the Google Maps API v4!
There are other JavaScript mapping libraries that allow for smooth zooming, such as Mapbox-GL and Cesium. They both use WebGL, just like maps.google.com.
https://www.mapbox.com/mapbox-gl-js/example/fitbounds/
https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Camera.html&label=Showcases
I think it now depends on whether Google Maps is in Lite Mode, which seems to be their name for the old-school, image tile-based maps, as opposed to the canvas-based maps.
According to Google Maps' documentation for System and Browser requirements, Maps will disable 3D for certain video cards, and for some video cards, it goes beyond that and only lets you use Lite Mode.
I have a large non-map image that I want to allow people to view on a browser at multiple zoom levels. I want to display the image in google maps API or openlayer so that people can zoom in/out and pan. I was hoping i could then add additional layers to overlay things of interest on the image. I am looking at MapTiler to chop the image up into tiles that can be generated at multiple zoom levels, but I'm getting very confused...
MapTiler wants to know about the spatial reference system (SRS) for georeferencing of my my image files, and well I don't know what I'm supposed to tell it ;) I have no georeference data - I just want it to generate tiles for my image, and then allow me to display that image in google maps or openlayer. In addition, openlayers seems very dependant on georeference data..
Am I looking at the wrong solution, or are there any pointers to getting this to work? Can OpenLayers be used to display a custom set of image tiles at multiple zoom levels without georefence data?
Found the answer. It is possible in both OpenLayers and Google maps to display a custom map, providing your own tiles for the map...
This google groups posting details how you can use MapTiler to generate non-georeferenced images, which can then be shown on a OpenLayers image.
In MapTiler, you need to choose rastor image and then ensure that you don't add any georeferencing data to the image with MapTiler.
If i get this right maybe google maps custom overlays will fit your needs?
I have large images that I would like to have dragging and zooming controls like Google Maps. I started looking into Google Maps API and some other related websites, but I could not find something simple and easy.
MapKi tutorial suggests me to automatically cut tiles and add it as a custom map. This makes sense, but I have so many images in the file server that I don't have time to go through all of them and cut the tiles and figure out zoom levels for each. One good solution would be writing a script that can do this automatically, but that would take a lot of effort and time that has made to look for another solution if there is any.
Hence, is there a way to have similar functionalities as Google Maps controls for images without creating new images or tiles out of the original image. It would be great if you can either post some code or link to the tutorial/documentation. Or, if you know how to do this with Google API without making those tiles, please direct me to the right path. I'm a total newbie with Google Maps API.
I have found the DragZoom for Google Maps, but I don't think that's what I'm looking for.
You're looking for something like Djatoka
You should take a look at the IIIF protocol used by libraries and museums for zooming extremely large images (tens of thousands of pixels on a side +), preparing collections of images on canvases, presenting annotations on those images, etc.
http://iiif.io
…and just for the record here's an open source tiling server with a frontend viewer:
http://iipimage.sourceforge.net/
Check out https://github.com/Murtnowski/GMap-JSlicer
slicer = new JSlicer(document.getElementById('map'), 'myImage.png');
slicer.init();
It's super simple, no need for tile pre-cutting. Just point at a single image and go.