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

Option Required Type Details
city Mandatory String Map CODE received from Historika
api_key Mandatory String Map API_KEY received from Historika
container_id Optional String Default value: mapcontainer
Container ID in witch map will be generated.
width Optional Number Default value: 600
Map width
height Optional Number Default value: 400
Map height
language Optional String Default 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

Event Description
appReady Triggers 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
}
appLoaded Triggers 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
}
mapReady Map is ready for usage. In this point you can add your custom markers. 
map.events.mapReady(function (data) {
    ...
});

/* IN data */
data : {
   /* empty */
}
categoryChanged Triggers 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
}
fullscreenToggled Triggers when user toggles fullscreen mode on map 
map.events.fullscreenToggled(function (data) {
    ...
});

/* IN data */
data : {
    'fullscreen': boolean, //state of fullscreen
}
searchTermChanged Triggers 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
}
onError Triggers 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

Action Description
toggleCategory Shows / 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
changeLanguage Changes 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
toggleFullscreen Show map in fullscreen. 
map.actions.toggleFullscreen(state);

/* Parameters */
state : boolean // true - fullscreen, false - normal embeded
addMarker Add 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
search Searches on map 
map.actions.search(term);

/* Parameters */
term : string // what to search
activatePoi Opens 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)
Download