-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathCustomProjection.html
158 lines (149 loc) · 9.4 KB
/
CustomProjection.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
158
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>custom-projection.html</title>
<script type="module" src="../dist/mapml-viewer.js"></script>
<!--
To define a custom projection, the user needs to supply a projection definition
in a json template literal, per the customProjectionDefinition variable below.
It is anticipated that the format of the custom projection definition,
will be something based on a future json-based schema that is agreed to
as a web standard itself. There is an initiative underway to develop
such a format in the OGC CRS standards working group (R. Lott, pers. comm.
Jan 2021).
The custiom projection definition is then passed to the browser
"GeoReferencing API", which in the code below is 'polyfilled' by the
mapml-viewer.defineCustomProjection method. In the native version of this
API, we envisage an actual global window object member method, probably
not a method on the actual element (map or whatever, [which implies that
the result is scoped to the element instance, which is not the intention
here]). The reason we've implemented defineCustomProjection on the
mapml-viewer polyfill element is so that it has access to the module-level
"M" variable which is available across all instances of the element,
i.e. global to the module code at least.
In the native implementation, we imagine that window.defineCustomProjection
will define the projection globally, so that map elements,(in this case
represented by the polyfill mapml-viewer, but natively tbd) will be able
to use the projection attribute with the custom projection definition
"projection" member value (which will be returned by the defineCustomProjection
method if successful). In the polyfill below, because of the module-scoped
M variable, we were forced to not use the projection attribute, but to pass
the projection value to the element via the mapml-viewer.projection property,
a small inconvenience.
-->
<script type="module">
let customProjectionDefinition = `
{
"projection": "BNG",
"proj4string" : "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.999601 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.060,0.1502,0.2470,0.8421,-20.4894 +datum=OSGB36 +units=m +no_defs",
"code" : "EPSG:27700",
"origin" : [-238375,1376256],
"resolutions" : [896,448,224,112,56,28,14,7,3.5,1.75,0.875,0.4375,0.21875,0.109375],
"bounds" : [[-238375,0],[900000,1376256]],
"tilesize" : 256
}`;
let map = document.querySelector("mapml-viewer");
let cProjection = map.defineCustomProjection(customProjectionDefinition);
map.projection = cProjection;
</script>
<style>
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/* Specifying the `:defined` selector is recommended to style the map
element, such that styles don't apply when fallback content is in use
(e.g. when scripting is disabled or when custom/built-in elements isn't
supported in the browser). */
mapml-viewer:defined {
/* Responsive map. */
max-width: 100%;
/* Full viewport. */
width: 100%;
height: 100%;
/* Remove default (native-like) border. */
/* border: none; */
}
/* Pre-style to avoid FOUC of inline layer- and fallback content. */
mapml-viewer:not(:defined) > * {
display: none;
}
/* Ensure inline layer content is hidden if custom/built-in elements isn't
supported, or if javascript is disabled. This needs to be defined separately
from the above, because the `:not(:defined)` selector invalidates the entire
declaration in browsers that do not support it. */
layer- {
display: none;
}
</style>
<noscript>
<style>
/* Ensure fallback content (children of the map element) is displayed if
custom/built-in elements is supported but javascript is disabled. */
mapml-viewer:not(:defined) > :not(layer-) {
display: initial;
}
</style>
</noscript>
</head>
<body>
<!-- when using -->
<mapml-viewer zoom="4" lat="51.507222" lon="-0.1275" controls>
<layer- label="OS Roads tile map in BNG custom projection" checked>
<meta name="projection" content="BNG">
<extent units="BNG">
<input name="z" type="zoom" min="0" max="9"/>
<input name="y" type="location" units="tilematrix" axis="row" />
<input name="x" type="location" units="tilematrix" axis="column"/>
<link rel="tile" tref="https://api.os.uk/maps/raster/v1/wmts?key=TtPU7xWvj7AmV6uePZRYWFXuKVHzRTq7&tileMatrixSet=EPSG:27700&version=1.0.0&style=default&layer=Road_27700&service=WMTS&request=GetTile&tileCol={x}&tileRow={y}&tileMatrix={z}">
</extent>
</layer->
<!-- if these layers work, they are located near Glasgow, and demonstrate
the intention that a custom projection should be unremarkable and work
like its standard-defined counterparts. -->
<layer- label="BNG Geology WMS as TILES on top of OS Roads map">
<meta name="projection" content="BNG">
<extent units="BNG">
<input name="z" type="zoom" min="0" max="9"/>
<input name="y" type="location" units="tilematrix" axis="row" />
<input name="x" type="location" units="tilematrix" axis="column"/>
<link rel="tile" tref="https://api.os.uk/maps/raster/v1/wmts?key=TtPU7xWvj7AmV6uePZRYWFXuKVHzRTq7&tileMatrixSet=EPSG:27700&version=1.0.0&style=default&layer=Road_27700&service=WMTS&request=GetTile&tileCol={x}&tileRow={y}&tileMatrix={z}">
<input name="xmin" type="location" units="tilematrix" position="top-left" axis="easting" min="240755" max="261199" />
<input name="ymin" type="location" units="tilematrix" position="bottom-left" axis="northing" min="628735" max="658452" />
<input name="xmax" type="location" units="tilematrix" position="top-right" axis="easting" min="240755" max="261199" />
<input name="ymax" type="location" units="tilematrix" position="top-left" axis="northing" min="628735" max="658452" />
<input name="ixmin" type="location" units="pcrs" position="top-left" axis="easting" min="240755" max="261199" />
<input name="iymin" type="location" units="pcrs" position="bottom-left" axis="northing" min="628735" max="658452" />
<input name="ixmax" type="location" units="pcrs" position="top-right" axis="easting" min="240755" max="261199" />
<input name="iymax" type="location" units="pcrs" position="top-left" axis="northing" min="628735" max="658452" />
<link rel="tile" tref="https://map.bgs.ac.uk/arcgis/services/BGS_Detailed_Geology/MapServer/WMSServer?version=1.3.0&request=GetMap&layers=BGS.50k.Superficial.deposits&STYLES=default&format=image/png&crs=epsg:27700&BBOX={xmin},{ymin},{xmax},{ymax}&WIDTH=256&HEIGHT=256&z={z}">
<!-- <link rel="tile" tref="http://ogc.bgs.ac.uk/cgi-bin/BGS_1GE_Geology/wms?version=1.3.0&request=GetMap&layers=GBR_Kilmarnock_BGS_50k_ShrinkSwell&format=image/png&crs=epsg:27700&BBOX={xmin},{ymin},{xmax},{ymax}&WIDTH=256&HEIGHT=256&z={z}">-->
<input name="i" type="location" units="map" axis="i">
<input name="j" type="location" units="map" axis="j">
<input name="wd" type="width"/>
<input name="hg" type="height"/>
<link rel="query" tref="https://map.bgs.ac.uk/arcgis/services/BGS_Detailed_Geology/MapServer/WMSServer?version=1.3.0&request=GetFeatureInfo&i={i}&j={j}&radius=0&query_layers=BGS.50k.Superficial.deposits&info_format=text/html&layers=BGS.50k.Superficial.deposits&STYLES=default&format=image/png&crs=epsg:27700&BBOX={ixmin},{iymin},{ixmax},{iymax}&WIDTH={wd}&HEIGHT={hg}&z={z}">
</extent>
</layer->
<layer- label="BNG WMS" >
<meta name="projection" content="BNG">
<meta name="extent" content="xmin=54224.000100,ymin=5192.999900,xmax=655627.000000,ymax=1220319.000000">
<extent units="BNG">
<input name="xmin" type="location" rel="map" position="top-left" axis="easting" units="pcrs" min="240755" max="261199" />
<input name="ymin" type="location" rel="map" position="bottom-left" axis="northing" units="pcrs" min="628735" max="658452" />
<input name="xmax" type="location" rel="map" position="top-right" axis="easting" units="pcrs" min="240755" max="261199" />
<input name="ymax" type="location" rel="map" position="top-left" axis="northing" units="pcrs" min="628735" max="658452" />
<input name="w" type="width" min="1" max="10000" />
<input name="h" type="height" min="1" max="10000" />
<link rel="image" tref="http://ogc.bgs.ac.uk/cgi-bin/BGS_1GE_Geology/wms?version=1.3.0&request=GetMap&layers=GBR_Kilmarnock_BGS_50k_ShrinkSwell&format=image/png&crs=epsg:27700&BBOX={xmin},{ymin},{xmax},{ymax}&WIDTH={w}&HEIGHT={h}">
</extent>
</layer->
</mapml-viewer>
</body>
</html>