Skip to content

How to work with map component (discover-swiss-map)

The HTML <discover-swiss-map> custom element represents a map view with optional filtering control and list view.

Example

<!doctype html>
<head>
  <title>Simple discover-swiss-map demo</title>

  <script src="https://scripts-test.discover.swiss/webcomponents/discover-swiss-map-1.js"></script>
  <script src="https://scripts-test.discover.swiss/webcomponents/discover-swiss-mapbox-1.js"></script>
  <script src="https://scripts-test.discover.swiss/webcomponents/discover-swiss-search-1.js"></script>

  <style>
    discover-swiss-map {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<div style="width: 800px; height: 360px;">
  <discover-swiss-map
    config='
      {
        "map": {
          "layout": "simple",
           "stylesheets": [
             "map-example.css"
           ]
        },
        "mapbox": {
          "geolocateControl": null,
          "navigationControl": "top-right",
          "images": {
            "marker-default": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Map_marker.svg/156px-Map_marker.svg.png"
          },
          "infobox": {
            "enable": true,
            "maxWidth": 320
          },
          "showLabels": false,
          "styles": {
            "default": "https://api.maptiler.com/maps/topo/style.json?key=qJ6Vl7bSilkWSgxelVMY",
            "spring": "https://api.maptiler.com/maps/5bf0b841-ab9c-471f-950e-5f6e082cc681/style.json?key=qJ6Vl7bSilkWSgxelVMY",
            "summer": "https://api.maptiler.com/maps/71c67f03-2693-4da4-bfdc-a0aa49b46aa7/style.json?key=qJ6Vl7bSilkWSgxelVMY",
            "autumn": "https://api.maptiler.com/maps/e8b2d1ca-3eb5-4997-b94e-958b42a275bf/style.json?key=qJ6Vl7bSilkWSgxelVMY",
            "winter": "https://api.maptiler.com/maps/f4e63500-473b-4f1b-870d-1b6730c84a6c/style.json?key=qJ6Vl7bSilkWSgxelVMY"
          }
        },
        "search": {
          "id": "simple-discover-swiss-map-demo",
          "infocenter": {
            "headers": {
              "Ocp-Apim-Subscription-Key": "<key_goes_here>"
            }
          },
          "request": {
            "filters": [
              "identifier eq &#x27;plc_4kq_cfdfjafd&#x27;"
            ]
          }
        }
      }
    '
  />
</div>

Example example.css stylesheet:

.mapboxgl-popup-content {
  font: monospace;
  background-color: red;
  padding: 20px !important;
}

Attributes

The config JSON attribute is used to configure all aspects of the <discover-swiss-map> element and its subcomponents.

map

The map object configures the overall <discover-swiss-map> element.

map.layout

Specifies how the <discover-swiss-map> element should be presented. The value can be

  • "default": Indicate that the element should contain a list view and filter controls alongside the map view. If the device screen is large enough, then both will be shown at the same time. Otherwise map and list view can be toggled.

  • "simple": Indicates that only the map view should be contained.

Default value: "default"

map.stylesheets

Specifies the stylesheets that should be used by the children of the <discover-swiss-map> element. Stylesheets get propagated down to child components. The value is an array of URLs to stylesheets.

Default value: []

mapbox

The mapbox object configures the <discover-swiss-mapbox> child component, which is responsible for rendering the map.

mapbox.center

The initial geographical centerpoint of the map. This value works in conjunction with mapbox.zoom. The value is either null or an array of two numbers representing longitude and latitude. If null, then the the centerpoint and zoom level will be chosen to show all items on the map.

For details, check the documentation for the center parameter of Mapbox GL JS's Map object.

Default value: null

mapbox.geolocateControl

The position of the geolocation controls. The value can be:

  • "top-left"
  • "top-right"
  • "bottom-left"
  • "bottom-right"
  • null: don't show the geolocation controls.

Default value: null

mapbox.navigationControl

The position of the navigation controls. The value can be:

  • "top-left"
  • "top-right"
  • "bottom-left"
  • "bottom-right"
  • null: don't show the navigation controls.

Default value: null

mapbox.images

Override the images shown on the map. The value is an object mapping image identifiers to image URLs.

Following image identifiers are recognized:

  • "marker-default"
  • "marker-event"
  • "marker-gastronomy"
  • "marker-lodging"
  • "marker-place"
  • "marker-tour"
  • "marker-winter"
  • "sign-closed"
  • "sign-open"

Default value:

  {
    "marker-default": "icons/map-marker.png",
    "sign-closed": "icons/closed.png",
    "sign-open": "icons/open.png"
  }

The other marker-* identifiers default to the value of "marker-default".

mapbox.infobox.enable

Specifies whether the infobox (popup) should be shown when clicking on a map feature. The value is a boolean.

Default value: false

mapbox.infobox.height

Height of the infobox in pixels. The value is an integer.

Default value: mapbox.infobox.maxWidth / 4

mapbox.infobox.image.height

Height of the image shown in the infobox. The value is an integer.

Default value: mapbox.infobox.height

mapbox.infobox.image.width

Width of the image shown in the infobox. The value is an integer.

Default value: mapbox.infobox.image.height

mapbox.infobox.maxWidth

Maximum width of the infobox in pixels. The value is an integer.

Default value: 240

mapbox.showLabels

Specifies whether to show marker labels. The value is a boolean.

Default value: false

mapbox.styles

Map style to be used. The value is an object mapping seasons to style URLs.

Following seasons are recognized:

  • "default": style to be used for seasons that have no style specified
  • "spring": style to be used in March, April, May
  • "summer": style to be used in June, July, August
  • "autumn": style to be used in September, October, November
  • "winter": style to be used in December, January, February

Default value:

  {
    "default": "mapbox://styles/mapbox/streets-v11"
  }

mapbox.zoom

The initial zoom level of the map. The initial zoom level is only used when mapbox.center is specified. The value is a number.

Default: 0

The search object configures the <discover-swiss-search> child component, which is responsible for the communication with the Infocenter search API.

search.id

The identifier for the search instance. It is used to cache search results. This value is a string and should be unique across a domain. If not unique, then caches of multiple searches will interfere with each other.

Default value: ""

search.infocenter.headers["Ocp-Apim-Subscription-Key"]

Ocp-Apim-Subscription-Key header to be sent to the Infocenter API.

!This header is REQUIRED to query data from Infocenter!

This value is either null or a string. If null, then no header will be sent to the API.

Default value: null

search.infocenter.headers["Accept-Language"]

Accept-Language header to be sent to the Infocenter API. This value is either null or a string. If null, then no header will be sent to the API.

Default value: null

search.infocenter.url

Base path of the Infocenter API. This value is a string.

Default value: "https://api.discover.swiss/test/info/v2"

search.request

Full search request to be sent to the search API. This value is an object of the FullSearchRequest schema.

Default value: {}

Note: the attributes facets, select, currentPage, and resultsPerPage are not configurable. Any attempt to configure these will be overridden by the <discover-swiss-search> component as these are used internally.

For details about the FullSearchRequest schema, see the documentation of the search API.


Last update: March 17, 2021 13:48:34