Skip to content

Asset map for the main page of CIOOS - SIOOC sites

Notifications You must be signed in to change notification settings

NeZanyat/cioos-siooc-assetmap

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

64 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Assetmap starting point

Containt basic html and javascript to be embedded in a HTML page.

This isn't the final project nor the Wordpress plugin.

Use Flask to enable a simple proxy to test CKAN API access and serve static file.

Installation

Tested with python 3.7 on windows 10

  • Create virtual environment for the project
    • python -m venv path/to/project/venv
  • activate environment
    • path/to/project/venv/Script/activate
  • install dependencies
    • pip install -r requirements.txt
  • Execute Flask server
    • python main.py

Docker installation

­> git clone <project_url>
> cd <root_of_project>
> docker-compose up

Configuration files

ckan.json

Link to the CKAN instance:

  • base_url : Homepage of the CKAN instance to redirect user to.
  • api_url : API URL to access the desired CKAN instance. This is use by the proxy server.
  • dataset_url : url to follow to direct a user to the dataset page of the ckan instance.
  • organization_url : url to follow to direct a user to the organization page of the ckan instance.
  • access_url : url to use to access the API. /ckan/ is the default proxy.
  • add_language_url : Boolean to enable the desired language to be displayed by CKAN. The language code is added after url be before the id.
  • start_bbox: Initial bounding box to restrict search to.
  • usejsonp: Contact the CKAN API directly via JSONP ( remove the requirement of a proxy )
  • page_size: Maximum number of dataset returned per call the to API.
  • restrict_json_return: Use "fl" in the package search call to limit the item serialized per dataset. Only supported in the latest version of CKAN and require special consideration with Solr configurations.
  • support_time: Can use minimum and maximum time interval in search criteria (in development)
  • support_vertical: Can use minimum and maximum vertical (depth) in search criteria (in development)
  • support_eov: Add variable search criteria in eov tag and look in eov for vraible ifentifier (in development)
  • use_basic_auth: Add http basic authoization to the query (in debug, might be remove)

Example of the configuration to use open.canada.ca catalog

{
    "base_url":"http://open.canada.ca/",
    "api_url":"http://open.canada.ca/data/api/",
    "dataset_url": "http://open.canada.ca/data/",
    "organization_url": "http://open.canada.ca/data/",
    "access_url":"/ckan/",
    "add_language_url": true,
    "start_bbox": [-118, 36, -40, 63],
    "usejsonp": true,
    "page_size": 40,
    "restrict_json_return": false,
    "support_time": false,
    "support_vertical": false,
    "support_eov": false,
    "use_basic_auth": false
}

filters.json

All categories, variables and CKAN search criteria.

Categories contains a list of variable. Either element has the transalted lable, icon and if the item is enabled or not. Each category is reprensented by a clickable icon at the top left corner. All the variables of a category are grouped inside a panel. This panel is shown when the category icon is clicked.

{
    categories: [{
        "id": "physic",
        "label":
        {
            "fr": "PHYSIQUE",
            "en": "PHYSICS"
        },
        "icon": "physics.png",
        "enabled": true,
        "variables":[{}]
    }]
}

Each variable defines the text used in the ckan package seach. This is a temporary solution until the search criteria and schema definition is established. The same "ckantext" is used to map the variable to a dataset via the tag/keyword. This is still a temporary solution. The translation of the search term might be necessary if no tranlsation in the ckan dataset is available. The icon files are in /images directory and the thumbnail in /images/thumbnails directory. As of now, no translation for the icon is planned.

    "variables":[{
        "id": "var_salinity",
        "icon":"seaWaterSalinity.png",
        "label":
        {
            "fr":"Salinité",
            "en":"Salinity"
        },
        "ckantext":["salinity"],
        "eov":["salinity"],
        "enabled": true
    }]

map.json

Display style and initial map attributes.

start-view is mapped to the ol.view use by the openlayer map. the center element is in WGS84( ESPG:4326 ) and transform to the correct map projection system during creation.

"start_view": {
        "zoom": 4,
        "minZoom": 2,
        "center": [-68, 48]
    }

The Polystyle is used for the display of rectangular extent. Stroke is used for the outer rectangle region and Fill is for the rectangle interior. Those element are use as is in the vector layor style creation. Other item can be added is supported by openlayer.

"Polystyle":{
        "Stroke":{
            "color": "blue",
            "lineDash": [4],
            "width": 3
        },
        "Fill":{
            "color": "rgba(0, 0, 255, 0.1)"
        }
    }

Back layer configuration still to implement. Use OpenStreetMap for now.

Some information for the basic icon clustering style are define in the "icon_cluster" object. The distance between point, radius and colors of the circle are available.

"icon_cluster": {
    "distance": 40,
    "minimum":{
        "cluster_value": 5,
        "circle_radius": 10,
        "text_color": "#fff",
        "fill_color": "#3399CC",
        "stroke_color": "#fff"
    },
    "maximum":{
        "cluster_value": 25,
        "circle_radius": 20,
        "text_color": "#fff",
        "fill_color": "#3399CC",
        "stroke_color": "#fff"
    }
}

background layer

Three type of background layer are available: OpenStreetMap, Bing map and custom WMS

OpenStreetMap

{
    "name": "osm",
    "type": "OpenStreetMap"
    "attribution"{
        "fr": "",
        "en": ""
    },
    "label": {
        "fr": "",
        "en": ""
    }
}

Bing Maps

{
    "name": "bing",
    "type":  "Bing",
    "key": "",
    "imagerySet": ""
    "attribution"{
        "fr": "",
        "en": ""
    },
    "label": {
        "fr": "",
        "en": ""
    }
}

Custom WMS

{
    "name": "name_of_map",
    "type": "wms",
    "server_url": "https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv?",
    "layer_name": "gebco_latest",
    "serverType": "geoserver",
    "version": "",
    "style": "",
    "parameters": ""
    "attribution"{
        "fr": "",
        "en": ""
    },
    "label": {
        "fr": "",
        "en": ""
    }
}

ui_str.json

Translation strings.

List of strings defined by an name and the different version per language supported.

"dataset_title": {
    "fr": "Titre du jeu de données",
    "en": "Dataset title"
  }

The class StringTranslator use this configuration and has method to retrieve the correct string for a specified language, the one set as current or the default language.

CKAN Schema and API dependencies

search API

THE CKAN API action "package_search" is used to list all dataset, in a paginated manner. The bounding box, text and some other filters can be used as search criterias.

variables

Variables needs to be clearly identified in the CKAN schema. The asset map could agregate more than one specific variable under the same name and use to configuration to regroup them. For example, there is "temperature" as a selectable variable but there can be "surface water temperature", "air temperature", "underwater temperature" as variable type constant coming from the metadata file and listed as a tag in the CKAN schema. The "temperature" variabe selection would encompass all of them.

tools

The interface need to show the user a link to the available tools to display, manipulate or download the specific dataset. Ther need to be a way to identified or compute the link based on the information in the CKAN schema. This could be as resources to the dataset or specific item. Fo example, if the dataset in accessible via ERDAPP, the url need to be available or the base ERDDAP url availbale in a configuration and using the id or other info, retwrite the URL.

Python Proxy

During development, you can use the python Flask project as the static file server and as proxy.

Proxy auth.json

if a file auth.json is available at the root of the project, the proxy will try to load the file and check for authorization information for a specific proxy setting. The default setting is for ckan.json. Only Basic HTTP Auth is supported. The file auth.json is ignore by git and need to be created when you deploy the proxy.

Ex:

{
    "ckan.json": {
        "type": "Basic",
        "username": "your_username_for_default",
        "password": "your_password_for_default"
    },
    "cioos_pacific_ckan.json": {
        "type": "Basic",
        "username": "your_username_for_cioos_pacific",
        "password": "your_password_for_cioos_pacific"
    }
}

References

Mockup

About

Asset map for the main page of CIOOS - SIOOC sites

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 82.7%
  • CSS 7.1%
  • HTML 6.5%
  • Python 3.5%
  • Dockerfile 0.2%