.htaccess, .htpasswd und 131 weitere dateien aktualisiert...

vcm/templates/locationFour.geojson

+{
+"type": "FeatureCollection",
+"name": "data_point",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "id": null, "name": "datapoint" }, "geometry": { "type": "Point", "coordinates": [ 9.193587, 48.835579 ] } }
+]
+}

vcm/templates/locationOne.geojson

+{
+"type": "FeatureCollection",
+"name": "data_point",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "id": null, "name": "datapoint" }, "geometry": { "type": "Point", "coordinates": [ 9.194387, 48.835579 ] } }
+]
+}

vcm/templates/locationThree.geojson

+{
+"type": "FeatureCollection",
+"name": "data_point",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "id": null, "name": "datapoint" }, "geometry": { "type": "Point", "coordinates": [ 9.194117, 48.835319 ] } }
+]
+}

vcm/templates/locationTwo.geojson

+{
+"type": "FeatureCollection",
+"name": "data_point",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "id": null, "name": "datapoint" }, "geometry": { "type": "Point", "coordinates": [ 9.196387, 48.836279 ] } }
+]
+}

vcm/templates/story/README.md

+Integrate virtualcitySTORY into existing MAP
+
+- copy story folder + items.json in templates folder
+
+- add to index.html
+  <link rel="stylesheet" href="templates/story/story.css">
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
+                  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+                  crossorigin="anonymous"></script>
+  <script src="templates/story/virtualcitystory.js"></script>
+  
+                
+               
+- add HTML Code to index.html (remove existing html elements)
+
+<header class="tour-header vcm-header-height vcm-header-base vcm-border-splash">
+      <div id="header">
+          <div class="logo-box vcm_copyright_headerLogoBox">
+              <div class="company-logo"></div>
+          </div>
+          <div class="title-box vcm_copyright_headerTitle"></div>
+          <div class="tool-box" style="cursor:pointer"></div>
+      </div>
+  </header>
+  <div id="story-frame" class="startscreen vcm-map-top">
+      <!-- Content Start Screen -->
+      <div class="balloon teaser-balloon" id="balloon-startscreen">
+          <div class="balloon-content">
+              <h1 class="balloon-title i18n_balloon_startscreen_title">
+                  Willkommen<br>zur interaktiven<br>Storytelling Demo Tour
+              </h1>
+              <button id="tourstart-btn" class="buttonset one"><span class="i18n_balloon_startscreen_btn">Start</span>
+              </button>
+          </div>
+          <div class="dialog-image-balloon"></div>
+          <div class="balloon-left-edge"></div>
+      </div>
+      <!-- End of: Content Start Screen -->
+      <!-- Content Tour -->
+      <div id="tour-frame" style="display: none; /*overflow: hidden;*/">
+          <div class="tour-top-navi">
+              <a href="#demo-viewpoint" class="top-nav buttonset one"><i class="fa fa-globe"></i> Viewpoint</a>
+              <a href="#demo-hiding" class="top-nav buttonset one"><i class="fa fa-eye-slash"></i> Hiding</a>
+              <a href="#demo-highlight" class="top-nav buttonset one"><i class="fa fa-building"></i> Higlighting</a>
+              <a href="#demo-planning" class="top-nav buttonset one"><i class="fa fa-building"></i> Planning</a>
+              <a href="#demo-layer" class="top-nav buttonset one"><i class="fa fa-exchange"></i> Layer Switch</a>
+              <a href="#demo-labels" class="top-nav buttonset one"><i class="fa fa-tag"></i> Labels</a>
+              <a href="#demo-poi" class="top-nav buttonset one"><i class="fa fa-map-marker"></i> POI</a>
+              <a href="#demo-rotate" class="top-nav buttonset one"><i class="fa fa-repeat"></i> Rotate</a>
+              <a href="#story_start" class="top-nav buttonset one"><i class="fa fa-arrow-up"></i></a>
+
+          </div>
+
+          <div id="story-box" class="ui-scroll-content">
+              <!--div id="story-scroll"-->
+              <!-- <div id="story-scroll" class="scroll-container"> -->
+              <div id="story_start" class="story-content">
+                  <h1>virtualcitySYSTEMS</h1>
+                  <h2>Storytelling starts here</h2>
+                  <p><span>ScrollInteraction : Jump To Viewpoint</span></p>
+                  <div style="height:100px"></div>
+                  <div class="divider"></div>
+              </div>
+              <!-- Demo Viewpoint -->
+              <div id="demo-viewpoint" class="story-content">
+                  <h2>Jump to viewpoint</h2>
+                  <p><p><span>ScrollInteraction: Jump To Viewpoint</span></p></p>
+                  <p>
+                      <img src="images/backgrd.png" width="850" height="669" class="scale"><br>
+                  </p>
+                  <p><p><span>ClickInteractions: Interaction Chaining, jump to three viewpoints </span></p></p>
+                  <p class="button-line">
+                      <button id="demo-viewpointbutton" class="story-btn buttonset one">
+                          <i class="fa fa-landmark"></i>
+                          <span class="i18n_btn_science">Viewpoint Chaining on ButtonClick</span>
+                      </button>
+                  </p>
+                  <div style="height:100px"></div>
+                  <div class="divider"></div>
+              </div>
+              <!-- Demo hide buildings -->
+              <div id="demo-hiding" class="story-content">
+                  <h2>Hiding Buildings</h2>
+                  <p>text text text</p>
+                  <p>
+                      <img src="images/backgrd.png" width="850" height="669" class="scale"><br>
+                  </p>
+                  <p class="button-line">
+                      <button class="story-btn buttonset one" id="hideMyBuildingsButton">
+                          <i class="far fa-eye-slash"></i>
+                          <span>Hide my Buildings</span>
+                      </button>
+                  </p>
+                  <div style="height:100px"></div>
+                  <div class="divider"></div>
+              </div>
+              <!-- Demo highlight Builings -->
+              <div id="demo-highlight" class="story-content">
+                  <h2>Highlight Buildings</h2>
+                  <p>text text text</p>
+                  <p>
+                      <img src="images/backgrd.png" width="850" height="669"
+                           class="scale"><br>
+                  </p>
+                  <p class="button-line">
+                      <button class="story-btn buttonset two" id="highlightMyBuildingButton">
+                          <i class="far fa-building"></i>
+                          <span class="i18n_btn_science">Highlight my Buildings</span>
+                      </button>
+                  </p>
+                  <div style="height:100px"></div>
+                  <div class="divider"></div>
+              </div>
+              <!-- Demo switch Layer -->
+              <div id="demo-layer" class="story-content">
+                  <h2>Show my Layer</h2>
+                  <p>text text text</p>
+                  <p>
+                      <img src="images/backgrd.png" width="850" height="669" class="scale"><br>
+                  </p>
+                  <p class="button-line">
+                      <button class="story-btn buttonset one" id="hidActivateLayerButton">
+                          <i class="fa fa-exchange"></i>
+                          <span>buildings</span>
+                      </button>
+                      <button class="story-btn buttonset one" id="hidActivateLayerButton2">
+                          <i class="fa fa-exchange"></i>
+                          <span>lehrpfad</span>
+                      </button>
+                  </p>
+                  <div style="height:100px"></div>
+                  <div class="divider"></div>
+              </div>
+              <!-- Demo show Planning -->
+              <div id="demo-planning" class="story-content">
+                  <h2>Show my Plannings</h2>
+                  <p>text text text</p>
+                  <p>
+                      <img src="images/backgrd.png" width="850" height="669"
+                           class="scale"><br>
+                  </p>
+                  <div style="height:100px"></div>
+                  <div class="divider"></div>
+              </div>
+              <!-- Demo Rotate -->
+              <div id="demo-rotate" class="story-content">
+                  <h2>Rotate around a viewpoint</h2>
+                  <p>text text text</p>
+                  <p>
+                      <img src="images/backgrd.png" width="850" height="669"
+                           class="scale"><br>
+                  </p>
+                  <p class="button-line" id="rotateButton">
+                      <button class="story-btn  buttonset one">
+                          <i class="fa fa-repeat"></i>
+                          <span>Rotate</span>
+                      </button>
+                  </p>
+                  <div style="height:100px"></div>
+                  <div class="divider"></div>
+              </div>
+              <!--/div-->
+          </div>
+      </div>
+      <div id="tour-button" >
+          <i class="fa"></i>
+      </div>
+      <!-- End of: Content Tour -->
+  </div>
+
+  <div id="vcs_map_container"></div>

vcm/templates/story/story.css

+/* custom styles */
+body{
+    overflow: hidden;
+    margin: 0;
+    font-family: Arial, sans-serif;
+    color: #444444;
+}
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: none;
+    background-color: #ececec;
+}
+
+p {
+    -webkit-margin-after: initial;
+}
+
+/*--------- Color Settings ---------------------*/
+
+/* Border Header */
+header{
+    border-bottom-color: #000000;
+}
+
+.buttonset.one{
+    background-color: #000000;
+}
+.buttonset.one:hover{
+    background-color: #5e5e5e;
+}
+.buttonset.two{
+    background-color: #000000;
+}
+.buttonset.two:hover{
+    background-color: #5e5e5e;
+}
+h1{
+    color: #000000;
+}
+h2{
+    color: black;
+}
+.divider{
+    background: #000000;
+}
+
+/*Hintergrundfarbe Aktive Storyelemente*/
+.story-content.active{
+    background-color: #F3F3F3;
+}
+
+
+/* Balloon Login Screen*/
+.balloon.teaser-balloon h1{
+    color: #595f3c;
+}
+.balloon {
+    border: 5px solid #000000;
+}
+.balloon:before {
+    border-color: #000000 transparent;
+}
+/*Hintergrundbild Startscreen*/
+#story-frame.startscreen{
+    background: url("../../images/content/contentboeckingerstrasse/grafik_aufgabenstellung.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+/*---------------------------------------------*/
+
+
+header{
+    position: fixed;
+    z-index: 30;
+    width: 100%;
+}
+
+
+
+/* balloon widget */
+div.balloon-content p.balloon-footnote {
+    line-height: 1em;
+    font-style: italic;
+    font-size: small;
+}
+div.logo-box {
+    width: 12rem;
+}
+
+div.cover-fill {
+    width: 10rem;
+}
+div.title-fill {
+    width: auto;
+    left: 12rem;
+    right: 18rem;
+}
+
+.top-nav{
+    display: inline-block;
+    color: white;
+    font-weight: bold;
+    padding: 4px;
+    margin-bottom: 4px;
+    border-radius: 2px;
+    font-size: .9rem;
+    text-decoration: none;
+}
+
+#story-frame{
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 25;
+    background: white;
+    -webkit-transition: top .5s ease-in;
+    -moz-transition: top .5s ease-in;
+    -o-transition: top .5s ease-in;
+    transition: top .5s ease-in;
+}
+#story-frame.tour{
+    top: 50%;
+	left: 0;
+    bottom: 0;
+    padding: 3rem 2rem 1rem 3rem;
+}
+#story-frame.tour-stop {
+    top: 100%;
+}
+.vcs_map_container{
+    bottom: 50%;
+}
+
+
+#balloon-startscreen.balloon{
+    position: absolute;
+    top: 20%;
+    left: 4%;
+	right: 4%;
+}
+
+#balloon-startscreen button,
+.story-btn{
+    border: none;
+    display:inline-block;
+    position: relative;
+    cursor:pointer;
+    color:#ffffff;
+    font-size:17px;
+    font-weight: 600;
+    padding:7px 25px;
+    margin: 1.5rem .5rem .5rem 0;
+    text-decoration:none;
+    /*text-shadow:0px 1px 0px #810e05;*/
+    border-radius: 4px;
+}
+
+#balloon-startscreen button:active,
+.story-btn:active{
+    position:relative;
+    top:1px;
+}
+.balloon.teaser-balloon{
+    position: absolute;
+    top: 110px;
+    left: 10px;
+    min-width: 15rem;
+}
+.balloon.teaser-balloon.simple{
+    min-width: 8.3rem;
+    padding: 0 0 0.6rem 0;
+    z-index: 8;
+    cursor: pointer;
+}
+
+.balloon.teaser-balloon.simple .balloon-left-edge{
+    right: 90px;
+}
+.balloon.teaser-balloon h1{
+    font-size: 1.5rem;
+    line-height: 2.5rem;
+    margin-right: 0;
+}
+.teaser-logo{
+    display: inline-block;
+    width: 60%;
+    max-width: 180px;
+    float: right;
+    margin-top: 1rem;
+    margin-bottom: .5rem;
+}
+.teaser-logo.logo-square{
+    width: 30%;
+    max-width: 100px;
+}
+
+.balloon.simple h1.simple-balloon-title{
+    margin-top: .75rem;
+    font-size: .9rem;
+    line-height: 1rem;
+}
+#balloon-startscreen .balloon-content{
+    margin: 1rem;
+}
+
+
+/* tour-frame */
+#tour-frame{
+    position: absolute;
+    top: 1rem;
+    bottom: 1rem;
+    left: 0;
+    right: 0;
+}
+.tour-top-navi{
+    position: relative;
+    height: 4rem;
+    margin: 0 1rem;
+}
+.divider-box{
+    height: 100px;
+}
+.divider{
+    height: 10px;
+}
+#story-box{
+    position: absolute;
+    top: 4rem;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+#story-scroll.scroll-container{
+    margin-right: .5rem;
+}
+#story-box.ui-scroll-content {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    overflow-y: scroll;
+}
+#story-box h1{
+    font-size: 2rem;
+    line-height: 2rem;
+    margin-bottom: 1.5rem;
+}
+#story-box h2{
+    font-size: 1.5rem;
+    line-height: 3rem;
+}
+
+#story-box p{
+    font-size: 1rem;
+    line-height: 1.8rem;
+}
+#story-box p.button-line{
+    text-align: center;
+    margin: 1.5rem 0;
+}
+#story-box p.image-wrap{
+	position: relative;
+	overflow: hidden;
+    line-height: 0;
+    margin: 0;
+}
+
+.story-content .story-slider{
+    height: 300px;
+}
+
+
+
+.story-content{
+    margin-bottom: 100px;
+}
+
+.movie-wrap{
+	width: 100%;
+    height: auto;
+    min-height: 300px;
+    margin-top: 1rem;
+}
+
+#tour-button {
+    display: block;
+    position: absolute;
+    left: -31px;
+    background-color: #000000;
+    top: 10px;
+    padding:.45rem .55rem;
+}
+#tour-button > i:before{
+    content: "\f061";
+}
+.tour-inactive > #tour-button > i:before{
+    content: "\f060";
+}
+@media screen and (min-width:48em /*768px*/) {
+	.vcs_map_container{
+		bottom: 0px;
+		right: 45%
+	}
+	#story-frame{
+/*		-webkit-transition: left .5s ease-in;
+		-moz-transition: left .5s ease-in;
+		-o-transition: left .5s ease-in;
+		transition: left .5s ease-in;*/
+	}
+	#story-frame.tour {
+		left: 55%;
+		top: 5rem;
+	}
+    #story-frame.tour-stop {
+        left: 120%;
+        top: 5rem;
+    }
+    #render-story-off-btn.story-render-btn{
+        right: 45%;
+        left: auto;
+        bottom: 0;
+        padding: .1rem .75rem;
+    }
+    #render-story-on-btn.story-render-btn{
+        right: 0;
+        left: auto;
+        bottom: 0;
+        padding: .1rem .65rem;
+    }
+    #render-story-off-btn.story-render-btn .story-btn-icon:after{
+         content: '\f105';
+     }
+    #render-story-on-btn.story-render-btn .story-btn-icon:after{
+        content: '\f104';
+    }
+	#tour-frame {
+		top: 1rem;
+	}
+	.tour-top-navi {
+		margin: 0 1rem;
+	}
+	div.tool-box {
+		width: auto;
+	}
+	#balloon-startscreen.balloon {
+		position: absolute;
+		top: 9%;
+		left: 20%;
+		right: auto;
+	}
+    .balloon.teaser-balloon {
+        left: 2%;
+    }
+    #logoContainer{
+        display: none;
+    }
+}
+
+#logoContainer{
+    display: none;
+}
+
+@media screen and (min-width:64em /*1024px*/) {
+	.tour-top-navi {
+		margin: 0 2rem;
+	}
+    #story-box.ui-scroll-content {
+        padding-left: 2rem;
+        padding-right: 2rem;
+        overflow-y: scroll;
+    }
+    #story-scroll.scroll-container{
+        margin-right: 1.5rem;
+    }
+    .balloon.teaser-balloon {
+        left: 4%;
+    }
+}
+
+@media screen and (min-width:75em /*1200px*/) {
+	.vcs_map_container{
+		right: 40%
+	}
+	#story-frame.tour {
+		left: 60%;
+	}
+    .vcs_map_container.story-on{
+        right: 40%;
+        bottom: 0;
+    }
+    #render-story-off-btn.story-render-btn{
+        right: 40%;
+    }
+    #render-story-on-btn.vcs_map_container{
+        right: 40%;
+        bottom: 0;
+    }
+    .balloon.teaser-balloon {
+        left: 10px;
+    }
+    #logoContainer{
+        display: block;
+    }
+}
+
+.vcs_map_container.tour-inactive{
+    right: 0px;
+}
+
+#story-frame.tour-inactive{
+    left: 100%;
+}
+
+.hidden {
+    display: none!important;
+}

vcm/templates/story/virtualcitystory.js

+var globalActions = [];
+var items = [];
+var currentActions = [];
+var currentHtmlID = null;
+var globalChainID = 0;
+var disableMovement = false;
+var allowMapSwitch = false;
+
+var loadStoryConfig = function (url, callback) {
+    $.ajax({
+        dataType:"json",
+        url: url,
+        success:callback,
+    });
+};
+
+var setupStartHandler = function(data){
+    if(data.startButton) {
+        $("#" + data.startButton).click(startStory);
+    }
+    if(data.disableMovement) {
+        framework.subscribe("MAP_ACTIVATED", function(map) {
+            setMapMovement(false);
+        });
+    }
+};
+var tourActive = true;
+var startStory = function() {
+    $("#story-frame").removeClass("startscreen", 1000);
+    $("#balloon-startscreen").hide();
+    $("#story-frame").addClass("tour");
+    $("#tour-frame").show();
+    $("#story-box").scroll(function(){
+        var contentOffset =  $("#story-box").offset().top;
+        var contentHeight = $("#story-box").height();
+        $(".story-content").removeClass("active").each(function() {
+            var offset = $(this).offset().top;
+            var height  = $(this).height();
+            var localoffset = offset - contentOffset;
+            var localbottom = localoffset + height;
+            var localHeight = localbottom - localoffset;
+            if(localoffset > 0 || (localbottom > 100 )) {
+                var id = $(this).attr('id');
+                $(this).addClass("active");
+                if(id !== currentHtmlID) {
+                    currentHtmlID = id;
+                    var item = getItemForHtmlID(id);
+                    if (item && item.doScroll) {
+                        item.doScroll();
+                    }
+                }
+                return false;
+            }
+        });
+    });
+    $("#story-box").children().first().scroll();
+    if(allowMapSwitch) {
+        $("#tour-button").click(function () {
+            if (tourActive) {
+                tourActive = false;
+                showMap();
+            } else {
+                tourActive = true;
+                showTour();
+            }
+        });
+    } else {
+        $("#tour-button").hide();
+    }
+    showMap();
+};
+
+var setupItems = function(data) {
+    items = data.items;
+    for (var i = 0; i < items.length; i++) {
+        var item = items[i];
+        var htmlID = item.htmlID;
+        if(!htmlID) {
+            console.log('could not load ITEM ', item);
+            continue;
+        }
+        if($(htmlID).length <= 0) {
+            console.log('could not find HTML Element ', htmlID);
+            continue;
+        }
+
+
+        if(item.clickInteraction && Array.isArray(item.clickInteraction) && item.clickInteraction.length > 0) {
+            $(htmlID).click(function(item) {
+                var actions = [];
+                globalChainID++;
+                var chainID = globalChainID;
+                for(var j = 0; j < item.clickInteraction.length; j++) {
+                    var action = item.clickInteraction[j];
+                    actions.push(doAction.bind(this, action, true));
+                }
+                function chain(fn) {
+                    if(fn && chainID === globalChainID) {
+                        fn(function() {chain(actions.shift()) });
+                    }
+                }
+                chain(actions.shift());
+
+            }.bind(null, item));
+        }
+        if(item.scrollInteraction && Array.isArray(item.scrollInteraction) && item.scrollInteraction.length > 0) {
+            item.doScroll = function(item) {
+                var actions = [];
+                globalChainID++;
+                var chainID = globalChainID;
+                clearActions();
+                for(var j = 0; j < item.scrollInteraction.length; j++) {
+                    var action = item.scrollInteraction[j];
+                    currentActions.push(action);
+                    actions.push(doAction.bind(this, action, true));
+                }
+                function chain(fn) {
+                    if(fn && chainID === globalChainID) {
+                        fn(function() {chain(actions.shift()) });
+                    }
+                }
+                chain(actions.shift());
+            }.bind(null, item);
+        }
+    }
+};
+
+
+
+vcs.vcm.Framework.getInstance().subscribe("MAP_LOADED", function() {
+
+});
+
+var framework = vcs.vcm.Framework.getInstance();
+vcs.vcm.Framework.loadConfig("config.json");
+loadStoryConfig("templates/items.json", function(data) {
+    console.log(data);
+    globalActions = data.actions;
+    disableMovement = data.disableMovement;
+    allowMapSwitch = data.allowMapSwitch;
+    setupStartHandler(data);
+    setupItems(data);
+});
+var clearActions = function() {
+    for(var i = 0; i < currentActions.length; i++) {
+        clearAction(currentActions[i]);
+    }
+    currentActions = [];
+};
+var getItemForHtmlID = function(id) {
+    var jqueryID = "#" + id;
+    for(var i =0; i < items.length; i++ ) {
+        if(items[i].htmlID && items[i].htmlID === jqueryID) {
+            return items[i];
+        }
+    }
+}
+
+var getAction = function(action) {
+    if(typeof action === 'string') {
+        for(var i = 0; i < globalActions.length; i++) {
+            if( globalActions[i].id === action) {
+                return globalActions[i];
+            }
+        }
+    }
+    return action;
+};
+
+var clearAction = function(action) {
+    var actionObject = getAction(action);
+    if(typeof actionObject  === 'object') {
+        var type = actionObject.type;
+
+        switch(type) {
+            case 'viewpoint':
+                // do nothing
+                break;
+            case 'highlight':
+                clearHighlight(actionObject);
+                break;
+            case 'hide':
+                clearHide(actionObject);
+                break;
+            case 'layer':
+                deactivateLayer(actionObject);
+                break;
+            case 'geojson':
+                deactivateGeojson(actionObject);
+                break;
+            case 'model':
+                deactivateModel(actionObject);
+                break;
+            case 'rotate':
+                stopRotation(actionObject);
+                break;
+            default:
+                console.log(type + ' is not a defined action');
+        }
+    } else {
+        console.log(action + ' is not a valid action');
+    }
+};
+
+var doAction = function(action, clearOnActive, callback) {
+    var actionObject = getAction(action);
+    if(typeof actionObject  === 'object') {
+        var type = actionObject.type;
+
+        switch(type) {
+            case 'viewpoint':
+                gotoViewPoint(actionObject, callback);
+                break;
+            case 'highlight':
+                if(clearOnActive && actionObject.active) {
+                    clearHighlight(actionObject);
+                } else {
+                    highlight(actionObject);
+                }
+                callback();
+                break;
+            case 'hide':
+                if(clearOnActive && actionObject.active) {
+                    clearHide(actionObject);
+                } else {
+                    hide(actionObject);
+                }
+                callback();
+                break;
+            case 'layer':
+                if(clearOnActive && actionObject.active) {
+                    deactivateLayer(actionObject);
+                } else {
+                    activateLayer(actionObject);
+                }
+                callback();
+                break;
+            case 'geojson':
+                if(clearOnActive && actionObject.active) {
+                    deactivateGeojson(actionObject);
+                } else {
+                    activateGeojson(actionObject);
+                }
+                callback();
+                break;
+            case 'model':
+                if(clearOnActive && actionObject.active) {
+                    deactivateModel(actionObject);
+                } else {
+                    activateModel(actionObject);
+                }
+                callback();
+                break;
+            case 'rotate':
+                if(clearOnActive && actionObject.active) {
+                    stopRotation(actionObject);
+                } else {
+                    rotate(actionObject);
+                }
+                callback();
+                break;
+            default:
+                console.log(type + ' is not a defined action');
+        }
+    } else {
+        console.log(action + ' is not a valid action');
+    }
+};
+
+var gotoViewPoint = function(viewpointObject, callback) {
+    if(!viewpointObject.viewpoint) {
+        console.log('Could not goto Viewpoint ', viewpointObject);
+        return;
+    }
+    var viewpoint = new vcs.vcm.util.ViewPoint(viewpointObject.viewpoint);
+    framework.getActiveMap().gotoViewPoint(viewpoint, null, null, callback);
+};
+
+var highlight = function(action) {
+    if (action.ids) {
+        var layerNames = action.layerNames;
+        var layers = framework.getLayers();
+        var highlightIDs = action.ids;
+        for (var key in highlightIDs) {
+            if(highlightIDs.hasOwnProperty(key)) {
+                var color = highlightIDs[key];
+                if(!(color instanceof Cesium.Color)) {
+                    var cesiumColor = Cesium.Color.fromCssColorString(color);
+                    highlightIDs[key] = cesiumColor;
+                }
+            }
+        }
+        for (var i = 0; i< layers.length; i++) {
+            var layer = layers[i];
+            if(layer instanceof vcs.vcm.layer.cesium.Buildings) {
+                if(!layerNames || layerNames.indexOf(layer.getName()) >= 0) {
+                    layer.highlight(highlightIDs);
+                }
+            }
+        }
+        action.active = true;
+    }
+};
+var clearHighlight = function(action) {
+    if (action.ids) {
+        var layerNames = action.layerNames;
+        var layers = framework.getLayers();
+        var highlightIDs = action.ids;
+        var toUnhighlight = [];
+        for (var key in highlightIDs) {
+            toUnhighlight.push(key);
+        }
+        for (var i = 0; i< layers.length; i++) {
+            var layer = layers[i];
+            if(layer instanceof vcs.vcm.layer.cesium.Buildings) {
+                if(!layerNames || layerNames.indexOf(layer.getName()) >= 0) {
+                    layer.unHighlight(toUnhighlight);
+                }
+            }
+        }
+        action.active = false;
+    }
+};
+var hide = function(action) {
+    if (action.ids) {
+        var layerNames = action.layerNames;
+        var layers = framework.getLayers();
+        var idsToHide = action.ids;
+        for (var i = 0; i< layers.length; i++) {
+            var layer = layers[i];
+            if(layer instanceof vcs.vcm.layer.cesium.Buildings) {
+                if(!layerNames || layerNames.indexOf(layer.getName()) >= 0) {
+                    layer.hideObjects(idsToHide);
+                }
+            }
+        }
+        action.active = true;
+    }
+};
+var clearHide = function(action) {
+    if (action.ids) {
+        var layerNames = action.layerNames;
+        var layers = framework.getLayers();
+        var idsToHide = action.ids;
+        for (var i = 0; i< layers.length; i++) {
+            var layer = layers[i];
+            if(layer instanceof vcs.vcm.layer.cesium.Buildings) {
+                if(!layerNames || layerNames.indexOf(layer.getName()) >= 0) {
+                    layer.showObjects(idsToHide);
+                }
+            }
+        }
+        action.active = false;
+    }
+};
+var activateLayer = function(action) {
+    if (action.layerNames || action.layerNamesInactive) {
+        var layerNamesToActivate = action.layerNames || [];
+        var layerNamesToDeactivate = action.layerNamesInactive || [];
+        var layers = framework.getLayers();
+        for (var i = 0; i< layers.length; i++) {
+            var layer = layers[i];
+            if(layerNamesToActivate.indexOf(layer.getName()) >= 0) {
+                layer.activate(true);
+            } else if(layerNamesToDeactivate.indexOf(layer.getName()) >= 0) {
+                layer.activate(false);
+            }
+        }
+        if(!action.subscription) {
+            action.subscription = true;
+            framework.subscribe("LAYER_CHANGED", function(layer){
+                var layerNames = this.layerNames;
+                if(layerNames.indexOf(layer.getName()) >= 0) {
+                    if(layer.isActive() !== this.active) {
+                        this.active = layer.isActive();
+                    }
+                }
+            }.bind(action));
+        }
+        framework.subscribe
+        action.active = true;
+    }
+};
+var deactivateLayer = function(action) {
+    if (action.layerNames || action.layerNamesInactive) {
+        var layerNamesToActivate = action.layerNamesInactive || [];
+        var layerNamesToDeactivate = action.layerNames || [];
+        var layers = framework.getLayers();
+        for (var i = 0; i< layers.length; i++) {
+            var layer = layers[i];
+            if(layerNamesToActivate.indexOf(layer.getName()) >= 0) {
+                layer.activate(true);
+            } else if(layerNamesToDeactivate.indexOf(layer.getName()) >= 0) {
+                layer.activate(false);
+            }
+        }
+        action.active = false;
+    }
+};
+var activateGeojson = function(action) {
+    if(action.featureUrl) {
+        if(!action.layer) {
+            action.layer = new vcs.vcm.layer.GeoJSON( {
+                url: action.featureUrl,
+                projection: {
+                    epsg: 4326
+                },
+            });
+            framework.addLayer(action.layer);
+        }
+        action.layer.activate(true);
+        action.active = true;
+    }
+};
+var deactivateGeojson = function(action) {
+    if(action.layer) {
+        action.layer.activate(false);
+        action.active = false;
+    }
+};
+
+var activateModel = function(action) {
+    if(action.models) {
+        if(!action.layer) {
+            action.layer = new vcs.vcm.layer.cesium.Gltf({
+                projection: {epsg: 4326},
+                allowPicking: false,
+                models: action.models
+            });
+            framework.addLayer(action.layer);
+        }
+        action.layer.activate(true);
+        action.active = true
+    }
+};
+
+var deactivateModel = function(action) {
+    if(action.layer) {
+        action.layer.activate(false);
+        action.active = false;
+    }
+};
+
+var rotate = function(action) {
+    if(action) {
+        var map = framework.getActiveMap();
+        var widget = framework.getWidgetByType("vcs.vcm.widgets.NavigationControls");
+        if(widget) {
+            widget.rotateAroundCenterPosition(map, true);
+        }
+        action.active = true
+    }
+};
+
+var stopRotation = function(action) {
+    if(action) {
+        var map = framework.getActiveMap();
+        var widget = framework.getWidgetByType("vcs.vcm.widgets.NavigationControls");
+        if(widget) {
+            widget.rotateAroundCenterPosition(map, false);
+        }
+        action.active = false;
+    }
+};
+
+
+var showMap = function() {
+    $("#vcs_map_container").addClass("tour-inactive");
+    $("#story-frame").addClass("tour-inactive");
+    $("#widget-box").removeClass("hidden");
+    $(".mapControls").removeClass("hidden");
+    $(".tool-box").addClass("hidden");
+    $(".tour-header").addClass("hidden");
+    setMapMovement(true);
+};
+
+var showTour = function() {
+    $("#vcs_map_container").removeClass("tour-inactive");
+    $("#story-frame").removeClass("tour-inactive");
+    $("#widget-box").addClass("hidden");
+    $(".mapControls").addClass("hidden");
+    $(".tool-box").addClass("hidden");
+    $(".tour-header").removeClass("hidden");
+    if(disableMovement) {
+        setMapMovement(false);
+    }
+};
+
+var setMapMovement = function(value) {
+    var map = vcs.vcm.Framework.getInstance().getActiveMap();
+    if(map instanceof vcs.vcm.maps.Cesium) {
+        var scene = map.getScene();
+        scene.screenSpaceCameraController.enableRotate = value;
+        scene.screenSpaceCameraController.enableTranslate = value;
+        scene.screenSpaceCameraController.enableZoom = value;
+        scene.screenSpaceCameraController.enableTilt = value;
+        scene.screenSpaceCameraController.enableLook = value;
+    }
+}