fetchMap galaxy

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>fetchMap Pharmacies</title>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCyuxJgAf5h8Q_MPhhQNml9A7uJtwgiRlg&callback=initMap&libraries=&v=beta"
      async
    ></script>


    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/@loaders.gl/[email protected]/dist/dist.min.js"></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 = '8831d178-70ed-4b6e-86c6-70aa4c75cf4e';

function initMap() {
  deck.carto.fetchMap({cartoMapId}).then(({initialViewState, layers}) => {
    map = new google.maps.Map(document.getElementById("map"), {
      center: {lat: initialViewState.latitude, lng: initialViewState.longitude},
      zoom: initialViewState.zoom,
      tilt: initialViewState.pitch,
      heading: initialViewState.heading,
      mapId: '2fccc3b36c22a0e2',
    });
  
    const tripLayer = layers.find(l => l.props.cartoLabel === 'Trips');
    overlay = new deck.GoogleMapsOverlay({
      layers
    });
    overlay.setMap(map);
  });
}