react-google-maps icon indicating copy to clipboard operation
react-google-maps copied to clipboard

[Feat] ImageMapType Support

Open maxwell-oroark opened this issue 1 year ago • 1 comments

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;

maxwell-oroark avatar Nov 15 '23 00:11 maxwell-oroark