Vector tiles in EPSG:4326

vectortiles 5 epsg4326 2 mapboxstyle 2 ol-mapbox-style 2 maptiler 24

Example showing vector tiles in EPSG:4326 (styled using ol-mapbox-style)

Example showing vector tiles in EPSG:4326 (styled using ol-mapbox-style) loaded from maptiler.com. Note: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example. No map will be visible when the API key has expired.

main.js

import 'ol/ol.css';
import MVT from 'ol/format/MVT';
import TileGrid from 'ol/tilegrid/TileGrid';
import VectorTileSource from 'ol/source/VectorTile';
import View from 'ol/View';

import olms from 'ol-mapbox-style';
import {defaultResolutions} from 'ol-mapbox-style/dist/util';

const key = 'Get your own API key at https://www.maptiler.com/cloud/';

// Match the server resolutions
const maxResolution = 360 / 512;
defaultResolutions.length = 14;
for (let i = 0; i < 14; ++i) {
  defaultResolutions[i] = maxResolution / Math.pow(2, i + 1);
}

olms(
  'map',
  'https://api.maptiler.com/maps/basic-4326/style.json?key=' + key
).then(function (map) {
  // Custom tile grid for the EPSG:4326 projection
  const tileGrid = new TileGrid({
    extent: [-180, -90, 180, 90],
    tileSize: 512,
    resolutions: defaultResolutions,
  });

  const mapboxStyle = map.get('mapbox-style');

  // Replace the source with a EPSG:4326 projection source for each vector tile layer
  map.getLayers().forEach(function (layer) {
    const mapboxSource = layer.get('mapbox-source');
    if (mapboxSource && mapboxStyle.sources[mapboxSource].type === 'vector') {
      const source = layer.getSource();
      layer.setSource(
        new VectorTileSource({
          format: new MVT(),
          projection: 'EPSG:4326',
          urls: source.getUrls(),
          tileGrid: tileGrid,
        })
      );
    }
  });

  // Configure the map with a view with EPSG:4326 projection
  map.setView(
    new View({
      projection: 'EPSG:4326',
      zoom: mapboxStyle.zoom,
      center: mapboxStyle.center,
    })
  );
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vector tiles in EPSG:4326</title>
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://unpkg.com/elm-pep"></script>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder,Number.isInteger"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map" style="background:none;"></div>
    <script src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "vector-tiles-4326",
  "dependencies": {
    "ol": "6.6.1"
  },
  "devDependencies": {
    "parcel": "^2.0.0-beta.1"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  }
}