-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Deploying to gh-pages from @ 122b017 🚀
- Loading branch information
0 parents
commit c0ce730
Showing
763 changed files
with
941,496 additions
and
0 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
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,97 @@ | ||
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Add Layers Panel - 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>Add 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><option value="fe83a604-aa5a-4e46-903c-685f8b0cc33c"></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> |
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,113 @@ | ||
<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Add Panels - 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"/><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>Add Panels</strong></h1></td></tr><tr><td><a href="./index.html">Main</a><br/></td></tr></tbody></table><table><tbody><tr><td>This page is used to showcase adding panels to the app-bar and adding panels and buttons to the navbar.</td></tr></tbody></table></div><div class="toolbar"><button class="add-appbar-panel-btn">Add Appbar Panel</button> <button class="add-navbar-panel-btn">Add Navbar Panel</button> <button class="add-navbar-button-btn">Add Navbar Button</button> <input id="navbar-button-group-name" placeholder="Enter group name" value="groupName1"/></div><div id="mapWM" class="geoview-map" data-lang="en" data-config="{ | ||
'map': { | ||
'interaction': 'dynamic', | ||
'viewSettings': { | ||
'projection': 3857 | ||
}, | ||
'basemapOptions': { | ||
'basemapId': 'transport', | ||
'shaded': false, | ||
'labeled': true | ||
} | ||
}, | ||
'navBar': ['zoom', 'fullscreen', 'home', 'location'], | ||
'appBar': { | ||
'tabs': { | ||
'core': ['geolocator', 'export'] | ||
} | ||
}, | ||
'components': ['overview-map'], | ||
'corePackages': [], | ||
'theme': 'geo.ca' | ||
}"></div><p></p><button type="button" class="collapsible">Code Snippet</button><pre id="codeSnippet" class="panel"></pre><script src="codedoc.js"></script><script>// initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready | ||
cgpv.init((mapId) => { | ||
if (mapId === 'mapWM') { | ||
// get add panel button element for WM map | ||
var addAppbarPanelBtn = document.getElementsByClassName('add-appbar-panel-btn')[0]; | ||
|
||
// get the input for the group name | ||
var navbarButtonGroupNameInput = document.getElementById('navbar-button-group-name'); | ||
|
||
// add app-bar panel btn click event handler | ||
// button will open a panel on the app-bar | ||
addAppbarPanelBtn.addEventListener('click', function (e) { | ||
const button = { | ||
id: 'AppbarPanelButtonId', | ||
tooltip: 'Test', | ||
tooltipPlacement: 'right', | ||
children: cgpv.react.createElement(cgpv.ui.elements.AppsIcon), | ||
}; | ||
|
||
const panel = { | ||
panelId: 'AppbarPanelId', | ||
title: 'Test', | ||
content: `<div>Test content</div>`, | ||
convertHtmlContent: true, | ||
width: 200, | ||
}; | ||
|
||
// call an api function to add a panel with a button in the default group | ||
cgpv.api.maps['mapWM'].appBarApi.createAppbarPanel(button, panel, null); | ||
}); | ||
|
||
// get add nav-bar panel button element for WM map | ||
var addNavbarPanelBtn = document.getElementsByClassName('add-navbar-panel-btn')[0]; | ||
// add nav-bar panel btn click event handler | ||
// button will open a panel on the nav-bar | ||
addNavbarPanelBtn.addEventListener('click', function (e) { | ||
const groupName = navbarButtonGroupNameInput.value; | ||
|
||
if (groupName === '') { | ||
alert('Enter a value group name'); | ||
return; | ||
} | ||
const button = { | ||
tooltip: 'Test', | ||
children: cgpv.react.createElement(cgpv.ui.elements.AppsIcon), | ||
tooltipPlacement: 'left', | ||
}; | ||
|
||
const panel = { | ||
title: 'Panel Title', | ||
content: `<div><p>Vestibulum in fringilla tortor. Aliquam placerat odio nec urna consequat tincidunt eu sit amet mauris.</p><p>Donec vestibulum tellus ex, a venenatis urna finibus quis. Sed venenatis nisi porttitor ex laoreet auctor. </p></div>`, | ||
convertHtmlContent: true, | ||
width: 400, | ||
}; | ||
|
||
// call an api function to add a panel with a button | ||
cgpv.api.maps['mapWM'].navBarApi.createNavbarButtonPanel(button, panel, groupName); | ||
}); | ||
|
||
// get add nav-bar button element for WM map | ||
var addNavbarButtonBtn = document.getElementsByClassName('add-navbar-button-btn')[0]; | ||
|
||
// add nav-bar button btn click event handler | ||
// button will call a function | ||
addNavbarButtonBtn.addEventListener('click', function (e) { | ||
const groupName = navbarButtonGroupNameInput.value; | ||
|
||
if (groupName === '') { | ||
alert('Enter a value group name'); | ||
return; | ||
} | ||
|
||
const button = { | ||
tooltip: `Test (${groupName})`, | ||
children: cgpv.react.createElement(cgpv.ui.elements.OpenInBrowserIcon), | ||
tooltipPlacement: 'left', | ||
onClick: function () { | ||
alert('You clicked on a navbar test button'); | ||
}, | ||
}; | ||
|
||
// call an api function to add a panel with a button | ||
cgpv.api.maps['mapWM'].navBarApi.createNavbarButton(button, groupName); | ||
}); | ||
} | ||
}); | ||
|
||
// create snippets | ||
window.addEventListener('load', () => { | ||
createCodeSnippet(); | ||
createConfigSnippet(); | ||
});</script></body></html> |
Binary file not shown.
Oops, something went wrong.