Skip to content

Commit

Permalink
Deploying to gh-pages from @ 1e88c4a 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
@jolevesq
jolevesq committed Apr 24, 2024
0 parents commit 5bdb31d
Show file tree
Hide file tree
Showing 488 changed files with 876,758 additions and 0 deletions.
119 changes: 119 additions & 0 deletions add-panels.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!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 href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:200,300,400,900|Merriweather" rel="stylesheet"/><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> <button class="add-navbar-button-group-btn">Add Navbar Panel New Group</button></div><div id="mapWM" class="llwp-map" data-lang="en" data-config="{
'map': {
'interaction': 'dynamic',
'viewSettings': {
'zoom': 4,
'center': [-100, 60],
'projection': 3857
},
'basemapOptions': {
'basemapId': 'transport',
'shaded': false,
'labeled': true
}
},
'navBar': ['zoom', 'fullscreen', 'home', 'location', 'export'],
'appBar': ['geolocator', 'export'],
'components': ['overview-map'],
'corePackages': [],
'theme': 'dark',
'suportedLanguages': ['en']
}"></div><p></p><button type="button" class="collapsible">Configuration Snippet</button><pre id="mapWMCS" class="panel"></pre><hr/><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(function () {
console.log('api is ready');

//config snippets
createConfigSnippet();

//create snippets
createCodeSnippet();

// get add panel button element for WM map
var addAppbarPanelBtn = document.getElementsByClassName('add-appbar-panel-btn')[0];

// 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>`,
width: 200,
};

// call an api function to add a panel with a button in the default group
cgpv.api.maps['mapWM'].appBarButtons.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 button = {
tooltip: 'Test',
children: cgpv.react.createElement(cgpv.ui.elements.AppsIcon),
tooltipPlacement: 'left',
};

const panel = {
title: 'Test',
content: `<div>Test content</div>`,
width: 200,
};

// call an api function to add a panel with a button
cgpv.api.maps['mapWM'].navBarButtons.createNavbarButtonPanel(button, panel, null);
});

// 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 button = {
tooltip: 'Test',
children: cgpv.react.createElement(cgpv.ui.elements.OpenInBrowserIcon),
tooltipPlacement: 'left',
onClick: function () {
alert('test function');
},
};

// call an api function to add a panel with a button
cgpv.api.maps['mapWM'].navBarButtons.createNavbarButton(button, null);
});

// get add nav-bar button group element for WM map
var addNavbarButtonGroupBtn = document.getElementsByClassName('add-navbar-button-group-btn')[0];

// add nav-bar button group btn click event handler
// button will add a button panel on the nav-bar in a new group
addNavbarButtonGroupBtn.addEventListener('click', function (e) {
const button = {
id: 'id',
tooltip: 'Group',
tooltipPlacement: 'left',
children: cgpv.react.createElement(cgpv.ui.elements.GroupIcon), // comment
};

const panel = {
panelId: 'panerId',
title: 'Group',
content: `<div>Test content</div>`,
width: 400,
};

// call an api function to add a new button panel in the nav-bar in a new group
cgpv.api.maps['mapWM'].navBarButtons.createNavbarButtonPanel(button, panel, 'newGroup');
});
});</script></body></html>
104 changes: 104 additions & 0 deletions api-functions-test.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<!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 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"/><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>API Functions Test</strong></h1></td></tr><tr><td><a href="./index.html">Main</a><br/><a href="#HLNG1">1. Test get service metadata</a><br/></td></tr></tbody></table><table><tbody><tr><td>This page is used to showcase how we can get service metadata from an API call.</td></tr></tbody></table></div><div class="map-title-holder"><h4 id="HLNG1">1. Test get service metadata</h4><a class="ref-link" href="#top">Top</a></div><div id="LNG1" class="llwp-map" data-lang="en" data-config="{
'map': {
'interaction': 'dynamic',
'viewSettings': {
'zoom': 4,
'center': [-100, 60],
'projection': 3857
},
'basemapOptions': {
'basemapId': 'transport',
'shaded': false,
'labeled': true
}
},
'components': ['overview-map'],
'corePackages': [],
'theme': 'dark',
'suportedLanguages': ['en']
}"></div><p>These text areas show the metadata value for a ESRI and a WMS layer.</p><button type="button" class="collapsible">ESRI Metadata</button><pre id="esriMetadata" class="panel"></pre><hr/><button type="button" class="collapsible">WMS GetCapabilities</button><pre id="wmsMetadata" class="panel"></pre><hr/><button type="button" class="collapsible">Configuration Snippet</button><pre id="LNG1CS" class="panel"></pre><hr/><button type="button" class="collapsible">Code Snippet</button><pre id="codeSnippet" class="panel"></pre><hr/><button type="button" class="collapsible">Time dimension</button><div id="timeDimension" class="panel" style="margin-top: 10px"><span>URL:</span><input id="time-wms-url" value="https://geo.weather.gc.ca/geomet" style="width: 35%; margin: 10px"/><span>Layer:</span><input id="layer-wms-id" value="RADAR_1KM_RSNO" style="width: 25%; margin: 10px"/> <button id="btn-wms-time" style="margin: 10px">Get WMS dimension</button> <span><ul><li>https://datacube.services.geo.ca/web/aerial.xml halifax, victoria, top-layer</li><li>https://geo.weather.gc.ca/geomet RADAR_1KM_RSNO</li></ul></span><span>URL:</span><input id="time-esri-url" value="https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/historical_flood_event_en/MapServer/" style="width: 35%; margin: 10px"/><span>Layer:</span><input id="layer-esri-id" value="0" style="width: 25%; margin: 10px"/> <button id="btn-esri-time" style="margin: 10px">Get ESRI dimension</button> <span><ul><li>https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/historical_flood_event_en/MapServer/0</li><li>https://gisp.dfo-mpo.gc.ca/arcgis/rest/services/FGP/MSDI_Dynamic_Current_Layer/MapServer/0</li><li>https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/U2/FeatureServer/0</li><li>https://www5.agr.gc.ca/atlas/rest/services/app_agclimate_agclimat/agclimate_tx/ImageServer - no layer, image server</li></ul></span><span>OGC Dimension</span><input id="ogc-dimension" value='{"name":"time","units":"ISO8601","unitSymbol":null,"default":"2022-12-06T12:40:00Z","nearestValue":false,"values":"2022-12-06T09:40:00Z/2022-12-06T12:40:00Z/PT10M"}' style="width: 75%; margin: 10px;"/><button id="btn-dim-time" style="margin: 10px">Get dimension</button> <span><ul><li>{"name":"time","units":"ISO8601","unitSymbol":null,"default":"2022-12-06T12:40:00Z","nearestValue":false,"values":"2022-12-06T09:40:00Z/2022-12-06T12:40:00Z/PT10M"}</li><li>{"name":"time","units":"ISO8601","unitSymbol":null,"default":"1932-07-01T12:00:00Z","nearestValue":false,"values":"1932-07-01T12:00:00Z, 1950-07-01T12:00:00Z"}</li><li>{"name":"time","units":"ISO8601","unitSymbol":null,"default":"1932-07-01T12:00:00Z","nearestValue":false,"values":"1932-07-01T12:00:00Z/1950-07-01T12:00:00Z"}</li><li>{"name":"time","units":"ISO8601","unitSymbol":null,"default":"1932-07-01T12:00:00Z","nearestValue":false,"values":"1932-07-01T12:00:00Z/P80Y"}</li><li>{"name":"time","units":"ISO8601","unitSymbol":null,"default":"1932-07-01T12:00:00Z","nearestValue":false,"values":"1932/1950/P1Y"}</li></ul></span><button id="btn-clear" style="margin: 10px">Clear</button><pre id="time-console"></pre></div><hr/><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(() => {
console.log('api is ready');

// create snippets
createCodeSnippet();
createConfigSnippet();

cgpv.api.geoUtilities.getESRIServiceMetadata('https://maps-cartes.ec.gc.ca/arcgis/rest/services/CESI/MapServer/1').then((data) => {
console.log(data);
document.getElementById('esriMetadata').textContent = JSON.stringify(data, undefined, 2);
});

cgpv.api.geoUtilities.getWMSServiceMetadata('https://geo.weather.gc.ca/geomet', 'RAQDPS-FW.CE_PM2.5-DIFF-YAvg').then((data) => {
console.log(data);
document.getElementById('wmsMetadata').textContent = JSON.stringify(data, undefined, 2);
});

function find(searchKey, searchData, target, accum = []) {
for (const [key, value] of Object.entries(target)) {
if (key === searchKey && value === searchData) {
console.log(`${key}: ${value}`);
accum.push(target);
} else if (target[key] instanceof Array) {
target[key].forEach((f) => {
if (typeof f === 'object') {
find(searchKey, searchData, f, accum);
}
});
}
}
return accum;
}

// ==========================================================================================================================
// ESRI
var esriTime = document.getElementById('btn-esri-time');
esriTime.addEventListener('click', function (e) {
var url = document.getElementById('time-esri-url').value;
var layerName = document.getElementById('layer-esri-id').value;
var timeConsole = document.getElementById('time-console');
cgpv.api.geoUtilities.getESRIServiceMetadata(`${url.trim()}${layerName.trim()}`).then((data) => {
console.log(data);
var dimension = data.timeInfo !== undefined ? data.timeInfo : {};
var calcDimension = cgpv.api.dateUtilities.createDimensionFromESRI(dimension);
timeConsole.textContent = JSON.stringify(calcDimension, undefined, 2);
});
});
// ==========================================================================================================================

// ==========================================================================================================================
// WMS
var wmsTime = document.getElementById('btn-wms-time');
wmsTime.addEventListener('click', function (e) {
var url = document.getElementById('time-wms-url').value;
var layerName = document.getElementById('layer-wms-id').value;
var timeConsole = document.getElementById('time-console');
cgpv.api.geoUtilities.getWMSServiceMetadata(url.trim(), layerName.trim()).then((data) => {
console.log(data);
var layer = data.Capability.Layer;
var layerObject = find('Name', layerName, layer);
var dimension = layerObject.length > 0 && layerObject[0].Dimension !== undefined ? layerObject[0].Dimension[0] : {};

var calcDimension = cgpv.api.dateUtilities.createDimensionFromOGC(dimension);
timeConsole.textContent = JSON.stringify(calcDimension, undefined, 2);
});
});
// ==========================================================================================================================

// ==========================================================================================================================
// OGC Dimension
var ogcDimension = document.getElementById('btn-dim-time');
ogcDimension.addEventListener('click', function (e) {
var dim = document.getElementById('ogc-dimension').value;
var timeConsole = document.getElementById('time-console');
var calcDimension = cgpv.api.dateUtilities.createDimensionFromOGC(JSON.parse(dim));
timeConsole.textContent = JSON.stringify(calcDimension, undefined, 2);
});
// ==========================================================================================================================

var clear = document.getElementById('btn-clear');
clear.addEventListener('click', function (e) {
var timeConsole = document.getElementById('time-console');
timeConsole.textContent = '';
});
});</script></body></html>
25 changes: 25 additions & 0 deletions api-loads.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!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 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"/><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>API Loads</strong></h1></td></tr><tr><td><a href="./index.html">Main</a><br/><a href="#HLNG1">1. Load from URL keys</a><br/></td></tr></tbody></table><table><tbody><tr><td>This page is used to showcase how we can add geometries and layers from an API call.</td></tr></tbody></table></div><div class="map-title-holder"><h4 id="HLNG1">1. Load from URL keys</h4><a class="ref-link" href="#top">Top</a></div><div id="LNG1" class="llwp-map" data-lang="en" data-geometry-endpoint="https://b6ryuvakk5.execute-api.us-east-1.amazonaws.com/dev/collections/canadian-geospatial-platform/items/" data-config="{
'map': {
'interaction': 'dynamic',
'viewSettings': {
'zoom': 4,
'center': [-100, 60],
'projection': 3857
},
'basemapOptions': {
'basemapId': 'transport',
'shaded': false,
'labeled': true
}
},
'components': [],
'corePackages': [],
'theme': 'dark',
'suportedLanguages': ['en']
}"></div><p>This map will call pygeoapi API to gather the geometry from id provided by URL geoms parameter and load them on the map.</p><p>div configuration: <strong>data-geometry-endpoint</strong> = "https://b6ryuvakk5.execute-api.us-east-1.amazonaws.com/dev/collections/canadian-geospatial-platform/items/"</p><button type="button" class="collapsible">Configuration Snippet</button><pre id="LNG1CS" 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(function () {
console.log('api is ready');

//create snippets
createConfigSnippet();
});</script></body></html>
Loading

0 comments on commit 5bdb31d

Please sign in to comment.