8

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:

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?

YTerle
  • 2,606
  • 6
  • 24
  • 40
  • https://landtechnologies.github.io/Mapbox-vector-tiles-basic-js-renderer/debug/basic/google – LuisTavares Jan 09 '20 at 13:43
  • That's a fork of mapbox-gl-js giving you full control over rendering of specific tiles, also provides vector tile overlay for `google maps`. – LuisTavares Jan 09 '20 at 13:44
  • 1
    @LuisTavares it seems to me it violates Google's ToS: "you must not access map tiles or imagery through interfaces or channels (including undocumented Google interfaces) other than the Maps API(s)." Isn't it? – YTerle Jan 09 '20 at 14:11
  • Provided the library is using Custom Overlays, or Ground Overlays, or ImageMapTypes, under the wood, I can see no problem, https://developers.google.com/maps/documentation/javascript/customoverlays – LuisTavares Jan 09 '20 at 15:06
  • 1
    @LuisTavares could you please elaborate / prove ? – YTerle Jan 10 '20 at 11:37
  • 1
    "In this demo we show how basic tile rendering can be used in a `google map overlay` to render vector tiles on a google map" – LuisTavares Jan 10 '20 at 12:44
  • Thanks, @LuisTavares i'm going to try it and will get back here – YTerle Jan 10 '20 at 12:47

2 Answers2

6

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,

YTerle
  • 2,606
  • 6
  • 24
  • 40
  • I've just seen you updated your answer. Did you try the solution I purposed in my comments? – LuisTavares Feb 07 '20 at 20:06
  • @LuisTavares I did not try it, but I think it is good way to go -- read this post. – YTerle Feb 08 '20 at 15:12
  • @YTerle I don't see why you would be unable to render vector tiles with the mobile APIs. For android this would mean implementing TileProvider. – Justin Poehnelt May 20 '20 at 22:27
  • @JustinPoehnelt custom `TileProvider` must return `Tile`, which is implicitly a raster tile, because it has a `data` field which is a _byte array containing the image data_. See https://developers.google.com/android/reference/com/google/android/gms/maps/model/Tile – YTerle May 22 '20 at 08:11
  • Yes, but you can convert the vector data to a raster. https://gis.stackexchange.com/a/245954/25837 – Justin Poehnelt May 26 '20 at 16:36
  • @JustinPoehnelt that's interesting, I'm going to give it a try on my spare time. BTW, it looks like reinventing vector renderer by our own, what potentially may have a lot of pitfalls. – YTerle Jun 04 '20 at 08:43
0

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.

techjb
  • 51
  • 5