JSFiddle - React, Tailwind, and code Playground

by goranobradovic

HTML

<script src="http://js.cit.api.here.com/se/2.5.3/jsl.js?with=all"></script>
<div id='mapContainer'></div>

CSS

#mapContainer {
    width:100%;
    height:100%;
}

JavaScript

$.ready(createMap);

function createMap(options) {
    nokia.Settings.set("app_id", 'DemoAppId01082013GAL');
    nokia.Settings.set("app_code", 'AJKnXv84fjrb0KIHawS0Tg');

    // Use staging environment (remove the line for production environment)
    nokia.Settings.set("serviceMode", "cit");

    // Get the DOM node to which we will append the map
    var mapContainer = document.getElementById('mapContainer');
    // Create a map inside the map container DOM node
    var map = new nokia.maps.map.Display(mapContainer, {
        // initial center and zoom level of the map
        center: options.center,
        zoomLevel: options.zoomLevel,
        components: [
        // ZoomBar provides a UI to zoom the map in & out
        new nokia.maps.map.component.ZoomBar(),
        // We add the behavior component to allow panning / zooming of the map
        new nokia.maps.map.component.Behavior(),
        // Creates UI to easily switch between street map satellite and terrain mapview modes
        new nokia.maps.map.component.TypeSelector(),
        // Creates a toggle button to show/hide traffic information on the map
        new nokia.maps.map.component.Traffic(),
        // Creates a toggle button to show/hide public transport lines on the map
        new nokia.maps.map.component.PublicTransport(),
        // Creates a toggle button to enable the distance measurement tool
        new nokia.maps.map.component.DistanceMeasurement(),
        // Shows a min-map in the bottom right corner of the map
        new nokia.maps.map.component.Overview(),
        /* Shows a scale bar in the bottom right corner of the map depicting
         * ratio of a distance on the map to the corresponding distance in the real world
         * in either kilometers or miles
         */
        new nokia.maps.map.component.ScaleBar(),
        /* Positioning will show a set "map to my GPS position" UI button
         * Note: this component will only be visible if W3C geolocation API
         * is...