Last active
August 19, 2022 17:18
-
-
Save dbauszus-glx/ff408e7009b5072167ed5325ad8fe44f to your computer and use it in GitHub Desktop.
Abstract of the mbtiles mapp format
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
let promise, maplibregl = null | |
async function MaplibreGL() { | |
// maplibre is loaded. | |
if (maplibregl) return new maplibregl.Map(...arguments); | |
// create a promise to check for the maplibre library | |
if (!promise) promise = new Promise(async resolve => { | |
// maplibre is available as a global object. | |
if (window.maplibregl) { | |
// assign the global object as maplibre and resolve the promise. | |
maplibregl = window.maplibregl | |
resolve() | |
return | |
} | |
Promise | |
.all([ | |
// load maplibre from skypack cdn | |
import('https://cdn.skypack.dev/pin/maplibre-gl@v1.15.3-OFxGDsJNZ70P0Qa7CzNE/mode=imports,min/optimized/maplibre-gl.js') | |
]) | |
.then(imports => { | |
// assign the imports to maplibre variable outside the closure and resolve the promise. | |
maplibregl = imports[0] | |
resolve() | |
}) | |
.catch(error => { | |
console.error(error.message) | |
alert('Failed to load MaplibreGL library. Please reload the browser.') | |
}) | |
}) | |
// await for the pomise to be resolved. | |
await promise | |
// return the maplibre.Map method from async function. | |
return new maplibregl.Map(...arguments); | |
} | |
export default async layer => { | |
const container = mapp.utils.html.node` | |
<div style="position: absolute; width: 100%; height: 100%;">` | |
layer.mbMap = await MaplibreGL({container}); | |
layer.L = new ol.layer.Layer({ | |
render: frameState => { | |
// use the frameState to position the maplibre Map. | |
// return the rendered container to the openlayers map overlay. | |
return layer.mbMap.getContainer(); | |
} | |
}) | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment