Skip to content

Commit a3d084d

Browse files
prushforthprushforth
authored
Merge pull request #214 from ahmadayubi/master
Fixes disabled property and removes ability to render layers with mismatched projections
2 parents 4faec8d + e78981d commit a3d084d

15 files changed

+453
-69
lines changed

‎demo/custom/bootstrap-ui.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Using Bootstrap</title>
6+
<meta charset="UTF-8">
7+
<script type="module" src="../../dist/mapml-viewer.js"></script>
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
9+
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
10+
<script type="text/javascript" src="./custom-ui.js"></script>
11+
<style>
12+
html {
13+
height: 100%
14+
}
15+
16+
body,
17+
* {
18+
margin: 0;
19+
padding: 0;
20+
}
21+
22+
mapml-viewer:defined {
23+
/* Responsive map. */
24+
max-width: 100%;
25+
26+
/* Full viewport. */
27+
width: 100%;
28+
height: 100%;
29+
30+
/* Remove default (native-like) border. */
31+
/* border: none; */
32+
}
33+
34+
35+
figure {
36+
display: table;
37+
position: relative;
38+
border: 1px #cccccc solid;
39+
padding: 4px;
40+
margin: auto;
41+
}
42+
43+
.zoom-controls {
44+
top: 10px;
45+
right: 10px;
46+
position: absolute;
47+
}
48+
49+
.layer-controls {
50+
top: 10px;
51+
left: 10px;
52+
position: relative;
53+
}
54+
</style>
55+
</head>
56+
57+
<body onload="CustomUI.initialize()">
58+
<div class="container">
59+
<div class="row justify-content-md-center">
60+
<div class="col col-md-auto border border-secondary">
61+
<h3>Layers</h3>
62+
<div id="layers" class="btn-group-vertical">
63+
64+
</div>
65+
</div>
66+
<div class="col col-md-auto">
67+
<figure>
68+
<mapml-viewer id="custom-map" style="width:500px;height: 500px;" projection="CBMTILE" zoom="0" lat="47"
69+
lon="-92">
70+
<layer- label="Canada Base Map - Geometry" src="http://geogratis.gc.ca/mapml/en/cbmtile/cbmtgeom/" checked>
71+
</layer->
72+
<layer- label="Fire Danger (forecast)" src="http://geogratis.gc.ca/mapml/en/cbmtile/fdi/"></layer->
73+
</mapml-viewer>
74+
75+
<figcaption class="map-controls">
76+
77+
<div class="zoom-controls">
78+
<input style="width: 30px;height: 30px;" type="image"
79+
src="https://icons-for-free.com/iconfiles/png/512/zoom+icon-1320196833813829308.png"
80+
onclick="CustomUI.zoomIn()"></br>
81+
<input style="width: 30px;height: 30px;" type="image"
82+
src="https://cdn.iconscout.com/icon/premium/png-512-thumb/zoom-out-1692048-1486701.png"
83+
onclick="CustomUI.zoomOut()">
84+
</div>
85+
</figcaption>
86+
</figure>
87+
</div>
88+
</div>
89+
</div>
90+
91+
92+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
93+
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
94+
crossorigin="anonymous"></script>
95+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
96+
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
97+
crossorigin="anonymous"></script>
98+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
99+
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
100+
crossorigin="anonymous"></script>
101+
</body>
102+
103+
</html>

‎demo/custom/custom-css-ui.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Using Bootstrap</title>
6+
<meta charset="UTF-8">
7+
<script type="module" src="../../dist/mapml-viewer.js"></script>
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
9+
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
10+
<script type="text/javascript" src="./custom-ui.js"></script>
11+
<style>
12+
html {
13+
height: 100%
14+
}
15+
16+
body,
17+
* {
18+
margin: 0;
19+
padding: 0;
20+
}
21+
22+
mapml-viewer:defined {
23+
/* Responsive map. */
24+
max-width: 100%;
25+
26+
/* Full viewport. */
27+
width: 100%;
28+
height: 100%;
29+
30+
/* Remove default (native-like) border. */
31+
/* border: none; */
32+
}
33+
34+
35+
figure {
36+
display: table;
37+
position: relative;
38+
border: 1px #cccccc solid;
39+
padding: 4px;
40+
margin: auto;
41+
}
42+
43+
.zoom-controls {
44+
top: 10px;
45+
right: 10px;
46+
position: absolute;
47+
}
48+
49+
.layer-controls {
50+
top: 10px;
51+
left: 10px;
52+
position: relative;
53+
}
54+
</style>
55+
</head>
56+
57+
<body onload="CustomUI.initialize()">
58+
<div class="container">
59+
<div class="row justify-content-md-center">
60+
<div class="col col-md-auto border border-secondary">
61+
<h3>Layers</h3>
62+
<div id="layers" class="btn-group-vertical">
63+
64+
</div>
65+
</div>
66+
<div class="col col-md-auto">
67+
<figure>
68+
<mapml-viewer id="custom-map" style="width:500px;height: 500px;" projection="CBMTILE" zoom="0" lat="47"
69+
lon="-92">
70+
<layer- label="Canada Base Map - Geometry" src="http://geogratis.gc.ca/mapml/en/cbmtile/cbmtgeom/" checked>
71+
</layer->
72+
<layer- label="Fire Danger (forecast)" src="http://geogratis.gc.ca/mapml/en/cbmtile/fdi/"></layer->
73+
</mapml-viewer>
74+
75+
<figcaption class="map-controls">
76+
77+
<div class="zoom-controls">
78+
<input style="width: 30px;height: 30px;" type="image"
79+
src="https://icons-for-free.com/iconfiles/png/512/zoom+icon-1320196833813829308.png"
80+
onclick="CustomUI.zoomIn()"></br>
81+
<input style="width: 30px;height: 30px;" type="image"
82+
src="https://cdn.iconscout.com/icon/premium/png-512-thumb/zoom-out-1692048-1486701.png"
83+
onclick="CustomUI.zoomOut()">
84+
</div>
85+
</figcaption>
86+
</figure>
87+
</div>
88+
</div>
89+
</div>
90+
91+
92+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
93+
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
94+
crossorigin="anonymous"></script>
95+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
96+
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
97+
crossorigin="anonymous"></script>
98+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
99+
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
100+
crossorigin="anonymous"></script>
101+
</body>
102+
103+
</html>

‎demo/custom/custom-ui.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
CustomUI = {
2+
initialize: function () {
3+
let layers = document.querySelectorAll("layer-");
4+
let map = document.querySelector("mapml-viewer");
5+
6+
let mapObserver = new MutationObserver((m) => {
7+
m.forEach((mut) => {
8+
if (mut.type === "childList") {
9+
mut.addedNodes.forEach((l) => {
10+
if (l.tagName === "LAYER-") {
11+
CustomUI.addLayer(l);
12+
}
13+
});
14+
}
15+
});
16+
});
17+
18+
mapObserver.observe(map, { childList: true });
19+
20+
for (let i = 0; i < layers.length; i++) {
21+
CustomUI.addLayer(layers[i]);
22+
}
23+
},
24+
addLayer: function (layerEl) {
25+
let layer = document.createElement("button");
26+
27+
layer.classList.add("btn");
28+
layer.innerHTML = layerEl.label;
29+
if (layerEl.checked) layer.classList.add("btn-info");
30+
31+
layer.toggleChecked = layerEl.toggleChecked;
32+
layer.addEventListener("click", function (e) {
33+
if (layerEl.checked) {
34+
layerEl.removeAttribute("checked");
35+
layer.classList.remove("btn-info");
36+
layer.classList.add("btn-light");
37+
38+
} else {
39+
layerEl.setAttribute("checked", "");
40+
layer.classList.add("btn-info");
41+
layer.classList.remove("btn-light");
42+
}
43+
});
44+
45+
let observer = new MutationObserver((m) => {
46+
m.forEach((mut) => {
47+
if (mut.type === "attributes") {
48+
if (mut.attributeName === "disabled") {
49+
if (mut.target.disabled) {
50+
layer.setAttribute("disabled", "");
51+
} else {
52+
layer.removeAttribute("disabled");
53+
}
54+
}
55+
if (mut.attributeName === "label") {
56+
layer.innerHTML = layerEl.label;
57+
}
58+
}
59+
});
60+
});
61+
observer.observe(layerEl, { attributes: true });
62+
63+
document.getElementById("layers").appendChild(layer);
64+
},
65+
zoomIn: function () {
66+
let map = document.getElementById("custom-map"),
67+
lat = +map.lat,
68+
lon = +map.lon,
69+
zoom = +map.zoom + 1;
70+
map.zoomTo(lat, lon, zoom);
71+
},
72+
zoomOut: function () {
73+
let map = document.getElementById("custom-map"),
74+
lat = +map.lat,
75+
lon = +map.lon,
76+
zoom = +map.zoom - 1;
77+
map.zoomTo(lat, lon, zoom);
78+
},
79+
}

‎demo/custom/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>custom-ui home</title>
6+
<meta charset="UTF-8">
7+
<script type="module" src="../../dist/mapml-viewer.js"></script>
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
9+
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
10+
<script type="text/javascript" src="./custom-ui.js"></script>
11+
</head>
12+
13+
<body>
14+
<nav class="navbar navbar-expand-lg navbar-light bg-light">
15+
<a class="navbar-brand" href="#">Custom User Interfaces</a>
16+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
17+
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
18+
<span class="navbar-toggler-icon"></span>
19+
</button>
20+
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
21+
<div class="navbar-nav">
22+
<a class="nav-link active" href="#">Info <span class="sr-only">(current)</span></a>
23+
<a class="nav-link" href="bootstrap-ui.html">Using Bootstrap</a>
24+
<a class="nav-link" href="#">Using Custom CSS</a>
25+
</div>
26+
</div>
27+
</nav>
28+
29+
30+
31+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
32+
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
33+
crossorigin="anonymous"></script>
34+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
35+
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
36+
crossorigin="anonymous"></script>
37+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
38+
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
39+
crossorigin="anonymous"></script>
40+
</body>
41+
42+
</html>

0 commit comments

Comments
 (0)