[Feat] ImageMapType Support

[maxwell-oroark]

Target Use Case

Add the ability to add tile layers. For example, a component that could be used to consume the new Air Quality heat map tile endpoint. Currently, I am not sure what the recommended best practice for tile layers would be with this library, perhaps using the DeckGL overlay and adding via DeckGL overlay's layers prop?

Proposal

I'm thinking the </Map /> component could accept <TileLayer /> components as children. TileLayer component would accept props similar to its current API: getTileUrl, opacity, getTileSize, etc.

import {APIProvider, Map, TileLayer } from '@vis.gl/react-google-maps';

function App() {
  const position = {lat: 53.54992, lng: 10.00678};

  return (
    <APIProvider apiKey={'YOUR API KEY HERE'}>
      <Map center={position} zoom={10}>
        <TileLayer getTileUrl={(coord, zoom) => `https://airquality.googleapis.com/v1/mapTypes/US_AQI/heatmapTiles/${zoom}/${coord.x}/${coord.y}key=${API_KEY}` 
    }  />
      </Map>
    </APIProvider>
  );
}

export default App;

[usefulthink]

Love this idea!

If it's really just a tile overlay or tiled basemap, I think the way to go would be the ImageMapType class. I would recommend looking into deck.gl when there's more to visualize and it's more data-oriented (technically there are still the Data Layers in the Maps API, but I don't remember ever using them).

But now I'm wondering if we should keep the naming from the maps API and build our components around those or if we should start our own naming, and what that would look like.

So let's first do some inventory and see which of those we would want to add react-bindings for.
The naming in the Maps API is a bit confusing between MapTypes, Overlays and Layers.

• first, there are MapTypes: ImageMapType and StyledMapType (as well as the option to create your own html-elements based type)
• then there's all sorts of layers, like the traffic-, bicycling- and transit-layer, the heatmap and kml-layer
• overlay seems to refer mostly to user-built instances using the OverlayView and WebGlOverlayView classes. Also there's GroundOverlay, but I'll count that as a special case of the user-built ones.
• finally there's Polylines and Polygons (I think unrelated to the Data Layer Polygons and Polylines)

So, for someone not familiar with the Maps API the naming might be confusing, so I tend towards the "start our own naming" option here.

As for the TileLayer component, we should think about how can we specify wether to add them to mapTypes or overlayMapTypes?