Skip to content

Commit 6811710

Browse files
jonathanluriejonathanlurie
authored
ADD map can now retrieve config (#28)
1 parent 477d058 commit 6811710

Some content is hidden

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

77 files changed

+1041
-511
lines changed

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
# Changelog
2+
## [v1.0.7](https://github.com/maptiler/maptiler-sdk-js/releases/tag/v1.0.7)
3+
- The `apiKey` can now be specified in the `Map` constructor (will propagate to `config`)
4+
- The `language` can now be speficifed in the `Map` constructo (will **not** propagete to `config` and will apply only to this specific instance)
5+
- `Map` now has the method `.getSdkConfig()` to retrieve the config object.
6+
- `Map` now has the method `.getMaptilerSessionId()` to retrieve the MapTiler session ID
7+
8+
Both `.getSdkConfig()` and `.getMaptilerSessionId()` are handy for layers or control built outside of the SDK that still need some of the configuration to interact with the server. Those components do not always have access to the internal of the SDK (especially that the config is scoped) but can access to the `Map` instance to which they are added with the implementation of the `.onAdd()` method.
29

310
## [v1.0.6](https://github.com/maptiler/maptiler-sdk-js/releases/tag/v1.0.6)
411
- Now exposing `MaptilerGeolocateControl` for external initialization if needed

‎demos/embedded-config.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<html>
2+
<head>
3+
<title>MapTiler JS SDK example</title>
4+
<style>
5+
html, body {
6+
margin: 0;
7+
}
8+
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+
}
15+
16+
#style-picker-container {
17+
position: absolute;
18+
z-index: 2;
19+
margin: 10px;
20+
}
21+
22+
</style>
23+
24+
<link rel="stylesheet" href="maptiler-sdk.css">
25+
</head>
26+
27+
<body>
28+
<div id="map-container"></div>
29+
<div id="style-picker-container">
30+
<select name="mapstyles" id="mapstyles-picker">
31+
32+
</select>
33+
34+
</div>
35+
36+
<script src ="maptiler-sdk.umd.js"></script>
37+
38+
<script>
39+
const map = new maptilersdk.Map({
40+
container: document.getElementById("map-container"),
41+
apiKey: "ZFEK2gQSwT4Jcimbtcy7",
42+
language: maptilersdk.Language.GERMAN,
43+
hash: true,
44+
maxPitch: 85,
45+
scaleControl: true,
46+
fullscreenControl: true,
47+
terrainControl: true,
48+
})
49+
50+
const styleDropDown = document.getElementById("mapstyles-picker")
51+
52+
styleDropDown.onchange = (evt) => {
53+
map.setStyle(styleDropDown.value)
54+
}
55+
56+
Object.keys(maptilersdk.MapStyle).forEach(s => {
57+
const styleOption = document.createElement('option');
58+
styleOption.value = maptilersdk.MapStyle[s].DEFAULT.id;
59+
styleOption.innerHTML = s.replace("_", " ").toLowerCase();
60+
styleDropDown.appendChild(styleOption);
61+
})
62+
63+
64+
</script>
65+
</body>
66+
</html>

‎demos/maptiler-sdk.umd.js‎

Lines changed: 14 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demos/simple.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
<script src ="maptiler-sdk.umd.js"></script>
3737

3838
<script>
39-
maptilersdk.config.apiKey = "ZFEK2gQSwT4Jcimbtcy7";
39+
// maptilersdk.config.apiKey = "ZFEK2gQSwT4Jcimbtcy7";
4040

4141
const map = new maptilersdk.Map({
4242
container: document.getElementById("map-container"),
@@ -59,6 +59,8 @@
5959
styleOption.innerHTML = s.replace("_", " ").toLowerCase();
6060
styleDropDown.appendChild(styleOption);
6161
})
62+
63+
6264
</script>
6365
</body>
6466
</html>

‎demos/two-maps.html‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<html>
2+
<head>
3+
<title>MapTiler JS SDK example</title>
4+
<style>
5+
html, body {
6+
margin: 0;
7+
}
8+
9+
#two-map-container {
10+
display: inline-flex;
11+
}
12+
13+
#map-container1 {
14+
/* position: absolute; */
15+
width: 50vw;
16+
height: 100vh;
17+
background: radial-gradient(circle, rgb(186 226 255) 5%, rgb(0 100 159) 98%);
18+
}
19+
20+
#map-container2 {
21+
/* position: absolute; */
22+
width: 50vw;
23+
height: 100vh;
24+
background: radial-gradient(circle, rgb(186 226 255) 5%, rgb(0 100 159) 98%);
25+
}
26+
27+
</style>
28+
29+
<link rel="stylesheet" href="maptiler-sdk.css">
30+
</head>
31+
32+
<body>
33+
<div id="two-map-container">
34+
<div id="map-container1"></div>
35+
<div id="map-container2"></div>
36+
</div>
37+
38+
39+
<script src ="maptiler-sdk.umd.js"></script>
40+
41+
<script>
42+
// maptilersdk.config.primaryLanguage = maptilersdk.Language.GERMAN;
43+
44+
const map1 = new maptilersdk.Map({
45+
container: document.getElementById("map-container1"),
46+
apiKey: "ZFEK2gQSwT4Jcimbtcy7",
47+
language: maptilersdk.Language.SPANISH,
48+
hash: true,
49+
maxPitch: 85,
50+
scaleControl: true,
51+
fullscreenControl: true,
52+
terrainControl: true,
53+
})
54+
55+
const map2 = new maptilersdk.Map({
56+
container: document.getElementById("map-container2"),
57+
apiKey: "ZFEK2gQSwT4Jcimbtcy7",
58+
hash: true,
59+
maxPitch: 85,
60+
scaleControl: true,
61+
fullscreenControl: true,
62+
terrainControl: true,
63+
})
64+
65+
console.log('map1', map1);
66+
console.log('map2', map2);
67+
68+
69+
</script>
70+
</body>
71+
</html>

0 commit comments

Comments
 (0)