@trailstash/ultra
Version:
A web based tool for making MapLibre GL maps with data from sources such as Overpass, GeoJSON, GPX, KML, TCX, etc
75 lines (62 loc) • 2.13 kB
JavaScript
import { version as maplibreVersion } from "maplibre-gl/package.json";
import { version } from "../package.json";
let ultraVersion = version;
if (version === "dev") {
ultraVersion = "latest";
} else if (version.includes("-")) {
ultraVersion = version.split("-")[0];
}
export const htmlExport = (
style,
title = "Ultra Export",
description = "",
options = {},
) => {
return `
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>${title}</title>
<link
href="https://esm.sh/maplibre-gl@${maplibreVersion}/dist/maplibre-gl.css"
rel="stylesheet"
/>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="module">
import maplibregl from "https://esm.sh/maplibre-gl@${maplibreVersion}";
const style = ${JSON.stringify(style)};
maplibregl.setRTLTextPlugin("https://esm.sh/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js", true);
import { Protocol as PMTilesProtocol} from "https://esm.sh/pmtiles";
const pmtiles = new PMTilesProtocol();
maplibregl.addProtocol("pmtiles", pmtiles.tile);
import { Protocol as FallbackGlyphProtocol } from "https://esm.sh/@trailstash/ultra@${ultraVersion}/lib/glyphFallback.js";
const fallbackGlyphsProtocol = new FallbackGlyphProtocol();
maplibregl.addProtocol(FallbackGlyphProtocol.name, fallbackGlyphsProtocol.tile);
style.glyphs = FallbackGlyphProtocol.makeURL(style.glyphs);
const options = ${JSON.stringify(options)};
var map = new maplibregl.Map({
...options,
container: "map",
style,
});
import { handleStyleImageMissing } from "https://esm.sh/@trailstash/ultra@${ultraVersion}/lib/sprites.js";
map.on("styleimagemissing", handleStyleImageMissing);
// TODO: popup?
</script>
</body>
</html>`;
};