How to integrate our code

Our basic code & options

<div class="code code-script"><!-- [et_pb_line_break_holder] --> <p><span>Script</span></p><!-- [et_pb_line_break_holder] --> <div class="code-block"><!-- [et_pb_line_break_holder] --> <div class="code-toolbar"><pre class=" language-html"><code class=" language-html html1"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://webkarten.theswissdigital.ch/js/tsd-webkarten-client.js<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>/script</span><span class="token punctuation">></span></span></code></pre><div class="toolbar"><div class="toolbar-item btn" data-clipboard-target=".html1"><a class="changeit">Copy</a></div></div></div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --></div>
<div class="code code-html"><!-- [et_pb_line_break_holder] --> <p><span>HTML</span></p><!-- [et_pb_line_break_holder] --> <div class="code-block"><!-- [et_pb_line_break_holder] --> <div class="code-toolbar"><pre class=" language-html"><code class=" language-html html2"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mapcontainer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre><div class="toolbar"><div class="toolbar-item btn" data-clipboard-target=".html2"><a class="changeit">Copy</a></div></div></div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </div>
<div class="code code-javascript"><!-- [et_pb_line_break_holder] --> <p><span>Javascript</span></p><!-- [et_pb_line_break_holder] --> <div class="code-block"><!-- [et_pb_line_break_holder] --><div class="code-toolbar"><pre class=" language-js"><code class=" language-js"><span class="token keyword">var</span> map <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span><!-- [et_pb_line_break_holder] -->TsdWebkartenEvents<span class="token punctuation">.</span><span class="token function">addDomListener</span><span class="token punctuation">(</span>window<span class="token punctuation">,</span> <span class="token string">'load'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><!-- [et_pb_line_break_holder] --> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">TsdWebkarten</span><span class="token punctuation">(</span><span class="token punctuation">{</span><!-- [et_pb_line_break_holder] --> city <span class="token punctuation">:</span> <span class="token string">'YOUR_MAP_CODE'</span><span class="token punctuation">,</span><!-- [et_pb_line_break_holder] --> api_key <span class="token punctuation">:</span> <span class="token string">'YOUR_MAP_API_KEY'</span><span class="token punctuation">,</span><!-- [et_pb_line_break_holder] --> container_id<span class="token punctuation">:</span> <span class="token string">'mapcontainer'</span><span class="token punctuation">,</span><!-- [et_pb_line_break_holder] --> width <span class="token punctuation">:</span> <span class="token number">800</span><span class="token punctuation">,</span><!-- [et_pb_line_break_holder] --> height <span class="token punctuation">:</span> <span class="token number">500</span><span class="token punctuation">,</span><!-- [et_pb_line_break_holder] --> language <span class="token punctuation">:</span> <span class="token string">'de'</span><!-- [et_pb_line_break_holder] --> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> <span class="token comment">// ... Custom events (optional)</span><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> map<span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Start listener for custom actions</span><!-- [et_pb_line_break_holder] --><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><span class="token comment">// Action functions (optional)</span></code></pre><div class="toolbar"><div class="toolbar-item btn" data-clipboard-target=".language-js"><a class="changeit">Copy</a></div></div></div><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --> </div>

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) {
    ...
});
Copy
/* IN data */
data : {
    'city': string, //map code which is loading
    'api_key': string, //api_key for loading map
    'lang' : string //language of map
}
Copy
appLoadedTriggers when application is Loaded. Map is not yet ready for usage in this point.

map.events.appLoaded(function (data) {
    ...
});
Copy
/* 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
}
Copy
mapReadyMap is ready for usage. In this point you can add your custom markers.

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

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

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

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

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

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);
Copy
/* Parameters */
categoryId : number //ID of map category which needs to be toggled
Copy
changeLanguageChanges Map language. Map is in this point reloaded.

List of possible map languages was received in event: appReady

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

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

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

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

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