The Canadian Geospatial Platform intends to deploy new infrastructure, tools and web integration of GeoCore, a new geospatial metadata lake library capable of supporting multiple metadata standards. In recognition of these desired capabilities, it needs a lightweight viewer to incorporate in their infrastructure. The need is to have a simple and flexible viewer to display geospatial data from GeoCore metadata lake on a map with limited functionalities.
GeoView mapping capabilities are based on OpenLayers open source viewer. The overall project uses the latest React framework version 17+. With this in mind, here is the list of the main dependencies
-
i18next to do localization in English and French
-
material-ui to do the layout
This project is now a monorepo and contains the following packages under the packages folder:
-
geoview-core - the core is responsible for managing APIs, layers, user interface and rendering the maps. The core will also expose API access to be used in internal, external packages and apps that uses the viewer.
-
geoview-details-panel - a package that displays a panel with details when a location / feature is clicked on the map.
-
geoview-basemap-panel - a package that displays a panel with a list of basemaps that can be selected to switch the map's basemap.
-
geoview-layers-panel - a package that displays a panel with a list of loaded layers and their legend.
-
geoview-footer-panel - a package that displays a footer panel with a list of tabs (legend, details, data grid, ...) for basic view.
-
geoview-swiper - a package that enable a swiper control to tooggle visibility of layers from one side to the other side of the swiper bar.
Our developers use Visual Studio Code with a few extentions to help linting and formatting
-
Prettier - Code formatter
-
ESLint
-
Better Comments
- click here to view generated typedoc for the GeoView core.
- click here to view best practicies and how to develop with GeoView.
see our contributing guide
$ git clone https://github.com/Canadian-Geospatial-Platform/geoview.git
$ cd geoview
$ npm install -g @microsoft/rush
It's always recommended to run the below command if you pull any changes.
$ rush update
If you need to re-download the modules you can run
$ rush update --full
$ rush build:core
Output build files will be placed under
packages/geoview-core/dist
$ rush serve
GeoView will be serve from http://localhost:8080/
$ rush build:core
$ rush host
The project will now serve inside your GitHub gh-pages at
https://[GITHUB-USERNAME].github.io/geoview/index.html
Make sure GitHub pages are active inside your origin repository
We'll go through the simplest way to use the Canadian Geospatial Platform Viewer.
For the moment, the released bundle of the viewer is hosted under:
https://canadian-geospatial-platform.github.io/geoview/public/cgpv-main.js
As the viewer is still in development, this bundle will always contain the latest commits.
To use the viewer on your own project, you need to include the above script in a script tag in the header of your HTML file
<!DOCTYPE html>
<html>
<head>
<script src="https://canadian-geospatial-platform.github.io/geoview/public/cgpv-main.js"></script>
</head>
<body>
...
</body>
</html>After including the viewer in your page, the viewer will allow you to load maps and draw them on your page.
There are multiple ways to load maps. Below we will show a basic usage of loading a map, if you want to see how you can load the map in all supported ways then click here.
The viewer allows you to load multiple maps on the page, you need to provide a different id for each map. Maps are added in the body tag of the HTML document. You can also load maps inside any JS framework such as React, Angular, VueJS.
For the viewer to recognize that you are trying to render a map on the page, you need to have a div element with class "llwp-map".
It's recommended to pass in an id attribute, if an id is not passed then the viewer will auto generate an id for you. If you want to use APIs that control this map then you will need to view all created maps on the page and figure out the id of the created map.
Tip: to view all maps on the page you can console out the maps using this function `console.log(cgpv.api.maps)
Below is an example of a simple map, with an id mapOne. This map will be using LCC projection (EPSG:3978) and will have a zoom of 4, a center of 60 latitude and -100 longtitude. The interaction of the map will be dynamic (meaning that you can move around and zoom in/out). It will use the transport, shaded with labels as the basemap. It will display an esri dynamic layer with multiple sub layers. The language of the map will be English.
<div
id="mapOne"
class="llwp-map"
style="height: 100vh;"
data-lang="en"
data-config="{
'map': {
'interaction': 'dynamic',
'viewSettings': {
'zoom': 4,
'center': [60, -100],
'projection': 3978
},
'basemapOptions': {
'basemapId': 'transport',
'shaded': true,
'labeled': true
},
'listOfGeoviewLayerConfig': [
{
'geoviewLayerId': 'esriDynamicLYR2',
'geoviewLayerName': {
'en': 'Energy',
'fr': 'Energy'
},
'metadataAccessPath': {
'en': 'https://maps-cartes.ec.gc.ca/arcgis/rest/services/CESI/MapServer',
'fr': 'https://maps-cartes.ec.gc.ca/arcgis/rest/services/CESI/MapServer'
},
'geoviewLayerType': 'esriDynamic',
'listOfLayerEntryConfig': [{ 'layerId': '0' }, { 'layerId': '6' }]
}
]
},
'theme': 'dark',
'components': ['app-bar', 'nav-bar', 'north-arrow', 'overview-map', 'footer-bar'],
'corePackages': [],
'suportedLanguages': ['en']
}"
></div>Once you add the above to the body of the html file. You must call the init function to allow the viewer to render the map.
<script>
// init functions, takes one parameter as a function callback. Any code inside the callback will run once map has finished rendering.
cgpv.init(function () {});
</script>Full example:
<!DOCTYPE html>
<html>
<head>
<script src="https://canadian-geospatial-platform.github.io/geoview/public/cgpv-main.js"></script>
</head>
<body>
<div
id="mapOne"
class="llwp-map"
style="height: 100vh;"
data-lang="en"
data-config="{... insert your configuration ...}"
></div>
<script>
// init functions, takes one parameter as a function callback. Any code inside the callback will run once map has finished rendering.
cgpv.init(function () {});
</script>
</body>
</html>