How to integrate our code

Our basic code & options

Script

<script src="https://webkarten.theswissdigital.ch/js/tsd-webkarten-client.js" type="text/javascript"></script>

HTML

<div id="mapcontainer">div>

Javascript

var map = null;
TsdWebkartenEvents.addDomListener(window, 'load', function () {
 map = new TsdWebkarten({
 city : 'YOUR_MAP_CODE',
 api_key : 'YOUR_MAP_API_KEY',
 container_id: 'mapcontainer',
 width : 800,
 height : 500,
 language : 'de'
 });

 // ... Custom events (optional)

 map.listen(); // Start listener for custom actions
});

// Action functions (optional)

Options

Configuration options

OptionRequiredTypeDetails
cityMandatoryStringMap CODE received from Historika
api_keyMandatoryStringMap API_KEY received from Historika
container_idOptionalStringDefault value: mapcontainer
Container ID in witch map will be generated.
widthOptionalNumberDefault value: 600
Map width
heightOptionalNumberDefault value: 400
Map height
languageOptionalStringDefault value: de
Map language. Possible map languages are defined by Historika

Events

Custom Events for map manipulation. Events are send from Historika Map to Customers web page

EventDescription
appReadyTriggers when Application is ready

map.events.appReady(function (data) {
    ...
});
/* IN data */
data : {
    'city': string, //map code which is loading
    'api_key': string, //api_key for loading map
    'lang' : string //language of map
}
appLoadedTriggers when application is Loaded. Map is not yet ready for usage in this point.

map.events.appLoaded(function (data) {
    ...
});
/* IN data */
data : {
    'categories': [ //Categories of map
        {
            'id': int,
            'parent_id': int|null,
            'code': string,
            'name': string,
            'color': string,
            'image_url': string
        },
        ...
    ],
    'languages' : [  //List of possible map languages
        'en',
        'de',
        'fr',
        'it',
        ...],
    'language'  : 'de' //Language of loaded map
}
mapReadyMap is ready for usage. In this point you can add your custom markers.

map.events.mapReady(function (data) {
    ...
});
/* IN data */
data : {
   /* empty */
}
categoryChangedTriggers when user change visibility of category

map.events.categoryChanged(function (data) {
    ...
});
/* IN data */
data : {
    'category_id': number, //represents category ID
    'state': boolean, //state of category visibility
}
fullscreenToggledTriggers when user toggles fullscreen mode on map

map.events.fullscreenToggled(function (data) {
    ...
});
/* IN data */
data : {
    'fullscreen': boolean, //state of fullscreen
}
searchTermChangedTriggers when user makes search on map sidebar (visible wneh in fullscreen mode)

map.events.searchTermChanged(function (data) {
    ...
});
/* IN data */
data : {
    'term': boolean, //state of fullscreen
}
onErrorTriggers when map can not be loaded.

map.events.onError(function (data) {
    ...
});
/* IN data */
data : {
    'message': string, //Error message
}

Actions

Custom Actions for map manipulation. Actions are send from Customers web page to Historika Map

ActionDescription
toggleCategoryShows / Hides category on map

List of map categories was received in event appLoaded

map.actions.toggleCategory(categoryId);
/* Parameters */
categoryId : number //ID of map category which needs to be toggled
changeLanguageChanges Map language. Map is in this point reloaded.

List of possible map languages was received in event: appReady

map.actions.changeLanguage(languageCode);
/* Parameters */
languageCode : string // eg. de
toggleFullscreenShow map in fullscreen.

map.actions.toggleFullscreen(state);
/* Parameters */
state : boolean // true - fullscreen, false - normal embeded
addMarkerAdd your custom marker on map

map.actions.addMarker(latitude, longitude, street, city);
/* Parameters */
latitude    : double, // marker latitude
longitude   : double, // marker longitude
street      : string, // Street name
city        : string  // City name
searchSearches on map

map.actions.search(term);
/* Parameters */
term : string // what to search
activatePoiOpens POI details on map

map.actions.activatePoi( street, city, coordinates);
/* Parameters */
street      : string, // Street name
city        : string  // City name
coordinates : string   // POI coordinates as [latitude,longitude] (optional parameter)