I would like to create a webapp where I can display my own geotiffs, with NDVI and other data layers, as well as 3D geometries, providing a seamless rendering of both 2D tiles and textured 3D shapes, exactly like maps.google.com achieves in switching from "map" to "earth" views.
After much research, the closest I came to a viable solution is to build the infrastructure from the ground up based on http://cesiumjs.org/, and while this seems doable, it is extremely low level, and will require an exotic cocktail of libraries and a buttload of man-hours.
Before going down that road, I want to make sure there isn't a cost effective alternative that takes all the heavy lifting out of my app's shoulders and gives me a friendly set of APIs to base my app on.
Mapbox comes close to perfection in this regard, but unfortunately, it only handles 2D.
On the other hand, on the Google side, amid Earth API and Maps Engine deprecation, it's hard to tell what exactly is currently possible and will remain available long term.
Bottom line, for a future-proof Google-centric solution built today, are there Google APIs in place that allow building a webapp that displays custom 2D and 3D data with a seamless rendering experience?
https://cesiumjs.org/ is a library very similar to google maps that provides support for 3d shapes on top of maps.
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 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.
Hasn't anybody thought about creating dynamic texture of Google Maps? So for instance, we create a simple plane and apply a texture to it that is going to be an actual map of Google (with all of it properties, like drag, zoom, etc.).
Would be nice to somehow deploy google map to a canvas element, grab it as a map for Object3D texture, hide it and listen to its changes (mousemove, etc.) and update the texture map again as it’s being changed.
Hasn’t anybody implement this already? Or maybe at least somebody has some thoughts on how to do this implementation??? May be some alternative that I don’t know about?
Correct me if I’m wrong, but I think that it would be nice to have Google Maps inside of THREE.js as a plugin or even as a part of library.
I have definitely thought about this and I'm not alone. You should be verrrrry prudent if you choose to do so, however: https://developers.google.com/maps/licensing
For student-ish projects you may be okay but don't be surprised if your game or real estate company gets a C&D letter in like 2 hours after release :)
Seems like this has already been done.
The Google Maps team joined with B-Reel to make the Google Maps Cube
Game, where you help a small blue ball navigate the streets of New
York, Tokyo, Paris and San Francisco (among others). As you move your
mouse the cube rotates and the ball rolls down the streets, bouncing
off buildings and making its way towards the goal.
No discussion on WebGL is complete without mentioning Mr. doob's
Three.js library at some point, and this is no exception: the Maps
Cube game makes use of Three.js for its gorgeous rendering. If you're
considering doing some WebGL work in a commercial setting, Three.js is
a really good place to start; it's a very nice library that will save
you a lot of headaches.
http://www.playmapscube.com/ (requires chrome).
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.
I'm looking to add an map to my application, which would have a world map with different coloured countries, States (in the US) and Provinces (in Canada). The user should be able zoom in to see details, as the scale for seeing the whole world isn't suitable for seeing details in Europe say. The colours would need to be programmed from my application, so a simple image map isn't appropriate.
Obviously the first place to look was Google, but Google Maps doesn't seem to be able to colour code countries. Google Charts can, but produces a single image, which isn't zoomable.
Am I wrong about google, or is there another way that I can use to produce a suitable map? It's a ruby on rails app, so anything which is ruby specific is fine, but ideally not any other language though if it's the only way, then it's the only way.
I developed jVectorMap for such visualizations.
Django has geo-django; If you want to do feature rich GIS web apps with Rails, you’re gonna have to assemble the pieces yourself.
Google maps is a good client, you can use overlays. You need the GIS data to generate the overlay polygons.