forked from Maps4HTML/MapML.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
157 lines (144 loc) · 13.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title><map> type extension custom element</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- Leaflet needs this here in order to find the default image icons -->
<script src="scripts/lib/leaflet-src.js"></script>
<link rel="import" href="web-map.html">
<style>
/* map must have a defined height and width, can be set either by @height/@width or with css properties */
web-map {
float: left;
padding-right: 20px;
padding-bottom: 10px;
height: 350px;
width: 640px;
}
.mapclasstest {
height: 300px;
width: 600px;
}
.transparency {
opacity: 0.2;
}
map-area#line {
fill: none;
stroke: purple;
stroke-width: 7px;
stroke-opacity: 1.0;
stroke-linecap: round;
}
</style>
</head>
<body>
<div>
<p>Want to help improve the <a href="http://maps4html.github.io/HTML-Map-Element/spec/">web-map</a> element? Join the <a href="https://www.w3.org/community/maps4html/">Maps For HTML Community Group</a>, and <a href="https://discourse.wicg.io/c/web-mapping">send us your comments</a>.</p>
<p>The following maps are a few examples of how the <a target="_blank" href="http://maps4html.github.io/HTML-Map-Element/spec/">web-map</a> <a target="_blank" href="https://github.com/Maps4HTML/Web-Map-Custom-Element">custom element</a> works. Each map is preceded by the markup that creates the map, and each map is annotated to describe and
point out the effect of the markup.</p>
<pre>
<web-map zoom="17" lat="45.398043" lon="-75.70683" width="700" height="400" controls>
<map-layer id="osm" src="http://geogratis.gc.ca/mapml/osm/" label="Open Street Map" checked hidden></map-layer>
<map-layer id="cbmt" src="http://geogratis.gc.ca/mapml/cbmt/" label="Canada Base Map"></map-layer>
<map-layer id="canvec" src="http://geogratis.gc.ca/mapml/canvec/50k/features/" label="CanVec+ 031G" class="transparency"></map-layer>
<map-layer id="marker" label="Marker layer" src="marker.mapml"></map-layer>
<map-area id="marker2" href='http://example.com/marker/' alt="Marker" coords="265,185" shape="marker"></map-area>
<map-area id="line" href='http://example.com/line/' alt="Line" coords="275,275,540,107" shape="line"></map-area>
<map-area id="doughnut" alt="Circle" href='http://example.com/circle/' coords="250,250,25" shape="circle" style="fill: white; stroke: aqua; stroke-width: 5px;fill-opacity: 0.0"></map-area>
<map-area id="hole" coords="250,250,7" shape="circle" style="fill: blue; stroke: none;fill-opacity: 0.3;"></map-area>
<map-area id="rect" href='http://example.com/rectangle/' alt="Rectangle" coords="345,290,415,320" shape="rect" style="fill: greenyellow; stroke: blue; stroke-width: 3px;fill-opacity: 0.4"></map-area>
<map-area id="poly" href='http://example.com/polygon/' alt="Polygon" coords="392,116,430,100,441,128,405,145" shape="poly" style="fill: pink; stroke: blue; stroke-width: 3px;fill-opacity: 0.4"></map-area>
</web-map>
</pre>
<!-- the @width / @height attributes take precedence over properties, but currently don't change to reflect updates -->
<web-map zoom="17" lat="45.398043" lon="-75.70683" width="700" height="400" controls>
<map-layer id="osm" src="http://geogratis.gc.ca/mapml/osm/" label="Open Street Map" checked hidden></map-layer>
<map-layer id="cbmt" label="Canada Base Map" src="http://geogratis.gc.ca/mapml/cbmt/" checked></map-layer>
<map-layer id="canvec" label="CanVec+ 031G" src="http://geogratis.gc.ca/mapml/canvec/50k/features/" class="transparency"></map-layer>
<!-- the HTML author can create MapML files and serve them as layers if they prefer -->
<map-layer id="marker" label="Marker layer" src="marker.mapml"></map-layer>
<!-- or the HTML author can create map 'area's (links) within the HTML document -->
<!-- <map-area id="wholemap" href='http://example.com/default/' alt="Default" shape="default" style="fill: salmon; stroke: none; fill-opacity: 0.01"></map-area>-->
<map-area id="marker2" href='http://example.com/marker/' alt="Marker" coords="265,185" shape="marker"></map-area>
<map-area id="line" href='http://example.com/line/' alt="Line" coords="275,275,540,107" shape="line"></map-area>
<map-area id="doughnut" alt="Circle" href='http://example.com/circle/' coords="250,250,25" shape="circle" style="fill: white; stroke: aqua; stroke-width: 5px;fill-opacity: 0.0"></map-area>
<map-area id="hole" coords="250,250,7" shape="circle" style="fill: blue; stroke: none;fill-opacity: 0.3;"></map-area>
<map-area id="rect" href='http://example.com/rectangle/' alt="Rectangle" coords="345,290,415,320" shape="rect" style="fill: greenyellow; stroke: blue; stroke-width: 3px;fill-opacity: 0.4"></map-area>
<map-area id="poly" href='http://example.com/polygon/' alt="Polygon" coords="392,116,430,100,441,128,405,145" shape="poly" style="fill: pink; stroke: blue; stroke-width: 3px;fill-opacity: 0.4"></map-area>
</web-map>
<div>
<p>This map illustrates a few of the features of the <a target="_blank" href="http://maps4html.github.io/HTML-Map-Element/spec/">web-map</a> <a target="_blank" href="https://github.com/Maps4HTML/Web-Map-Custom-Element">custom element</a>. </p>
<p>First, note
that the <a href="http://maps4html.github.io/HTML-Map-Element/spec/#the-web-map-element">web-map element</a> has a <a href="http://maps4html.github.io/HTML-Map-Element/spec/#attr-web-map-controls">controls</a> attribute. This requests the user-agent to present default controls, such as zoom and layer controls to the user.</p>
<p>
Also, there is no <a href="http://maps4html.github.io/HTML-Map-Element/spec/#attr-web-map-projection">projection attribute</a> on the web-map element, and as a result, the map
has the <a href="http://maps4html.github.io/HTML-Map-Element/spec/#projections">default projection</a> whose value is implicitly 'OSMTILE'. Consequently, all the <a href="http://maps4html.github.io/HTML-Map-Element/spec/#the-map-layer-element">map-layer</a> element children of the web-map element must support the OSMTILE projection, otherwise they will
be disabled by the web-map application. </p>
<p>The layers have an inherent projection that is unknown to the client until the URL is fetched. When the <a href="http://maps4html.github.io/MapML/spec/">MapML response</a> is parsed, the code enables/disables the layer in the
layer control checkbox based on whether the layer shares the projection of the map element, and is visible i.e. within the zoom and bounds of the map.</p>
<p>Next, the first map-layer child of web-map element is the #osm layer, which is declared <a href="http://maps4html.github.io/HTML-Map-Element/spec/#attr-layer-checked">checked</a> and
<a href="http://maps4html.github.io/HTML-Map-Element/spec/#attr-layer-hidden">hidden</a>. As a result, it is displayed on the map, but not in the controls.</p>
<p>Although the #cbmt layer shares the OSMTILE projection and it has a 'checked' attribute directing it to be displayed, when the page is loaded the map discovers that the layer
resource does not serve the zoom level at which the map initially loads,
and therefore it is initially disabled in the layer control. Zooming out a few levels should result in the #cbmt layer being enabled/available in the layer control and displayed
on the map. This behaviour also illustrates the <a target="_blank" href="http://www.w3.org/TR/SVG/render.html#PaintersModel">painters model</a> in which map-layer elements which are later in document order are drawn on top of earlier map-layer elements</p>
<p>The #canvec layer is a vector feature layer in the <a href="http://maps4html.github.io/MapML/spec/#projections">MapML "WGS84" projection</a>. The layer references a linked CSS stylesheet.
The WGS84 projection is a kind of 'wildcard' coordinate reference system that can be overlayed on any projected coordinate reference system known to MapML.
It is initially available/enabled in the layer control because it overlaps the web-map element's initial extent and zoom level.
If you pan or zoom the map, it too should be enabled / disabled automatically based on the discovered <a target="_blank" href="http://maps4html.github.io/MapML/spec/#the-extent-element">extent</a>.
</p>
<p>
The map includes a few <a href="http://maps4html.github.io/HTML-Map-Element/spec/#the-map-area-element">map-area</a> links, which are similar to the
<a target="_blank" href="http://www.w3.org/TR/html5/embedded-content-0.html#the-map-element">map</a> element's <a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-area-element">area</a>
element children. These elements create a style-able map feature and optionally declare it as a hyperlink. There are two additional
shape attribute values allowed compared to the area element: <a href="http://maps4html.github.io/HTML-Map-Element/spec/#projection-values">marker and line</a>.
The marker value designates a point feature to be symbolized. The intention of the implementation is to
allow such markers to be styled with CSS and represented by SVG graphic symbols. The current custom element implementation uses a fixed familiar place marker icon image.
</p>
<p>Finally, the layer control shows a layer called "Marker layer", which is a simple MapML file created by the HTML author within their domain. This shows the different behaviour between
features encoded in MapML and included as layers versus features encoded in HTML map-area elements and included on the map as links.</p>
</div>
<div style='clear: both'></div>
<br>
<hr>
</div>
<div>
<pre>
<web-map zoom="2" lat="67.101360" lon="-91.121469" projection="CBMTILE" width="640" height="480" controls>
<map-layer src="http://geogratis.gc.ca/mapml/osm/" label="Open Street Map" checked></map-layer>
<map-layer src="http://geogratis.gc.ca/mapml/cbmtlcc/" label="Canada Base Map" checked></map-layer>
<map-layer src="http://geogratis.gc.ca/mapml/canvec/50k/features/" label="CanVec+ 031G" class="transparency"></map-layer>
</web-map>
</pre>
<web-map zoom="2" lat="67.101360" lon="-91.121469" projection="CBMTILE" width="640" height="480" controls>
<map-layer id="osm2" label="Open Street Map" src="http://geogratis.gc.ca/mapml/osm/" checked></map-layer>
<map-layer id="cbmtlcc" label="Canada Base Map" src="http://geogratis.gc.ca/mapml/cbmtlcc/" checked></map-layer>
<map-layer id="canvec2" label="CanVec+ 031G" src="http://geogratis.gc.ca/mapml/canvec/50k/features/" class="transparency"></map-layer>
</web-map>
<p>This map declares the 'CBMTILE' projection, which is a <a href="http://maps4html.github.io/MapML/spec/#projections">coordinate reference system</a> in the Lambert Conformal Conic projection in MapML. The Open Street Map layer is
in the Web Mercator (OSMTILE) projection, and is therefore disabled/unavailable, no matter how much you zoom and pan.</p>
<p>If you zoom in on the Ottawa region displayed in the first map above (the map projected in the default OSMTILE projection), you can see that the #canvec2 layer
becomes enabled in the layer control, such that you can click/tap to enable it.</p>
</div>
<div style='clear: both'></div>
<br>
<hr>
<div>
<p>The final example is the Arctic Ocean Base Map, which uses the 'APSTILE' projection, which is a <a href="http://maps4html.github.io/MapML/spec/#projections">coordinate reference system</a> based on the Polar Stereographic projection in MapML:</p>
<pre>
<web-map zoom="3" lat="90.0" lon="0.0" projection="APSTILE">
<map-layer src="http://geogratis.gc.ca/mapml/arctic/" label="Arctic Ocean Base Map" checked hidden></map-layer>
<map-area shape="marker" href='http://example.com/santa/' alt="North Pole" coords="320,175" id="northPole"></map-area>
</web-map>
</pre>
<web-map zoom="3" lat="90.0" lon="0.0" projection="APSTILE">
<map-layer label="Arctic Ocean Base Map" src="http://geogratis.gc.ca/mapml/arctic/" checked hidden></map-layer>
<map-area shape="marker" href='http://example.com/santa/' alt="North Pole" coords="320,175" id="northPole"></map-area>
</web-map>
<p>This map illustrates a dramatically different projection, as well as a map-area link for the North Pole. Additionally, you can see that
the lack of a 'controls' attribute on the web-map element results in a clean map that looks like an image but behaves like a map.</p>
<p>The Arctic Ocean Base Map Terms of Use are available from <a href="http://www.arcgis.com/home/item.html?id=305cb48615d743f89fe70ff3a819e59e">ArcGIS.com</a></p>
</div>
</body>
</html>