Skip to content

Commit 6340044

Browse files
sebstryczekjonathanlurie
sebstryczek
and
jonathanlurie
authored
v3.0.0 (#148)
* Replace transform calls by map calls * Some fix for globe compatibility * Adding projection control and map instance logic (#132) * adding the projection control * wip * fixed the projection control animation * Map class now has a better projection management * Projection control is now using the Map methods * linting * Projection documentation * isGlobeprojection to isGlobeProjection * udpate readme with new FOV built-in function * update maplibre * release canditate version number * update to ML v5 pre 7 and newer Client lib * update to maplibre 5.0.0-pre.8 * RD-369_maplibre-pre9 (#145) * Update maplibre to 5.0.0.pre9 * Add globe examples * Adding telemetry (#144) * Adding telemetry * update telemetry endpoint * now using a Set * Bump version * RD-492_maplibre-v5.0.0-pre10 (#149) * Update code for using maplibre v5.0.0-pre10 * Update examples * Bump version * v3.0.0_RD-401_maplibre-v5.0.0 (#150) * Update dependencies * Update demos * Update changelog * Make biome happy * Improve development experience (fix dev mode) * Update icons * Split vite config files --------- Co-authored-by: Jonathan Lurie <[email protected]>
1 parent c9886b9 commit 6340044

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+3361
-2411
lines changed

‎CHANGELOG.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
11
# MapTiler SDK Changelog
22

3+
## 3.0.0
4+
### New Features
5+
- Update to Maplibre v5.0.0
6+
- New `MaptilerProjectionControl` to toggle Globe/Mercator projection
7+
- Add metric collection and plugin registration feature
8+
9+
### Bug Fixes
10+
- Navigation now relies on `Map` methods instead of `Transform` methods for bearing due to globe projection being available
11+
312
## 2.5.1
413
### Bug Fixes
514
- Better control of the status of `monitoredStyleUrls` in Map instance when error is caught (https://github.com/maptiler/maptiler-sdk-js/pull/141)

‎biome.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@
2929
},
3030
"linter": {
3131
"rules": {
32+
"style": {
33+
"noInferrableTypes": "off"
34+
},
3235
"suspicious": {
3336
"noExplicitAny": {
3437
"level": "off"

‎demos/colorramps.html‎

Lines changed: 66 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,84 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<head>
4-
<meta charset="utf-8"/>
5-
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
6-
<style>
7-
body {
8-
margin: 10px;
9-
padding: 0;
10-
font-family: sans-serif;
11-
}
12-
13-
#colorramp-contain > * {
14-
margin-bottom: 6px;
15-
display:flex;
16-
}
17-
18-
#colorramp-contain > div > span {
19-
width: 185px;
20-
height: 20px;
21-
line-height: 20px;
22-
background: #eeeeee;
23-
text-align: center;
24-
margin-right: 5px;
25-
border-radius: 3px;
26-
color: #04040496;
27-
font-size: 12px;
28-
}
29-
30-
#colorramp-contain > div > canvas {
31-
width: calc(100% - 190px);
32-
border-radius: 3px;
33-
}
34-
35-
36-
#colorramp-contain > div:nth-of-type(1) > canvas
37-
{
38-
border: 1px dashed #00000059;
39-
}
40-
41-
42-
</style>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
7+
<style>
8+
body {
9+
margin: 10px;
10+
padding: 0;
11+
font-family: sans-serif;
12+
}
13+
14+
#colorramp-contain>* {
15+
margin-bottom: 6px;
16+
display: flex;
17+
}
18+
19+
#colorramp-contain>div>span {
20+
width: 185px;
21+
height: 20px;
22+
line-height: 20px;
23+
background: #eeeeee;
24+
text-align: center;
25+
margin-right: 5px;
26+
border-radius: 3px;
27+
color: #04040496;
28+
font-size: 12px;
29+
}
30+
31+
#colorramp-contain>div>canvas {
32+
width: calc(100% - 190px);
33+
border-radius: 3px;
34+
}
35+
36+
37+
#colorramp-contain>div:nth-of-type(1)>canvas {
38+
border: 1px dashed #00000059;
39+
}
40+
</style>
4341
</head>
4442

4543
<body>
44+
<div id="colorramp-contain"></div>
4645

47-
<div id="colorramp-contain"></div>
46+
<script src="../build/maptiler-sdk.umd.min.js"></script>
47+
<script>
48+
const colorrampContainer = document.getElementById("colorramp-contain");
4849

49-
<script src="../build/maptiler-sdk.umd.js"></script>
50-
<script>
51-
const colorrampContainer = document.getElementById("colorramp-contain");
50+
function displayColorRamp(name, colorramp, extraInfo = "") {
51+
const canvas = colorramp.getCanvasStrip();
52+
canvas.style.height = "20px";
5253

53-
function displayColorRamp(name, colorramp, extraInfo = "") {
54-
const canvas = colorramp.getCanvasStrip();
55-
canvas.style.height = "20px";
56-
// canvas.style.width = "100%";
57-
// canvas.style.border = "1px dashed #00000059";
54+
const bounds = colorramp.getBounds()
5855

59-
const bounds = colorramp.getBounds()
56+
const div = document.createElement("div");
57+
const descSpan = document.createElement("span");
58+
descSpan.innerHTML = `${name}${extraInfo}`;
6059

61-
const div = document.createElement("div");
62-
const descSpan = document.createElement("span");
63-
// descSpan.innerHTML = `${name}${extraInfo} [${bounds.min}, ${bounds.max}]`;
64-
descSpan.innerHTML = `${name}${extraInfo}`;
65-
60+
div.appendChild(descSpan);
61+
div.appendChild(canvas);
62+
colorrampContainer.appendChild(div);
63+
};
6664

67-
div.appendChild(descSpan);
68-
div.appendChild(canvas);
69-
colorrampContainer.appendChild( div );
70-
}
71-
7265
Object.keys(maptilersdk.ColorRampCollection).forEach((k, i) => {
73-
const colorramp = maptilersdk.ColorRampCollection[k];
74-
displayColorRamp(k, colorramp);
75-
76-
// if (i === 0) return;
66+
const colorramp = maptilersdk.ColorRampCollection[k];
67+
displayColorRamp(k, colorramp);
7768

78-
// displayColorRamp(k, colorramp.resample("ease-in-square"), ', resampling method: "ease-in-square"')
79-
// displayColorRamp(k, colorramp.resample("ease-in-sqrt"), ', resampling method: "ease-in-sqrt"')
80-
// displayColorRamp(k, colorramp.resample("ease-in-exp"), ', resampling method: "ease-in-exp"')
69+
// if (i === 0) return;
8170

82-
// displayColorRamp(k, colorramp.resample("ease-out-square"), ', resampling method: "ease-out-square"')
83-
// displayColorRamp(k, colorramp.resample("ease-out-sqrt"), ', resampling method: "ease-out-sqrt"')
84-
// displayColorRamp(k, colorramp.resample("ease-out-exp"), ', resampling method: "ease-out-exp"')
71+
// displayColorRamp(k, colorramp.resample("ease-in-square"), ', resampling method: "ease-in-square"')
72+
// displayColorRamp(k, colorramp.resample("ease-in-sqrt"), ', resampling method: "ease-in-sqrt"')
73+
// displayColorRamp(k, colorramp.resample("ease-in-exp"), ', resampling method: "ease-in-exp"')
8574

86-
75+
// displayColorRamp(k, colorramp.resample("ease-out-square"), ', resampling method: "ease-out-square"')
76+
// displayColorRamp(k, colorramp.resample("ease-out-sqrt"), ', resampling method: "ease-out-sqrt"')
77+
// displayColorRamp(k, colorramp.resample("ease-out-exp"), ', resampling method: "ease-out-exp"')
8778

88-
// colorrampContainer.appendChild( document.createElement("p") );
89-
})
90-
91-
92-
93-
94-
</script>
79+
// colorrampContainer.appendChild( document.createElement("p") );
80+
});
81+
</script>
9582
</body>
96-
</html>
83+
84+
</html>

‎demos/index.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>MapTiler SDK JS</title>
8+
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css" />
10+
</head>
11+
12+
<body>
13+
<h1>MapTiler SDK JS Examples</h1>
14+
<ul>
15+
<li>
16+
<a href="colorramps.html?key=">Color ramps</a>
17+
</li>
18+
<li>
19+
<a href="mountain.html?key=">Mountain</a>
20+
</li>
21+
<li>
22+
<a href="readyevent.html?key=">Ready Event</a>
23+
</li>
24+
<li>
25+
<a href="simple.html?key=">Simple</a>
26+
</li>
27+
<li>
28+
<a href="sky_day.html?key=">Sky - Day</a>
29+
</li>
30+
<li>
31+
<a href="sky_night.html?key=">Sky - Night</a>
32+
</li>
33+
<li>
34+
<a href="transform-request.html?key=">Transform request</a>
35+
</li>
36+
</ul>
37+
38+
<script type="module">
39+
document.querySelectorAll("a").forEach((a) => {
40+
a.href += import.meta.env.VITE_API_KEY;
41+
});
42+
</script>
43+
</body>
44+
45+
</html>

‎demos/mountain.html‎

Lines changed: 57 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,71 @@
11
<html>
2-
<head>
3-
<title>MapTiler JS SDK example</title>
4-
<style>
5-
html, body {
6-
margin: 0;
7-
}
82

9-
#map-container {
10-
position: absolute;
11-
width: 100vw;
12-
height: 100vh;
13-
background: radial-gradient(circle, rgb(186 226 255) 5%, rgb(0 100 159) 98%);
14-
}
3+
<head>
4+
<title>MapTiler JS SDK example</title>
5+
<style>
6+
html,
7+
body {
8+
margin: 0;
9+
}
1510

16-
#style-picker-container {
17-
position: absolute;
18-
z-index: 2;
19-
margin: 10px;
20-
}
11+
#map-container {
12+
position: absolute;
13+
width: 100vw;
14+
height: 100vh;
15+
background: radial-gradient(circle, rgb(186 226 255) 5%, rgb(0 100 159) 98%);
16+
}
2117

22-
</style>
18+
#style-picker-container {
19+
position: absolute;
20+
z-index: 2;
21+
margin: 10px;
22+
}
23+
</style>
2324

24-
<link rel="stylesheet" href="../build/maptiler-sdk.css">
25-
</head>
25+
<link rel="stylesheet" href="../build/maptiler-sdk.css">
26+
</head>
2627

27-
<body>
28-
<div id="map-container"></div>
29-
<div id="style-picker-container">
30-
<select name="mapstyles" id="mapstyles-picker">
28+
<body>
29+
<div id="map-container"></div>
30+
<div id="style-picker-container">
31+
<select name="mapstyles" id="mapstyles-picker"></select>
32+
</div>
3133

32-
</select>
34+
<script src="../build/maptiler-sdk.umd.min.js"></script>
35+
<script>
36+
maptilersdk.config.apiKey = new URLSearchParams(location.search).get("key") || "API_KEY";
3337

34-
</div>
35-
36-
<script src ="../build/maptiler-sdk.umd.js"></script>
37-
38-
<script>
39-
maptilersdk.config.apiKey = "YOUR_API_KEY";
38+
if (maptilersdk.config.apiKey === "API_KEY") {
39+
const errorMessage = "MapTiler API key is missing. Please use URL `key` parameter to set it (`?key=XXXXX`).";
40+
41+
alert(errorMessage);
42+
throw new Error(errorMessage);
43+
}
4044

41-
const map = new maptilersdk.Map({
42-
container: document.getElementById("map-container"),
43-
style: maptilersdk.MapStyle.OUTDOOR.DARK,
44-
hash: true,
45-
scaleControl: true,
46-
fullscreenControl: true,
47-
terrainControl: true,
48-
geolocate: true,
49-
})
45+
const map = new maptilersdk.Map({
46+
container: document.getElementById("map-container"),
47+
style: maptilersdk.MapStyle.OUTDOOR.DARK,
48+
hash: true,
49+
geolocate: true,
50+
scaleControl: true,
51+
fullscreenControl: true,
52+
terrainControl: true,
53+
projectionControl: true,
54+
});
5055

51-
const styleDropDown = document.getElementById("mapstyles-picker")
56+
const styleDropDown = document.getElementById("mapstyles-picker");
5257

53-
styleDropDown.onchange = (evt) => {
54-
map.setStyle(styleDropDown.value)
55-
}
58+
styleDropDown.onchange = (evt) => {
59+
map.setStyle(styleDropDown.value)
60+
};
5661

57-
Object.keys(maptilersdk.MapStyle).forEach(s => {
58-
const styleOption = document.createElement('option');
59-
styleOption.value = maptilersdk.MapStyle[s].DEFAULT.id;
60-
styleOption.innerHTML = s.replace("_", " ").toLowerCase();
61-
styleDropDown.appendChild(styleOption);
62-
})
62+
Object.keys(maptilersdk.MapStyle).forEach(s => {
63+
const styleOption = document.createElement('option');
64+
styleOption.value = maptilersdk.MapStyle[s].DEFAULT.id;
65+
styleOption.innerHTML = s.replace("_", " ").toLowerCase();
66+
styleDropDown.appendChild(styleOption);
67+
});
68+
</script>
69+
</body>
6370

64-
65-
</script>
66-
</body>
6771
</html>

0 commit comments

Comments
 (0)