GeoGirafe-API

This page describes how to use the GeoGirafe API. The API provides a modern web component that enables easy integration into websites.
Technically, the API is a lightweight GeoGirafe application that already includes predefined components and services.

Examples are provided below.

Basics

To use the API, simply add the following code on your website:

<head>
  <script type="module" crossorigin src="/geogirafe-api.js"></script>
  <link rel="stylesheet" href="/geogirafe-api.css" />
</head>

Add a simple map view

Add a simple map to the page, with its default configuration and size.

Add a simple map view with a custom size

Add a simple map to the page, with a custom size.

Add a map with center coordinates

Set the default center point.

Add a map with a custom zoomlevel

Set the default zoom level.

Add a map with a custom basemap

Set the default basemap.

Add a map with a basemap selector

Activate the basemap selector, allowing the user to select a different basemap.

Add a crosshair somewhere on the map

Add a cross at the defined coordinates.

Add a toolip somewhere on the map

Add a tooltip with custom text and optional title at the defined coordinates.

Add a marker somewhere on the map

Add a marker at the defined coordinates.

Add multiple markers on the map

Add multiple markers at the defined coordinates.

Add multiple markers with size and/or offset on the map

Add multiple markers at the defined coordinates.
You can specify size and offset.
If you only specify three parameters, the third parameter can be the size if you don't include a sign (e.g. 24,24) or the offset if you do include a sign (e.g. +2,-6).

Add multiple markers on the map by providing a File/URL

You can provide a URL to a TXT file containing markers.
Each line represents a marker with TAB-separated values.
The file must contain the column names as header.

Allowed column names:

point: coordinates where the marker should be added.
title (optional): the title for the popup shown when clicking on the marker.
description (optional): the description (content) of the popup shown when clicking on the marker.
icon: url to the marker image
iconSize (optional): size if the marker should be resized
iconOffset (optional): offset if the marker should be shifted

Other columns will be ignored.
Compatibility with the format used in the old GeoMapFish API will be managed if the URL to fo file contains the keyword legacy.
Coordinates can be given in both way (North,East) or (East,North) only if the SRID CH:2056 is used.

Add a layer to the map

Add a layer to the map. The layer name must be defined in the themes.json file.

Add multiple layers to the map

Add multiple layers to the map. The layer names must be defined in the themes.json file.

Add a layer to the map, including default opacity and filter

Add a layer to the map. The layer name must be defined in the themes.json file. The layer options follow the format defined in the documentation.

Add a map with a search bar

Activate the searchbar, allowing the user to search for objects and layers.

Add a map and allow selection

Activate the selection window, allowing the user to select objects and display their properties.

Set map values with javascript

This example shows how to use javascript to set attributes after the map creation.