Skip to content

Commit 8229240

Browse files
sebstryczeksebstryczek
authored
RD-492_maplibre-v5.0.0-pre10 (#149)
* Update code for using maplibre v5.0.0-pre10 * Update examples * Bump version
1 parent d26edbe commit 8229240

14 files changed

+559
-907
lines changed

‎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/mountain.html‎

Lines changed: 51 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,64 @@
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 = "YOUR_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+
const map = new maptilersdk.Map({
39+
container: document.getElementById("map-container"),
40+
style: maptilersdk.MapStyle.OUTDOOR.DARK,
41+
hash: true,
42+
geolocate: true,
43+
scaleControl: true,
44+
fullscreenControl: true,
45+
terrainControl: true,
46+
projectionControl: true,
47+
});
4048

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-
})
49+
const styleDropDown = document.getElementById("mapstyles-picker");
5050

51-
const styleDropDown = document.getElementById("mapstyles-picker")
51+
styleDropDown.onchange = (evt) => {
52+
map.setStyle(styleDropDown.value)
53+
};
5254

53-
styleDropDown.onchange = (evt) => {
54-
map.setStyle(styleDropDown.value)
55-
}
55+
Object.keys(maptilersdk.MapStyle).forEach(s => {
56+
const styleOption = document.createElement('option');
57+
styleOption.value = maptilersdk.MapStyle[s].DEFAULT.id;
58+
styleOption.innerHTML = s.replace("_", " ").toLowerCase();
59+
styleDropDown.appendChild(styleOption);
60+
});
61+
</script>
62+
</body>
5663

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-
})
63-
64-
65-
</script>
66-
</body>
6764
</html>

0 commit comments

Comments
 (0)