diff --git a/examples/vector-tiles-4326.html b/examples/vector-tiles-4326.html new file mode 100644 index 0000000000..fb93133566 --- /dev/null +++ b/examples/vector-tiles-4326.html @@ -0,0 +1,13 @@ +--- +layout: example.html +title: Vector tiles in EPSG:4326 +shortdesc: Example showing vector tiles in EPSG:4326 (styled using ol-mapbox-style) +docs: > + 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. +tags: "vector tiles, epsg4326, mapbox style, ol-mapbox-style, maptiler" +cloak: + - key: get_your_own_D6rA4zTHduk6KOKTXzGB + value: Get your own API key at https://www.maptiler.com/cloud/ +--- +
diff --git a/examples/vector-tiles-4326.js b/examples/vector-tiles-4326.js new file mode 100644 index 0000000000..f24cda8d31 --- /dev/null +++ b/examples/vector-tiles-4326.js @@ -0,0 +1,50 @@ +import View from '../src/ol/View.js'; +import MVT from '../src/ol/format/MVT.js'; +import VectorTileSource from '../src/ol/source/VectorTile.js'; +import TileGrid from '../src/ol/tilegrid/TileGrid.js'; + +import olms from 'ol-mapbox-style'; +import {defaultResolutions} from 'ol-mapbox-style/util.js'; + +const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; + +// 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 + })); + +});