forked from Canadian-Geospatial-Platform/geoview
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Johann Levesque
authored and
Johann Levesque
committed
Jun 17, 2024
1 parent
eb3db9c
commit 237acdf
Showing
36 changed files
with
719 additions
and
332 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| <!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Canadian Geospatial Platform Viewer</title><link rel="shortcut icon" href="./favicon.ico"/><meta name="msapplication-TileColor" content="#da532c"/><meta name="msapplication-config" content="./img/browserconfig.xml"/><meta name="theme-color" content="#ffffff"/><meta name="msapplication-TileColor" content="#da532c"/><meta name="theme-color" content="#ffffff"/><link rel="stylesheet" href="css/style.css"/><style>li.source-link { | ||
| cursor: pointer; | ||
| color: #6082b6; | ||
| } | ||
|
|
||
| .sourceLinkCopied { | ||
| position: fixed; | ||
| top: 6px; | ||
| right: 6px; | ||
| background-color: darkblue; | ||
| color: white; | ||
| padding: 16px; | ||
| font-size: 16px; | ||
| min-width: 150px; | ||
| text-align: center; | ||
| border-radius: 5px; | ||
| z-index: 1; | ||
| }</style><script src="cgpv-main.js"></script></head><body><div class="header-table"><table><tbody><tr><td><img class="header-logo" alt="logo" src="./img/Logo.png"/></td><td class="header-title"><h1><strong>Package - Layers Panel</strong></h1></td></tr><tr><td><a href="./index.html">Main</a><br/><a href="#HUC1">Default Configuration</a><br/></td></tr></tbody></table><table><tbody><tr><td>This page is used to showcase loading "Layers Panel" with the ability to add various layer types.</td></tr></tbody></table></div><div class="map-title-holder"><h4 id="HUC1">1. Default Configuration</h4><a class="ref-link" href="#top">Top</a></div><select name="projections" id="projections"><option value="3857">Web Mercator (3857)</option><option value="3978">LCC (3978)</option></select> <button type="button" onclick="reloadMap()">Set Projection</button><div id="mapWM" class="geoview-map" data-lang="en" data-config="{ | ||
| 'map': { | ||
| 'interaction': 'dynamic', | ||
| 'viewSettings': { | ||
| 'projection': 3857 | ||
| }, | ||
| 'basemapOptions': { | ||
| 'basemapId': 'transport', | ||
| 'shaded': true, | ||
| 'labeled': true | ||
| }, | ||
| 'listOfGeoviewLayerConfig': [] | ||
| }, | ||
| 'theme': 'geo.ca', | ||
| 'components': [], | ||
| 'footerBar': { | ||
| 'tabs': { | ||
| 'core': ['legend', 'layers', 'details', 'data-table', 'geochart', 'time-slider'] | ||
| } | ||
| }, | ||
| 'corePackages': [], | ||
| 'externalPackages': [], | ||
| 'appBar': { | ||
| 'tabs': { | ||
| 'core': ['legend', 'layers', 'details', 'data-table', 'geochart'] | ||
| } | ||
| } | ||
| }"></div><h4>Add Layer Examples</h4><div style="font-size: smaller"><div>ESRI Feature Service Layer<ul><li class="source-link">https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/forest_industry_hotspots_en/MapServer/0</li></ul></div><div>ESRI Dynamic Service Layer<ul><li class="source-link">https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/historical_flood_event_en/MapServer</li><li class="source-link">https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/forest_industry_hotspots_en/MapServer</li></ul></div><div>ESRI Image Layer<ul><li class="source-link">https://www5.agr.gc.ca/atlas/rest/services/app_agclimate_agclimat/agclimate_tx/ImageServer/</li></ul></div><div>WMS Layer<ul><li class="source-link">https://ows.mundialis.de/services/service</li><li>https://datacube.services.geo.ca/ows/msi?request=GetCapabilities&service=wms&version=1.3.0&layers=msi</li></ul></div><div>WFS Layer<ul><li class="source-link">https://ahocevar.com/geoserver/wfs?REQUEST=GetCapabilities&VERSION=2.0.0&SERVICE=WFS</li></ul></div><div>XYZ Layer<ul><li class="source-link">https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}</li></ul></div><div>GeoJson Layer<ul><li class="source-link">https://canadian-geospatial-platform.github.io/geoview/public/datasets/geojson/polygons.json</li><li class="source-link">https://canadian-geospatial-platform.github.io/geoview/public/datasets/geojson/lines.json</li><li class="source-link">https://canadian-geospatial-platform.github.io/geoview/public/datasets/geojson/points.json</li></ul></div><div>OGC API Feature Layer<ul><li class="source-link">https://b6ryuvakk5.execute-api.us-east-1.amazonaws.com/dev</li><li class="source-link">https://b6ryuvakk5.execute-api.us-east-1.amazonaws.com/dev/collections/lakes</li></ul></div><div>GeoPackage Layer<ul><li class="source-link">https://canadian-geospatial-platform.github.io/geoview/public/datasets/geopackages/rivers.gpkg</li></ul></div><div>CSV Layer<ul><li class="source-link">https://canadian-geospatial-platform.github.io/geoview/public/datasets/csv-files/Station_List_Minus_HQ-MELCC.csv</li></ul></div><div style="margin-bottom: 20px"><div>GeoCore UUID Layer</div><div style="margin-top: 10px; margin-left: 20px"><input id="selectGeoCore" list="geocoreids" style="width: 300px"/><datalist id="geocoreids"><option value="21b821cf-0f1c-40ee-8925-eab12d357668"></option><option value="ccc75c12-5acc-4a6a-959f-ef6f621147b9"></option><option value="0fca08b5-e9d0-414b-a3c4-092ff9c5e326"></option><option value="03ccfb5c-a06e-43e3-80fd-09d4f8f69703"></option><option value="ea4c0bdb-a63f-49a4-b14a-09c1560aad0b"></option><option value="0fe65119-e96e-4a57-8bfe-9d9245fba06b"></option><option value="ed9b204b-590c-4b17-9703-f6e167acd6c6"></option></datalist><button type="button" onclick="addGeocore()">Add layer</button></div></div><hr/><button type="button" class="collapsible">Configuration Snippet</button><pre id="mapWMCS" class="panel"></pre><hr/><script src="codedoc.js"></script><script>function addGeocore() { | ||
| // Precond | ||
| if (!document.getElementById('selectGeoCore').value) return; | ||
|
|
||
| // Add the layer on the map | ||
| cgpv.api.maps['mapWM'].layer.addGeoviewLayerByGeoCoreUUID(document.getElementById('selectGeoCore').value); | ||
| } | ||
|
|
||
| document.addEventListener('DOMContentLoaded', function () { | ||
| var sourceLinks = document.querySelectorAll('li.source-link'); | ||
|
|
||
| sourceLinks.forEach(function (link) { | ||
| link.addEventListener('click', function () { | ||
| // Get the content to copy | ||
| var contentToCopy = link.innerHTML; | ||
|
|
||
| // Create a temporary textarea element to copy the content | ||
| var textarea = document.createElement('textarea'); | ||
| textarea.value = contentToCopy; | ||
| document.body.appendChild(textarea); | ||
|
|
||
| // Select the content and copy it to the clipboard | ||
| textarea.select(); | ||
| document.execCommand('copy'); | ||
|
|
||
| // Remove the temporary textarea | ||
| document.body.removeChild(textarea); | ||
|
|
||
| // Show a message for 5 seconds | ||
| var message = document.createElement('div'); | ||
| message.classList.add('sourceLinkCopied'); | ||
| message.innerHTML = 'Copied to clipboard'; | ||
| document.body.appendChild(message); | ||
| setTimeout(function () { | ||
| // Remove the message after 5 seconds | ||
| document.body.removeChild(message); | ||
| }, 2000); | ||
| }); | ||
| }); | ||
| });</script><script>function reloadMap() { | ||
| cgpv.api.maps['mapWM'].setProjection(Number(document.getElementById('projections').value)); | ||
| } | ||
|
|
||
| // initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready | ||
| cgpv.init((mapId) => { | ||
| // write some code ... | ||
| }); | ||
|
|
||
| // create snippets | ||
| window.addEventListener('load', () => { | ||
| createCodeSnippet(); | ||
| createConfigSnippet(); | ||
| });</script></div></body></html> |
Large diffs are not rendered by default.
Oops, something went wrong.
Binary file not shown.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "orientation": "vertical", | ||
| "keyboardOffset": 10, | ||
| "layers": [] | ||
| } |
Oops, something went wrong.