fetchMap Pharmacies

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>fetchMap Pharmacies</title>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/h3-js@^3.0.0"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>
    <!-- jsFiddle will insert css and js -->
  </head>

  <body>
    <div id="map"></div>
  </body>

</html>

CSS

body {
  margin: 0;
  padding: 0; 
}
#map{
  width: 100vw;
  height: 100vh;
}

JavaScript

const cartoMapId = 'bcc1a325-57b9-4d89-beec-0b817c0b8ad6';
deck.carto.fetchMap({cartoMapId}).then(({initialViewState, mapStyle, layers}) => {
  mapStyle = `https://basemaps.cartocdn.com/gl/${mapStyle.styleType}-gl-style/style.json`;
  const deckgl = new deck.DeckGL({
    container: 'map',
    controller: true,
    mapStyle,
    initialViewState,
    layers
  });
});