Embedding Maps

Process outline

1. Log in (see 1.)
2. Click plus icon on the application board next to "Map Projects"
3. Enter title
4. Click Create project/map
5. Apply customizations
6. Copy source code snippet
7. Check correct functioning
8. Set project to "not private"

Detailed process steps

Login / Registration

1. Log in at saint.tech/login or register an account (Account must be manually unlocked by SAiNT team)

Create project/map view

1. Click the plus-Icon next to "Map Projects" in the dashboard.
2. Project view
   1. Title - Name of your map project; choose a title that helps you tell your projects apart
   2. Description - describe your map project here
   3. Projekt Key – an internal key value that identifies the project within the data streams; automatically generated
   4. Domains – domains that map project will be embedded on. This serves as an overview if you have several map projects for different domains.
   5. Button "Create Project/Map" saves the chosen settings and creates the map project.

Filter setup

1. POIs, Tours, Actions, TopTipps, Areas, Touristic entities, Any entities – Checking the box "Entity type is available" means the respective entity type will be displayed on the front end. Touristic entities combine POIs and Tours, Any entities will show data points from all entity types. If only one entity type is to be displayed, Touristic entities & Any entities must be deselected.
   Clicking "Expand" opens the detailed view of the respective entity type.
   1. Category: entities can be narrowed down further here. It is possible to use preset values AND offer the front end user the opportunity to change them. To do this, leave the box "Can be configured by user" checked. If the box is unchecked, front end users will only see the data from the selected categories.
   2. max. distance: Limits the distance from the map center. As with the categories, the preset may or may not be changed by the front end user by using the appropriate checkbox.
   3. Name/Title: Allows limiting the data to certain hits containing the set search term. As with the categories, the preset may or may not be changed by the front end user by using the appropriate checkbox.
   4. Properties: Data to be displayed must fulfill certain parameters. As with the categories, the preset may or may not be changed by the front end user by using the appropriate checkbox.
   5. Region: limits displayed data to the selected region(s). As with the categories, the preset may or may not be changed by the front end user by using the appropriate checkbox.
   6. Results per page: Can be reduced. A value beyond 25 is not recommended as load times will increase. Additional hits can be loaded at the front end at any time.
2. General setup
   1. Default entity type: sets which of the above entity types will be loaded by default on the map. (Users can select a different entity type after the map has loaded.)
   2. Map search point: determines the map center (can be changed more comfortably within the map setup screen).
   3. Language: Sets the interface language of the map snippet (German/English). Overrides any setting of the JavaScript code. Check the box to use the JavaScript snippet to configure the interface language.
   4. Results per page: see section a.viii
   5. Save: Saves the configuration

Map setup

1. Initial map state
   1. Latitude/Longitude: sets the map center
   2. Map Style: sets the map style to be used
   3. Zoom: Choose the initial zoom level (from 0 to 20)
   4. Bearing: Deviation from North-South-orientation in degrees (from -180 to 180)
   5. Tilt – Set the tilt of the virtual map table (0 to 85 degrees)
   6. Button "Reset View": resets the preview to the chosen values
   7. Button "Take from Map": fills the above fields with appropriate values from the preview (so you can set the values via the preview map)
   8. Button „Limit map interaction“: activates sub-menu (see 5b)
2. Limit map interaction
   1. Latitude min/max: sets a Northern and Southern limit for the latitude; the map center can be moved within these limits
   2. Longitude min/max: sets a Western and Eastern limit for the longitude; the map center can be moved within these limits
   3. Zoom min/max: limits the zoom levels that can be chosen
   4. Ausichtung min/max: begrenzt die mögliche Kartendrehung
   5. Neigung min/max: begrenzt mögliche Kartenneigung
   6. Button "Remove all limitations": resets the values to their defaults and hides the sub-menu
3. Map Preview: shows a preview of the map with the settings selected above (and those on the Filter setup page). Changes to the map orientation made here can be taken over by using the "Take from Map" button (see 5a vii)
4. JavaScript snippet settings
   1. Language: sets the language of the JavaScript snippet
   2. ID of the container element: names the container element. Can be changed to match possible naming rules on the target website.

Copy the Map Snippet to a Website

1. Copy JavaScript snippet – Copy the JavaScript code and paste it to the head section of the target website. The code snippet will load the script when the page is called.
2. Copy HTML snippet kopieren – Copy this snippet to the specific area of the website that should display the map snippet.
3. Set project to "not private"
   After all settings have been checked and the snippet has been tested on the target website, go to the Project details part of the menu and remove the checkmark from "Project is private". Now all members of the team can edit this map project. Before this setting is changed, the map can only be edited by the user who created it!