Skip to content

Commit d9d6bbb

Browse files
prushforthprushforth
authored
Update index.html, add package.json to refer to mapml-viewer, not web-map (#145)
1 parent 0eef08c commit d9d6bbb

File tree

2 files changed

+108
-50
lines changed

2 files changed

+108
-50
lines changed

‎index.html‎

Lines changed: 49 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -3,60 +3,59 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width,initial-scale=1">
6-
<title>index.html</title>
7-
<script type="module" src="web-map.js"></script>
8-
<style>
9-
html,
10-
body {
11-
height: 100%;
12-
}
13-
* {
14-
margin: 0;
15-
padding: 0;
16-
}
17-
18-
/* Specifying the `:defined` selector is recommended to style the map
19-
element, such that styles don't apply when fallback content is in use
20-
(e.g. when scripting is disabled or when custom/built-in elements isn't
21-
supported in the browser). */
22-
map[is="web-map"]:defined {
23-
/* Responsive map. */
24-
max-width: 100%;
6+
<title>index-map.html</title>
7+
<script type="module" src="dist/mapml-viewer.js"></script>
8+
<style>
9+
html,
10+
body {
11+
height: 100%;
12+
}
13+
* {
14+
margin: 0;
15+
padding: 0;
16+
}
2517

26-
/* Full viewport. */
27-
width: 100%;
28-
height: 100%;
18+
/* Specifying the `:defined` selector is recommended to style the map
19+
element, such that styles don't apply when fallback content is in use
20+
(e.g. when scripting is disabled or when custom/built-in elements isn't
21+
supported in the browser). */
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+
}
2933

30-
/* Remove default (native-like) border. */
31-
/* border: none; */
32-
}
33-
34-
/* Pre-style to avoid FOUC of inline layer- and fallback content. */
35-
map[is="web-map"]:not(:defined) + img[usemap],
36-
map[is="web-map"]:not(:defined) > :not(area):not(.web-map) {
37-
display: none;
38-
}
39-
/* Ensure inline layer content is hidden if custom/built-in elements isn't
40-
supported, or if javascript is disabled. This needs to be defined separately
41-
from the above, because the `:not(:defined)` selector invalidates the entire
42-
declaration in browsers that do not support it. */
43-
layer- {
44-
display: none;
45-
}
46-
</style>
47-
<noscript>
48-
<style>
49-
/* Ensure client-side image map fallbacks are displayed if custom/built-in
50-
elements is supported but javascript is disabled. */
51-
map[is="web-map"]:not(:defined) + img[usemap] {
52-
display: initial;
53-
}
54-
</style>
55-
</noscript>
34+
/* Pre-style to avoid FOUC of inline layer- and fallback content. */
35+
mapml-viewer:not(:defined) > * {
36+
display: none;
37+
}
38+
/* Ensure inline layer content is hidden if custom/built-in elements isn't
39+
supported, or if javascript is disabled. This needs to be defined separately
40+
from the above, because the `:not(:defined)` selector invalidates the entire
41+
declaration in browsers that do not support it. */
42+
layer- {
43+
display: none;
44+
}
45+
</style>
46+
<noscript>
47+
<style>
48+
/* Ensure fallback content (children of the map element) is displayed if
49+
custom/built-in elements is supported but javascript is disabled. */
50+
mapml-viewer:not(:defined) > :not(layer-) {
51+
display: initial;
52+
}
53+
</style>
54+
</noscript>
5655
</head>
5756
<body>
58-
<map is="web-map" projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
57+
<mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls>
5958
<layer- label="CBMT" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked></layer->
60-
</map>
59+
</mapml-viewer>
6160
</body>
6261
</html>

‎package.json‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
{
2+
"name": "web-map-custom-element",
3+
"version": "0.8.0",
4+
"description": "web-map customized built-in HTML <map> or custom <mapml-viewer>",
5+
"keywords": [
6+
"web-components",
7+
"web",
8+
"maps",
9+
"map",
10+
"web-map",
11+
"geo-map",
12+
"map layer"
13+
],
14+
"main": "mapml-viewer.js",
15+
"module": "mapml-viewer.js",
16+
"author": "Maps for HTML Community Group",
17+
"repository": {
18+
"type": "git",
19+
"url": "git://github.com/Maps4HTML/Web-Map-Custom-Element.git"
20+
},
21+
"website": "http://maps4html.github.io/Web-Map-Custom-Element/",
22+
"bugs": {
23+
"url": "https://github.com/Maps4HTML/Web-Map-Custom-Element/issues"
24+
},
25+
"license": "W3C",
26+
"contributors": [
27+
{
28+
"name": "Maps for HTML community",
29+
"email": "[email protected]",
30+
"url": "https://github.com/Maps4HTML/Web-Map-Custom-Element/graphs/contributors"
31+
}
32+
],
33+
"scripts": {
34+
"test": "jest --detectOpenHandles --verbose --noStackTrace",
35+
"test:watch": "jest --detectOpenHandles --watch"
36+
},
37+
"dependencies": {},
38+
"devDependencies": {
39+
"@runette/leaflet-fullscreen": "1.0.4",
40+
"express": "^4.17.1",
41+
"grunt": "^1.1.0",
42+
"grunt-contrib-clean": "^2.0.0",
43+
"grunt-contrib-concat": "~1.0.0",
44+
"grunt-contrib-copy": "~1.0.0",
45+
"grunt-contrib-jshint": "~2.0.0",
46+
"grunt-contrib-uglify-es": "~3.3.0",
47+
"grunt-contrib-watch": "~1.1.0",
48+
"grunt-html": "~9.3.0",
49+
"grunt-rollup": "^11.3.0",
50+
"jest": "^26.1.0",
51+
"jest-playwright-preset": "^0.1.3",
52+
"leaflet": "~1.6.0",
53+
"path": "^0.12.7",
54+
"playwright": "^1.2.1",
55+
"proj4": "2.6.0",
56+
"proj4leaflet": "1.0.1",
57+
"rollup": "^2.23.1"
58+
}
59+
}

0 commit comments

Comments
 (0)