Skip to content

<map-input>, <map-link>, and <map-extent> custom element development #857

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

<map-input>, <map-link>, and <map-extent> custom element development #857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ddc0ddd
initial map-input setup
AliyanH May 24, 2023
1c168bc
implement Classes for different types of map-input types
AliyanH May 26, 2023
4770044
Update map-input implementation + Add support for tilematrix type=loc…
AliyanH May 31, 2023
b1298c1
initial map-link setup
AliyanH Jun 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,14 @@ module.exports = function(grunt) {
'dist/map-caption.js': ['src/map-caption.js'],
'dist/map-feature.js': ['src/map-feature.js'],
'dist/map-extent.js': ['src/map-extent.js'],
'dist/map-input.js': ['src/map-input.js'],
'dist/map-link.js': ['src/map-link.js'],
// temporary, will be bundled into mapml.js possibly
'dist/zoomInput.js': ['src/mapml/elementSupport/inputs/zoomInput.js'],
'dist/hiddenInput.js': ['src/mapml/elementSupport/inputs/hiddenInput.js'],
'dist/widthInput.js': ['src/mapml/elementSupport/inputs/widthInput.js'],
'dist/heightInput.js': ['src/mapml/elementSupport/inputs/heightInput.js'],
'dist/locationInput.js': ['src/mapml/elementSupport/inputs/locationInput.js'],
'dist/map-area.js': ['src/map-area.js'],
'dist/layer.js': ['src/layer.js'],
'dist/leaflet.js': ['dist/leaflet-src.js',
Expand Down
122 changes: 68 additions & 54 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@
/* Responsive map. */
max-width: 100%;

/* Full viewport. */
/* Full viewport.
width: 100%;
height: 100%;
height: 100%; */

/* Remove default (native-like) border. */
border: none;
Expand Down Expand Up @@ -72,58 +72,72 @@
</noscript>
</head>
<body>
<mapml-viewer projection="CBMTILE" zoom="2" lat="45" lon="-90" controls controlslist="nofullscreen geolocation">
<map-caption>A pleasing map of Canada</map-caption>
<layer- label="CBMT" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked></layer->
<layer- label="Hat Guy" checked>
<map-meta name="projection" content="CBMTILE"></map-meta>
<map-feature id="twohats" zoom="15" class="twohats">
<map-properties>
<table>
<tr>
<th>code</th>
<td>1200020</td>
</tr>
<tr>
<th>accuracy</th>
<td>26</td>
</tr>
<tr>
<th>valdate</th>
<td>1995</td>
</tr>
<tr>
<th>image</th>
<td><a href="https://www.veterans.gc.ca/eng/remembrance/memorials/national-inventory-canadian-memorials/details/9304">
<img src="https://www.veterans.gc.ca/images/remembrance/memorials/national-inventory-canadian-memorials/mem/35059-173a.jpg" width="60" height="60"/>
</a>
</td>
</tr>
<tr>
<th>theme</th>
<td>FO</td>
</tr>
<tr>
<th>type</th>
<td>2</td>
</tr>
<tr>
<th>elevation</th>
<td>61</td>
</tr>
<tr>
<th>altiaccu</th>
<td>5</td>
</tr>
</table>
</map-properties>
<map-geometry cs="gcrs">
<map-point>
<map-coordinates>-75.705278 45.397778</map-coordinates>
</map-point>
</map-geometry>
</map-feature>
<!--<mapml-viewer width="500" height="500" projection="OSMTILE" lat="10" lon="0" zoom="1">
<layer- label="OpenStreetMap" checked>
<map-extent units="OSMTILE">
<map-input name="z" type="zoom" value="18" min="0" max="18"></map-input>
<map-input name="domain" type="hidden" value="openstreetmap"></map-input>
<map-input name="x" type="location" units="tilematrix" axis="column" min="0" max="262144"></map-input>
<map-input name="y" type="location" units="tilematrix" axis="row" min="0" max="262144"></map-input>
<map-link rel="tile" tref="https://tile.{domain}.org/{z}/{x}/{y}.png"></map-link>
</map-extent>
</layer->
</mapml-viewer>
</mapml-viewer>-->



<mapml-viewer style="width: 500px; height: 500px;" projection="CBMTILE" zoom="0" lat="45.5052040" lon="-75.2202344"
controls>
<layer- label="Toporama" checked>
<map-meta name="zoom" content="min=4,max=5"></map-meta>
<map-meta name="extent"
content="zoom=19,top-left-easting=-7786477.0,top-left-northing=-927808.0,bottom-right-easting=7148753.0,bottom-right-northing=7928344.0"></map-meta>
<map-extent units="CBMTILE">
<map-input name="z" type="zoom" value="11" min="4" max="4" ></map-input>
<map-input name="w" type="width" ></map-input>
<map-input name="h" type="height" ></map-input>
<map-input name="xmin" type="location" units="pcrs" position="top-left" axis="easting" ></map-input>
<map-input name="ymin" type="location" units="pcrs" position="bottom-left" axis="northing" ></map-input>
<map-input name="xmax" type="location" units="pcrs" position="top-right" axis="easting" ></map-input>
<map-input name="ymax" type="location" units="pcrs" position="top-left" axis="northing" ></map-input>
<map-link rel="image"
tref="http://wms.ess-ws.nrcan.gc.ca/wms/toporama_en?SERVICE=WMS&REQUEST=GetMap&FORMAT=image/jpeg&TRANSPARENT=FALSE&STYLES=&VERSION=1.3.0&LAYERS=WMS-Toporama&WIDTH={w}&HEIGHT={h}&CRS=EPSG:3978&BBOX={xmin},{ymin},{xmax},{ymax}&m4h=t" ></map-link>
</map-extent>
</layer->
</mapml-viewer>


<!--<mapml-viewer style="width: 500px;height: 500px;" is="web-map" projection="CBMTILE" zoom="2" lat="45.5052040"
lon="-75.2202344" controls>
<layer- id="query" label="Fire" checked>
<map-extent units="CBMTILE">
<map-input name="z" type="zoom" value="18" min="0" max="18" ></map-input>
<map-input name="txmin" type="location" units="tilematrix" position="top-left" axis="easting" min="-2.003750834E7"
max="2.003750834E7" ></map-input>
<map-input name="tymin" type="location" units="tilematrix" position="bottom-left" axis="northing"
min="-2.003750834E7" max="2.003750834E7" ></map-input>
<map-input name="txmax" type="location" units="tilematrix" position="top-right" axis="easting" min="-2.003750834E7"
max="2.003750834E7" ></map-input>
<map-input name="tymax" type="location" units="tilematrix" position="top-left" axis="northing" min="-2.003750834E7"
max="2.003750834E7" ></map-input>
<map-link rel="tile"
tref="https://cwfis.cfs.nrcan.gc.ca/geoserver/public/wms?service=WMS&version=1.3.0&request=GetMap&layers=public:fdr_current&styles=&bbox={txmin},{tymin},{txmax},{tymax}&width=256&height=256&crs=EPSG:3978&FORMAT=image/png&TRANSPARENT=TRUE&m4h=t" ></map-link>
<map-input name="i" type="location" units="map" axis="i" ></map-input>
<map-input name="j" type="location" units="map" axis="j" ></map-input>
<map-input name="xmin" type="location" units="pcrs" position="top-left" axis="easting" min="-2.003750834E7"
max="2.003750834E7" ></map-input>
<map-input name="ymin" type="location" units="pcrs" position="bottom-left" axis="northing" min="-2.003750834E7"
max="2.003750834E7" ></map-input>
<map-input name="xmax" type="location" units="pcrs" position="top-right" axis="easting" min="-2.003750834E7"
max="2.003750834E7" ></map-input>
<map-input name="ymax" type="location" units="pcrs" position="top-left" axis="northing" min="-2.003750834E7"
max="2.003750834E7" ></map-input>
<map-input name="w" type="width" ></map-input>
<map-input name="h" type="height" ></map-input>
<map-link rel="query"
tref="https://cwfis.cfs.nrcan.gc.ca/geoserver/public/wms?i={i}&j={j}&service=WMS&version=1.3.0&request=GetFeatureInfo&layers=public:fdr_current&QUERY_LAYERS=current:fdr_current&styles=&bbox={xmin},{ymin},{xmax},{ymax}&width={w}&height={h}&srs=EPSG:3978&INFO_FORMAT=text/html&m4h=t" ></map-link>
</map-extent>
</layer->
</mapml-viewer>-->
</body>
</html>
Loading