-
Notifications
You must be signed in to change notification settings - Fork 36
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(demo): new page for OSDP integration
- Loading branch information
Showing
7 changed files
with
369 additions
and
139 deletions.
There are no files selected for viewing
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
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
200 changes: 200 additions & 0 deletions
200
packages/geoview-core/public/templates/demos/demo-osdp-integration.html
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,200 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | ||
| <title>OSDP Integration - 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 href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:200,300,400,900|Merriweather" rel="stylesheet" /> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> | ||
| <link rel="stylesheet" href="css/style.css" /> | ||
| </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>OSDP Integration</strong></h1> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td><a href="./demos.html">Main</a><br /></td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| <table> | ||
| <tbody> | ||
| <tr> | ||
| <td><p>Demonstration of Open Science Data Portal Integration</p></td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
|
|
||
| <div class="map-title-holder"> | ||
| <h4 id="HMap1">OSDP Integration</h4> | ||
| </div> | ||
|
|
||
|
|
||
| <div id="mapSection"> | ||
| <div | ||
| id="Map1" | ||
| class="geoview-map" | ||
| data-lang="en" | ||
| data-config-url="./configs/OSDP/osdp-empty.json" | ||
| ></div> | ||
| </div> | ||
|
|
||
| <div> | ||
| <p>"Delete map div" will delete the div containing the map (if it exists). "Create map div" will create a div for the map (if it does not exist). | ||
| "Refresh map" will recreate the map (creating the div if it does not exist) according to the most recent config. "Update State" will update the config to the current map state.</p> | ||
| <button id="deleteMap" style="margin: 10px">Delete map div</button> | ||
| <button id="createMap" style="margin: 10px">Create map div</button> | ||
| <button id="refreshMap" style="margin: 10px">Refresh map</button> | ||
| <button id="updateState" style="margin: 10px">Update State</button> | ||
| </div> | ||
|
|
||
| <div class="selector"> | ||
| <textarea id="layerUuids" cols="40" rows="5" placeholder="Enter UUIDs"></textarea> | ||
| <br> | ||
| <button id="addLayers" style="margin: 10px">Add Layers</button> | ||
| </div> | ||
|
|
||
| <script src="codedoc.js"></script> | ||
| <script> | ||
| // Empty map config | ||
| let mapConfig = { | ||
| "map": { | ||
| "interaction": "dynamic", | ||
| "viewSettings": { | ||
| "projection": 3857 | ||
| }, | ||
| "basemapOptions": { | ||
| "basemapId": "transport", | ||
| "shaded": false, | ||
| "labeled": true | ||
| }, | ||
| "listOfGeoviewLayerConfig": [] | ||
| }, | ||
| "components": ["overview-map"], | ||
| "navBar": ["zoom", "fullscreen", "home", "location", "basemap-select"], | ||
| "appBar": { | ||
| "tabs": { | ||
| "core": ["geolocator", "export"] | ||
| } | ||
| }, | ||
| "footerBar": { | ||
| "tabs": { | ||
| "core": ["legend", "layers", "details", "data-table", "time-slider", "geochart"] | ||
| } | ||
| }, | ||
| "corePackages": [], | ||
| "theme": "geo.ca" | ||
| }; | ||
|
|
||
| function createMapDiv() { | ||
| if (!document.getElementById('Map1')) { | ||
| const newDiv = document.createElement('div'); | ||
| const id = document.createAttribute('id'); | ||
| id.value = 'Map1'; | ||
| newDiv.setAttributeNode(id); | ||
| document.getElementById('mapSection').appendChild(newDiv); | ||
| } | ||
| } | ||
|
|
||
| /** OSDP function | ||
| * Removes a map if it exists. | ||
| * | ||
| * @param map The map id. | ||
| * @returns Promise<void> | ||
| */ | ||
| function removeMap(map) { | ||
| return new Promise(resolve => { | ||
| if (this.cgpv.api.maps[map]) { | ||
| this.isRemoving = true; | ||
| this.cgpv.api.maps[map].remove(false) | ||
| .then(() => { | ||
| this.isRemoving = false; | ||
| resolve(); | ||
| }); | ||
| } else { | ||
| resolve(); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| /** OSDP function | ||
| * Adds layers to the map. | ||
| * | ||
| * @param layers Array of layers. | ||
| */ | ||
| function addLayers(layers) { | ||
| layers.forEach((layer) => { | ||
| this.cgpv.api.maps.Map1.layer.addGeoviewLayerByGeoCoreUUID(layer); | ||
| }); | ||
| } | ||
|
|
||
| // Delete Button============================================================================================================ | ||
| const deleteMapButton = document.getElementById('deleteMap'); | ||
|
|
||
| // add an event listener when a button is clicked | ||
| deleteMapButton.addEventListener('click', function () { | ||
| // Delete map div | ||
| document.getElementById('Map1').remove(); | ||
| }); | ||
|
|
||
| // Create Button============================================================================================================ | ||
| const createMapButton = document.getElementById('createMap'); | ||
|
|
||
| // add an event listener when a button is clicked | ||
| createMapButton.addEventListener('click', createMapDiv); | ||
|
|
||
| // Refresh Button============================================================================================================ | ||
| const refreshMapButton = document.getElementById('refreshMap'); | ||
|
|
||
| // add an event listener when a button is clicked | ||
| refreshMapButton.addEventListener('click', function () { | ||
| createMapDiv(); | ||
| return new Promise (resolve => { | ||
| removeMap('Map1') | ||
| .then(() => { | ||
| cgpv.api.createMapFromConfig('Map1', JSON.stringify(mapConfig), 800) | ||
| .then(() => { | ||
| resolve(); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| // Update Button============================================================================================================ | ||
| const updateMapButton = document.getElementById('updateState'); | ||
|
|
||
| // add an event listener when a button is clicked | ||
| updateMapButton.addEventListener('click', function () { | ||
| mapConfig = cgpv.api.maps.Map1.createMapConfigFromMapState(); | ||
| }); | ||
|
|
||
| // Add Layers Button============================================================================================================ | ||
| const addLayersButton = document.getElementById('addLayers'); | ||
|
|
||
| // add an event listener when a button is clicked | ||
| addLayersButton.addEventListener('click', function () { | ||
| let layerUuids = document.getElementById('layerUuids').value; | ||
| if (layerUuids.length = 1 && !layerUuids[0]) layerUuids = 'ccc75c12-5acc-4a6a-959f-ef6f621147b9'; | ||
| const uuidList = layerUuids.split('\n').join(',').split(','); | ||
| if (document.getElementById('Map1')) addLayers(uuidList); | ||
| }); | ||
|
|
||
| // initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready | ||
| cgpv.init(); | ||
| </script> | ||
| </body> | ||
| </html> |
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
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
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