Sandbox - Canadian Geospatial Platform Viewer

Basemap Options

Configure the basemap settings for your map. These options control the appearance and type of the base layer.

Available Options (TypeBasemapOptions):

basemapId string *required

The identifier for the basemap to use.

Valid values:

'transport' - Transportation basemap (default)
'osm' - OpenStreetMap basemap
'simple' - Simple basemap
'nogeom' - No geometry basemap
'shaded' - Shaded relief basemap
'imagery' - Imagery/satellite basemap

shaded boolean *required

Enable or disable shaded basemap. If basemap id is set to 'shaded', this should be false.

Default: true

true - Enable shaded relief
false - Disable shaded relief

labeled boolean *required

Enable or disable basemap labels (place names, roads, etc.).

Default: true

true - Show labels on basemap
false - Hide all labels

labelZIndex number optional

Z-index of the basemap labels to control layer stacking order.

Default: 0

Basic Configuration:


{
  "map": {
    "basemapOptions": {
      "basemapId": "transport",
      "shaded": false,
      "labeled": true,
      "labelZIndex": 0
    }
  }
}

Imagery Basemap Without Labels:


{
  "basemapOptions": {
    "basemapId": "imagery",
    "shaded": true,
    "labeled": false
  }
}

Shaded Relief Basemap:


{
  "basemapOptions": {
    "basemapId": "shaded",
    "shaded": false,  // false because basemap IS shaded
    "labeled": true
  }
}

View Settings

Configure the view settings for your map. These options control the projection, zoom levels, rotation, and initial view area.

Available Options (TypeViewSettings):

projection number *required

Spatial Reference EPSG code supported (https://epsg.io/). We support Web Mercator and Lambert Conical Conform Canada.

Valid values:

3978 - Lambert Conical Conform Canada (default)
3857 - Web Mercator

initialView object optional

Settings for the initial view for map. You can specify either zoomAndCenter, extent, or layerIds.

Properties (TypeMapViewSettings):

zoomAndCenter - Array of [zoom, [longitude, latitude]]
- Zoom level: 0-28
- Center coordinates depend on the projection:
  - EPSG:3978 - Longitude: [-140 to -60], Latitude: [40 to 90]
  - EPSG:3857 - Longitude: [-180 to 180], Latitude: [-90 to 90]
extent - Array of [minX, minY, maxX, maxY] extent coordinates (values depend on projection)
layerIds - Array of Geoview layer IDs or layer paths to use as initial map focus
- If empty array [], will use all layers
- Format: ["geoviewLayerId"] or ["geoviewLayerId/layerPath"]

homeView object optional

Settings for the home nav bar button. Uses the same structure as initialView (TypeMapViewSettings).

enableRotation boolean optional

Enable rotation. If false, a rotation constraint that always sets the rotation to zero is used.

Default: true

rotation number optional

The initial rotation for the view in degrees (positive rotation clockwise, 0 means North). Will be converted to radians by the viewer.

Range: 0 to 360

Default: 0

maxExtent array optional

The extent that constrains the view. Called with [minX, minY, maxX, maxY] extent coordinates.

Note: Coordinate values depend on the projection.

Default for EPSG:3978: [-150, -10, -30, 90]

Default for EPSG:3857: [-180, 0, 80, 84]

minZoom number optional

The minimum zoom level used to determine the resolution constraint. If not set, will use default from basemap.

Range: 0 to 20

Default: 0

maxZoom number optional

The maximum zoom level used to determine the resolution constraint. If not set, will use default from basemap.

Range: 0 to 20

Default: 20

Basic Configuration with Zoom and Center (EPSG:3978):


{
  "map": {
    "viewSettings": {
      "projection": 3978,
      "initialView": {
        "zoomAndCenter": [4.5, [-90, 60]]
      },
      "enableRotation": true,
      "rotation": 0,
      "minZoom": 0,
      "maxZoom": 20,
      "maxExtent": [-150, -10, -30, 90]
    }
  }
}

Configuration with Extent (EPSG:3857):


{
  "viewSettings": {
    "projection": 3857,
    "initialView": {
      "extent": [-180, 0, 80, 84]
    },
    "minZoom": 2,
    "maxZoom": 18,
    "maxExtent": [-180, 0, 80, 84]
  }
}

Zoom to All Layers:


{
  "viewSettings": {
    "projection": 3978,
    "initialView": {
      "layerIds": []
    },
    "homeView": {
      "zoomAndCenter": [5, [-95, 62]]
    }
  }
}

Zoom to Specific Layers:


{
  "viewSettings": {
    "projection": 3978,
    "initialView": {
      "layerIds": ["airborne_radioactivity", "earthquakes/0"]
    }
  }
}

Other Map Settings

Additional configuration options for map interaction, feature highlighting, and overlay objects.

Available Options:

interaction string *required (TypeInteraction)

Type of map interaction. Determines if the map is dynamic (pan/zoom enabled) or static to act as a thumbnail (no component).

Valid values:

'dynamic' - Interactive map with pan/zoom capabilities (default)
'static' - Static map acting as a thumbnail, no component

highlightColor string optional (TypeHighlightColors)

Color to use for feature highlights when features are selected or hovered over.

Valid values:

'aqua' - Aqua highlight (default)
'black' - Black highlight
'white' - White highlight
'red' - Red highlight
'green' - Green highlight

Default: 'aqua'

overlayObjects object optional (TypeOverlayObjects)

Non-interactive markers and overlay objects to add to the map. Only point markers are supported for now...

Properties:

pointMarkers - Object containing groups of point markers
- Key: Group name (string)
- Value: Array of TypePointMarker objects

TypePointMarker properties:

id *required - Unique ID for the marker within its group
coordinate *required - Marker coordinates [x, y]
color optional - Marker color (CSS color string)
opacity optional - Marker opacity (0 to 1)
projectionCode optional - EPSG code if coordinates are not in lon/lat

Dynamic Map with Red Highlights:


{
  "map": {
    "interaction": "dynamic",
    "highlightColor": "red",
    ... other map settings ...
  }
}

Static Map (Thumbnail):


{
  "map": {
    "interaction": "static",
    ... other map settings ...
}

Map with Point Markers (Lon/Lat):


{
  "map": {
    "interaction": "dynamic",
    "highlightColor": "green",
    "overlayObjects": {
      "pointMarkers": {
        "cities": [
          {
            "id": "ottawa",
            "coordinate": [-75.6972, 45.4215],
            "color": "#FF0000",
            "opacity": 0.8
          },
          {
            "id": "toronto",
            "coordinate": [-79.3832, 43.6532],
            "color": "#0000FF",
            "opacity": 0.8
          }
        ]
      }
    },
    ... other map settings ...
  }
}

Map with Point Markers (Projected Coordinates):


{
  "map": {
    "overlayObjects": {
      "pointMarkers": {
        "locations": [
          {
            "id": "point1",
            "coordinate": [500000, 5500000],
            "projectionCode": 3857,
            "color": "#00FF00",
            "opacity": 1
          },
          {
            "id": "point2",
            "coordinate": [600000, 5600000],
            "projectionCode": 3857,
            "color": "#FFFF00",
            "opacity": 0.9
          }
        ]
      }
    },
    "interaction": "dynamic",
    ... other map settings ...
  }
}

Multiple Marker Groups:


{
  "map": {
    "overlayObjects": {
      "pointMarkers": {
        "cities": [
          {
            "id": "ottawa",
            "coordinate": [-75.6972, 45.4215],
            "color": "#FF0000"
          }
        ],
        "landmarks": [
          {
            "id": "cn_tower",
            "coordinate": [-79.3871, 43.6426],
            "color": "#0000FF",
            "opacity": 0.7
          }
        ]
      }
    },
    "interaction": "dynamic",
    ... other map settings ...  
  }
}

UI Components Configuration

Configure the user interface components including navigation bar, app bar, footer bar, overview map, and other map components.

Available Options:

navBar array optional (TypeValidNavBarProps[])

List of navigation bar buttons to display. Controls which navigation tools are available to the user.

Valid values:

'zoom' - Zoom in/out buttons
'fullscreen' - Fullscreen toggle button
'home' - Return to home view button
'location' - User location button
'basemap-select' - Basemap selector
'projection' - Projection selector
'drawer' - Drawing tools

Default: ['zoom', 'fullscreen', 'home', 'basemap-select']

appBar object optional (TypeAppBarProps)

Configuration for the application bar (side panel). The about GeoView and notification buttons are always present.

Properties:

tabs.core - Array of core tab names to display
- 'geolocator' - Address search and geolocation
- 'export' - Export functionality
- 'aoi-panel' - Area of Interest panel
- 'guide' - User guide
- 'legend' - Map legend
- 'layers' - Layers panel
- 'details' - Feature details
- 'data-table' - Data table view
collapsed - Whether the app bar starts collapsed
selectedTab - Initially selected tab
selectedLayersLayerPath - Initial selected layer in layers tab
selectedDataTableLayerPath - Initially selected layer in data table tab
selectedTimeSliderLayerPath - Initially selected layer in time slider tab

Default: { tabs: { core: ['geolocator', 'legend', 'details', 'export'] } }

footerBar object optional (TypeFooterBarProps)

Configuration for the footer bar (bottom panel).

Properties:

tabs.core - Array of core tab names to display
- 'legend' - Map legend
- 'layers' - Layers panel
- 'details' - Feature details
- 'data-table' - Data table view
- 'time-slider' - Time slider control
- 'geochart' - GeoChart visualization
- 'guide' - User guide
tabs.custom - Array of custom tab objects with id, label, and contentHTML
collapsed - Whether the footer bar starts collapsed
selectedTab - Initially selected tab
selectedLayersLayerPath - Initial selected layer in layers tab
selectedDataTableLayerPath - Initially selected layer in data table tab
selectedTimeSliderLayerPath - Initially selected layer in time slider tab

Default: { tabs: { core: ['layers', 'data-table'], custom: [] }, collapsed: false }

overviewMap object optional (TypeOverviewMapProps)

Configuration for the overview map component.

Properties:

hideOnZoom - Zoom level at which to hide the overview map (0 = always show, suggested value to hide when zoomed out: 7)

Default: { hideOnZoom: 0 }

components array optional (TypeValidMapComponentProps[])

List of map components to display on the map.

Valid values:

'overview-map' - Overview/mini map showing full extent
'north-arrow' - North arrow indicator

Default: ['north-arrow', 'overview-map']

Basic UI Configuration:


{
  "navBar": ["zoom", "fullscreen", "home", "basemap-select"],
  "appBar": {
    "tabs": {
      "core": ["geolocator"]
    }
  },
  "footerBar": {
    "tabs": {
      "core": ["legend", "layers", "details", "data-table"],
      "custom": []
    },
    "collapsed": false
  },
  "components": ["north-arrow", "overview-map"],
  "overviewMap": {
    "hideOnZoom": 0
  }
}

Minimal UI (No Nav Bar, Limited Panels):


{
  "navBar": [],
  "appBar": {
    "tabs": {
      "core": []
    }
  },
  "footerBar": {
    "tabs": {
      "core": ["legend"],
      "custom": []
    },
    "collapsed": true
  },
  "components": []
}

Full-Featured UI:


{
  "navBar": ["zoom", "fullscreen", "home", "location", "basemap-select", "projection", "drawer"],
  "appBar": {
    "tabs": {
      "core": ["geolocator", "export", "legend", "layers", "details", "data-table", "guide"]
    },
    "collapsed": false,
    "selectedTab": "geolocator"
  },
  "footerBar": {
    "tabs": {
      "core": ["legend", "layers", "details", "data-table", "time-slider", "geochart", "guide"],
      "custom": []
    },
    "collapsed": false,
    "selectedTab": "legend"
  },
  "components": ["overview-map", "north-arrow"],
  "overviewMap": {
    "hideOnZoom": 10
  }
}

Custom Footer Bar Tab:


{
  "footerBar": {
    "tabs": {
      "core": ["legend", "layers"],
      "custom": [
        {
          "id": "custom-info",
          "label": "About",
          "contentHTML": "<div><h3>Custom Information</h3><p>This is a custom tab with HTML content.</p></div>"
        }
      ]
    },
    "collapsed": false,
    "selectedTab": "custom-info"
  }
}

App Bar with Specific Tools:


{
  "navBar": ["zoom", "home"],
  "appBar": {
    "tabs": {
      "core": ["geolocator", "layers", "data-table"]
    },
    "selectedTab": "layers"
  },
  "components": ["north-arrow"]
}

Other GeoView Configuration

Additional configuration options for theme, service URLs, and global settings.

Available Options:

theme string optional (TypeDisplayTheme)

Display theme for the viewer.

Valid values:

'geo.ca' - Geo.ca theme (default)
'dark' - Dark theme
'light' - Light theme

Default: 'geo.ca'

serviceUrls object *required (TypeServiceUrls)

Service endpoint URLs for various GeoView services.

Properties:

geocoreUrl *required - Service endpoint to access API for layers specification
- Default: 'https://geocore.api.geo.ca'
rcsUrl optional - Service endpoint for RCS gcGeo layers
- Default: 'https://gcgeo.gc.ca/geonetwork/srv/api/v2/docs'
proxyUrl optional - Proxy for dealing with same-origin issues
- Default: 'https://maps.canada.ca/wmsproxy/ws/wmsproxy/executeFromProxy'
geolocatorUrl optional - Geolocator service for address search
- Default: 'https://geolocator.api.geo.ca?keys=geonames,nominatim,locate'
metadataUrl optional - Metadata service endpoint for UUID layers
- Default: '' (empty, must be set by config)
utmZoneUrl optional - UTM zone service endpoint
- Default: 'https://geogratis.gc.ca/services/delimitation/en/utmzone'
ntsSheetUrl optional - NTS sheet service endpoint
- Default: 'https://geogratis.gc.ca/services/delimitation/en/nts'
altitudeUrl optional - Altitude service endpoint
- Default: 'https://geogratis.gc.ca/services/elevation/cdem/altitude'

globalSettings object optional (TypeGlobalSettings)

Global settings that affect the behavior of the viewer.

Properties:

canRemoveSublayers optional - Whether sublayers can be removed from layer groups
- Type: boolean
- Default: true
disabledLayerTypes optional - Layer types that should be disabled
- Type: array of TypeGeoviewLayerType
- Default: []
showUnsymbolizedFeatures optional - Display unsymbolized features in datatable and other components
- Type: boolean
- Default: false
coordinateInfoEnabled optional - Initial state of the coordinate info tool
- Type: boolean
- Default: false
hideCoordinateInfoSwitch optional - Remove coordinate info tool from UI
- Type: boolean
- Default: false

schemaVersionUsed string optional (TypeValidVersions)

The schema version used to validate the configuration file.

Valid values:

'1.0' - Version 1.0 (default and only accepted version)

Default: '1.0'

Basic Configuration with Default Service URLs:


{
  "theme": "geo.ca",
  "serviceUrls": {
    "geocoreUrl": "https://geocore.api.geo.ca",
    "rcsUrl": "https://gcgeo.gc.ca/geonetwork/srv/api/v2/docs",
    "geolocatorUrl": "https://geolocator.api.geo.ca?keys=geonames,nominatim,locate",
    "proxyUrl": "https://maps.canada.ca/wmsproxy/ws/wmsproxy/executeFromProxy",
    "utmZoneUrl": "https://geogratis.gc.ca/services/delimitation/en/utmzone",
    "ntsSheetUrl": "https://geogratis.gc.ca/services/delimitation/en/nts",
    "altitudeUrl": "https://geogratis.gc.ca/services/elevation/cdem/altitude"
  },
  "schemaVersionUsed": "1.0"
}

Dark Theme Configuration:


{
  "theme": "dark",
  "serviceUrls": {
    "geocoreUrl": "https://geocore.api.geo.ca"
  }
}

Global Settings Configuration:


{
  "globalSettings": {
    "canRemoveSublayers": false,
    "disabledLayerTypes": ["esriDynamic", "esriFeature"],
    "showUnsymbolizedFeatures": true,
    "coordinateInfoEnabled": true,
    "hideCoordinateInfoSwitch": false
  },
  "serviceUrls": {
    "geocoreUrl": "https://geocore.api.geo.ca"
  }
}

Complete Configuration:


{
  "theme": "geo.ca",
  "serviceUrls": {
    "geocoreUrl": "https://geocore.api.geo.ca",
    "rcsUrl": "https://gcgeo.gc.ca/geonetwork/srv/api/v2/docs",
    "proxyUrl": "https://maps.canada.ca/wmsproxy/ws/wmsproxy/executeFromProxy",
    "geolocatorUrl": "https://geolocator.api.geo.ca?keys=geonames,nominatim,locate",
    "metadataUrl": "https://metadata.example.com",
    "utmZoneUrl": "https://geogratis.gc.ca/services/delimitation/en/utmzone",
    "ntsSheetUrl": "https://geogratis.gc.ca/services/delimitation/en/nts",
    "altitudeUrl": "https://geogratis.gc.ca/services/elevation/cdem/altitude"
  },
  "globalSettings": {
    "canRemoveSublayers": true,
    "disabledLayerTypes": [],
    "showUnsymbolizedFeatures": false,
    "coordinateInfoEnabled": true,
    "hideCoordinateInfoSwitch": false
  },
  "schemaVersionUsed": "1.0"
}

Interactive Sandbox

Custom Map Size

Sandbox Map

Basemap Options

Available Options (TypeBasemapOptions):

Basic Configuration:

Imagery Basemap Without Labels:

Shaded Relief Basemap:

View Settings

Available Options (TypeViewSettings):

Basic Configuration with Zoom and Center (EPSG:3978):

Configuration with Extent (EPSG:3857):

Zoom to All Layers:

Zoom to Specific Layers:

Other Map Settings

Available Options:

Dynamic Map with Red Highlights:

Static Map (Thumbnail):

Map with Point Markers (Lon/Lat):

Map with Point Markers (Projected Coordinates):

Multiple Marker Groups:

UI Components Configuration

Available Options:

Basic UI Configuration:

Minimal UI (No Nav Bar, Limited Panels):

Full-Featured UI:

Custom Footer Bar Tab:

App Bar with Specific Tools:

Other GeoView Configuration

Available Options:

Basic Configuration with Default Service URLs:

Dark Theme Configuration:

Global Settings Configuration:

Complete Configuration: