Protomaps
-
|
I have the following example working with Could some more style information be necessary with maplibre-gl 4? <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map on a webpage</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.0.0/dist/maplibre-gl.css" />
<script src="https://unpkg.com/maplibre-gl@4.0.0/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/protomaps-themes-base@2.0.0-alpha.5/dist/index.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
window.map = new maplibregl.Map({
container: "map",
hash: true,
center: [-122.4194, 37.7749],
zoom: 12,
style: {
version: 8,
glyphs: "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
sources: {
protomaps: {
type: "vector",
url: "https://api.protomaps.com/tiles/v3.json?key=YOUR_KEY_HERE",
},
},
layers: protomaps_themes_base.default("protomaps", "light"),
},
});
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
The example as pasted (with a valid api key in YOUR_KEY_HERE) works on 4.0.0 for me. What browser are you using? |
Beta Was this translation helpful? Give feedback.
-
|
is supporting file:// important for your use case? file:// seems to work with firefox, as my API returns |
Beta Was this translation helpful? Give feedback.
-
|
I've narrowed this down some more and this seems to be a maplibre-gl 4.0.0 issue that only affects loading of vector maps. I was using the MapTiler satellite map as comparison but that loads jpegs and when I switch to their basic map I see the same issue of vector tiles not being requested as I do with the Protomaps vector tiles. I'll need to do some more digging to understand exactly why that is. |
Beta Was this translation helpful? Give feedback.
-
|
Due to a mix of historical and technical reasons, raster images can be rendered without having to respect CORS (especially over file protocol which does not allow for CORS to work). This is related to https://stackoverflow.com/questions/47978252/how-img-tag-gets-content-over-cors-headers Update: seems to be fixed in maplibre-gl 4.0.1 (maplibre/maplibre-gl-js#3681) |
Beta Was this translation helpful? Give feedback.
-
|
Yes, I reported in maplibre/maplibre-gl-js#3680 and it got fixed in maplibre/maplibre-gl-js#3681 which is included in the 4.0.1 release. Updating my example to use mapbox-gl 4.0.1 works as a file url in both Chrome and Safari. |
Beta Was this translation helpful? Give feedback.
Yes, I reported in maplibre/maplibre-gl-js#3680 and it got fixed in maplibre/maplibre-gl-js#3681 which is included in the 4.0.1 release.
Updating my example to use mapbox-gl 4.0.1 works as a file url in both Chrome and Safari.