OpenLayers + fetchMap

by felixp

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>OpenLayers + fetchMap</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="https://unpkg.com/[email protected]/dist/elm-pep.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.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>
  </body>
</html>

CSS

body {
  margin: 0;
}

.map {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: medium;
}

JavaScript

// CARTO map id to load
const cartoMapId = 'a9e776f0-17d4-4642-ae3d-c68497045c2d';

// Create deck instance
const deckGL = new deck.Deck({
  initialViewState: {longitude: 0, latitude: 0, zoom: 1},
  controller: false,
  parent: document.getElementById('map'),
  style: {pointerEvents: 'none', 'z-index': 1}
});

// Sync deck view with OL view
const deckLayer = new ol.layer.Layer({
  render: function ({size, viewState}) {
    const [width, height] = size;
    const [longitude, latitude] = ol.proj.toLonLat(viewState.center);
    const zoom = viewState.zoom - 1;
    const bearing = (-viewState.rotation * 180) / Math.PI;
    const deckViewState = {bearing, longitude, latitude, zoom};
    deckGL.setProps({width, height, viewState: deckViewState});
    deckGL.redraw();
  }
});
 
// Create OL map with native OSM basemap and deck.gl overlay
const view = new ol.View({center: ol.proj.fromLonLat([0, 0]), zoom: 1});
const map = new ol.Map({
  target: 'map',
  view,
  layers: [new ol.layer.Tile({source: new ol.source.OSM()}), deckLayer]
});

// Load in CARTO map
deck.carto.fetchMap({cartoMapId}).then(({initialViewState, layers}) => {
  const {longitude, latitude, zoom} = initialViewState;
  view.animate({center: ol.proj.fromLonLat([longitude, latitude]), zoom: zoom + 1});
  deckGL.setProps({layers});
});