map.search.ch API Reference

The class reference describes all public classes of the API and their methods. Those classes can be used to embed and control the interactive swiss map.

class SearchChMap

This is the main class represeting the map widget and it has to be instantiated within your HTML page.

Constructor

var map = new SearchChMap({ container:"mapcontainer" });

The contructor expects an object with the following named properties as the only parameter:

Property	Type	Optional	Default	Description
container	Mixed	yes	mapcontainer	DOM reference or ID of the container containing the map. Preferably a block element like <div> or <p>
center	Mixed	yes	-	Center of the map. String with a swiss address or an array with geo-coordinates. See geographical references for details.
from	Mixed	yes	-	Start of a route. Same values as in `center` but requires `to` as counterpart.
to	Mixed	yes	-	Destination of a route. Same values as in `center` but requires `from` as counterpart.
routemode	String	yes	car	Route mode. Values: `car,bicycle,pedestrian,oev`
type	String	yes	street	Map type `aerial` or `street`
zoomlevel	Number	yes	auto	Zoom level. Accepted values: `6 - 19`
zoom	Number	yes	auto	Zoom level (deprecated). Accepted values: `1024,512,256,128,64,32,16,8,4,2,1,0.5,0.25,0.125` These values represent the number of meters per pixel. Will be automatically rounded to the next defined level.
controls	String	yes	default	UI elements within the map allowing user interaction (comma-separated string): `default`: Default selection of control elements `zoom`: Zoom control `type`: Switch to toggle between aerial and street view `ruler`: Display of the current scale or string `"all"`
poigroups	String	yes	default	Groups of POIs to display (comma-separated string). See POI groups and categories.
drawing	String	yes	-	Overlay the map with a drawing created by the "Draw on map" function on map.search.ch, e.g. "mu4zdnjn2".
marker	Boolean	yes	auto	Enables the marker indicating the target address (if address enough precisely defined).
gestureHandling	String	yes	auto	This setting controls how the API handles gestures on the map. Allowed values: `cooperative`: Scroll events and one-finger touch gestures scroll the page, and do not zoom or pan the map. Two-finger touch gestures pan and zoom the map. Scroll events with a ctrl key or ⌘ key pressed zoom the map. In this mode the map cooperates with the page. `greedy`: All touch gestures and scroll events pan or zoom the map. `auto`: Gesture handling is either cooperative or greedy, depending on whether the page is scrollable or in an iframe.
poiClick	Boolean	yes	true	enable/disable clicks on POIs and on the map itself
poiHover	Boolean	yes	true	enable/disable POI hover

Object methods

Method	Return value	Description
set(Object p)	void	Set or update properties of the map. Requires an object with the same named parameters (except `container`) as the constructor.
go(Object p)	void	Move the map to the given address (`center`). An object with named parameters is expected: `center`: geographical reference of the new center `zoomlevel`: Zoom level to switch to (optional). See constructor for allowed values. `marker`: Enables the marker indicating the target address (Boolean)
get([String what])	mixed	Getter for properties of the map object. All names supported by `set()` can be used to read a specific property. If called without the optional parameter the method returns an object containing all the properties. Example: `map.get('zoom')` and `map.get().zoom` both return the current zoom level. In case the map displays a route then `map.get('routeinfo').distance` will provide informations (like the distance in this example) about it.
zoom(int dir)	void	Zoom the map view. `dir > 0`: zoom in, `dir < 0`: zoom out.
showPOIGroup(String groups)	void	Show one or many groups of POIs. Expects a comma-separated string according to this list.
hidePOIGroup(String groups)	void	Hide groups of POIs. Same parameter as for `showPOIGroup()`
addPOI(SearchChPOI obj)	void	Add a custom POI to the map. Requires an instance of `SearchChPOI` as single parameter.
removePOI(SearchChPOI obj)	void	Remove a custom POI from the map. Requires a reference to the according `SearchChPOI` object.
removeAllPOIs()	void	Remove all custom POIs from the map.
getPermUrl(String mode)	String	Returns an absolute URL to map.search.ch representing the current viewport. Use the optional parameter `mode` to get an URL for the print view (`"print"`) or the route directions (`"directions"`).
addEventListener( String event, function callback)	void	Register a handler function for a certain event of the map. `event`: Name of the event. See the list below. `callback`: Reference to a callback function.
removeEventListener( String event, function callback)	void	Remove a handler that was activated previously. Requires the same parameters used to register the handler.
resize(int w, int h)	void	Scale the map container to the given size.
ready(handler)	void	Calls handler as soon as the map is loaded.

Events

Event	Description
load	Is fired once the map is loaded completely, i.e. all tiles are loaded and visible.
change	Is fired if the viewport of the map is changed e.g. after dragging or zooming.
maptypechanged	Is fired when the map type (aerial/street view) is changed.
dragstart	Is fired when the user starts dragging the map with the mouse.
dragend	Is fired when the user releases the mouse and dragging stopped.
mouseclick	Is fired when the user clicks on the map.
zoomstart	Is fired when the map starts to zoom.
zoomend	Is fired when the zoom animation is over.
mapmove	Is fired continuously when the map is scrolled.

Event handlers can be registered and removed as follows. A handler can either be a global function or an object method and gets an object containing event-specific properties as single parameter.

// Register an event-handler function
map.addEventListener("load", function(e){ alert(e.event); });
// Add and remove an object method as event-listener
function mapchanged(e) { [..] }
map.addEventListener("change", mapchanged);
map.removeEventListener("change", mapchanged);

POI groups and categories

default: Default selection depending on the current zoom level

verkehr:	Traffic
zug	Railway
haltestelle	Tram/bus
bergbahn	Mountain trsp
parking	Parking
viasuisse	Traffic info
velo	Bikes/E-Scooters
mobility	Mobility
gastro:	Gastronomy
bar	Bar
cafe	Cafe
hotel	Hotel
restaurant	Restaurant
kultur:	Entertainment
kino	Cinema
museum	Museum
theater	Theater
tour	Excursions
feuerstelle	Fireplace
spielplatz	Playground
bad	Swimming pool
camping	Camping ground
gebaeude:	Public Buildings
kirche	Church
polizei	Police
schule	School, university
spital	Hospital
verwaltung	Administration
service:	Shopping/Service
apotheke	Pharmacy
geldautomat	Cash dispenser
post	Post Office
shop	Shop
tankstelle	Gas station
ladestation	Electric car charging station
geo:	Geo
pass	Passes
wasserfall	Waterfalls
webcam	Webcam
wikipedia	Wikipedia

And this is how those groups are switched on and off:

map.showPOIGroup("verkehr,bar,cafe,theater");
map.hidePOIGroup("mobility");

class SearchChPOI

This class represents a custom POI (Point of Interest) for the interactive map. Instances of SearchChPOI can be positioned on the map using the method addPOI().

Constructor

var Poi = new SearchChPOI({ center:[600000,200000], html:"Sternwarte Bern" });
map.addPOI(Poi);

The contructor expects an object with the following named properties as the only parameter:

Property	Type	Optional	Description
center	Mixed	no	Position of the icon. Can either be a string with a swiss address or an array with geo-coordinates. See geographical references for details.
html	String	no	Info-box content. HTML code is allowed here.
title	String	yes	Title of the info-box
icon	String	yes	Image URL of the icon displayed on the map
width	Integer	yes	Icon width in pixels
height	Integer	yes	Icon height in pixels
offset	Array	yes	Coordinates of the POI icon's reference point in pixels: `[x,y]`. Will be calculated as `[width/2, height/2]` if omitted.
enabled	Boolean	yes	True (default) if the info-box should pop up when mouse runs over the icon
minzoom	Number	yes	POI is only displayed on zoom levels equal or above this value (see parameter `zoom` of `SearchChMap`)
maxzoom	Number	yes	POI is only displayed on zoom levels less or equal this value

Object methods

Method	Return value	Description
set(Object p)	void	Set or update properties of the POI object. Requires an object with the same named parameters as for the constructor.
open()	void	Open up the info-box. If the icon is outside the current viewport the map will be moved until the the POI appears.
close()	void	Hide the info-box if shown
hide()	void	Hide the icon on the map
show()	void	Make the icon visible again
destroy()	void	Remove the POI icon from the map and clear all internal references to the object
isVisible()	boolean	Determines whether the POI is currently visible in the map
addEventListener( String event, function callback)	void	Register an event handler. `event`: Name of the event. See the following list. `callback`: Reference to a callback function.
removeEventListener( String event, function callback)	void	Remove a handler that was activated previously. Requires the same parameters used to register the handler.

Events

Event	Description
mouseover	Is fired when the mouse enters the POI icon on the map.
mouseout	Is fired when the mouse leaves the icon again.
mouseclick	Is fired when the POI icon is clicked.
popupopen	Is fired when the info-box pops up.
popupclose	Is fired when the info-box hides again.

Event handlers can be registered and removed as follows. A handler can either be a global function or an object method and it receives an object containing event-specific properties as single parameter.

Poi.addEventListener("popupopen", poiPopup);
Poi.removeEventListener("popupopen", poiPopup);

Any questions?

If something doesn't work as expected or if you miss important functionality, please don't hesitate to tell us. We wait for your feedback.