Integrate INSIDE Online Map Engine into client website

 

>>>> Important note: This is a preliminary document. All content is subject to change!  <<<<

 

For integration of the INSIDE Online Map Engine into your website please follow the subsequent steps:

 

1. Add the js / css files to the head of your site:

https://insideguidance.com/integrations/assets/tdom.js

https://insideguidance.com/integrations/assets/tdom.css

 

add an optional css file for styling by INSIDE (including bootstrap):

https://insideguidance.com/integrations/assets/tdom-internal.css

 

Note: these scripts contain the following dependencies: jquery, bootstrap, other minor libraries

 

2. Add the html nodes:

Add the following html-snippet to the body of your site:

 


<!-- hud --> <script id='hud-tmpl' type='text/template'> <div class='hud-content'> <div aria-label='zoom' class='zoom-group btn-group' role='group'> <button class='btn btn-secondary minus' type='button'>-</button> <button class='btn btn-secondary plus' type='button'>+</button> </div> </div> </script> <!-- tableview --> <script id='tableview-tmpl' type='text/template'> <div class='tableview'> <div class='tableview-activity'></div> <div class='tableview-header'></div> <div class='tableview-sections'></div> <div class='tableview-footer'></div> </div> </script> <script id='tableview-section-tmpl' type='text/template'> <div class='tableview-section'> <div class='tableview-section-header'></div> <div class='tableview-rows'></div> </div> </script> <script id='tableview-active-row-tmpl' type='text/template'> <div class='tableview-row'> <a class='action' href=''></a> </div> </script> <script id='tableview-row-tmpl' type='text/template'> <div class='tableview-row'></div> </script> <!-- special --> <script id='tableview-selectbox-row-tmpl' type='text/template'> <div class='tableview-row'> <div class='title'></div> <div class='action-buttons'> <span class='all-button'> <input class='select-box' type='checkbox'> </span> <span> <a class='focus-button' href='#'></a> </span> </div> </div> </script> <!-- special --> <script id='edit-controls' type='text/template'> <div class='edit-controls read-mode'> <h3 class='list-title'></h3> <div class='controls'> <p> <button class='btn btn-outline-primary btn-block createButton'>Create</button> <div class='btn-group d-flex' role='group'> <button class='w-100 btn btn-sm btn-outline-danger delete-tdomLocs-button'>Delete selected</button> <button class='w-100 btn btn-sm btn-outline-danger save-tdomLocs-button'>Save all</button> <button class='w-100 btn btn-sm btn-outline-danger transform-selected-button'>Apply remote origin</button> </div> </p> <form> <div class='form-group'> <label> <input checked class='snap-to-existing' type='checkbox'> Snap to align existing objects </label> <label class='control-label'>Snap to grid:</label> <input class='form-control tool-snap' type='text'> </div> </form> </div> </div> </script> <script id='tableview-selectall-sectionheader-tmpl' type='text/template'> <button class='btn btn-sm btn-outline-primary select-all-button'>Select all</button> <span class='action-name'>Focus</span> </script> <!-- graph view --> <script id='graph-view-tmpl' type='text/template'> <div class='card card-section hidden-mode'> <h3 class='card-header'>Scene graph</h3> <div class='card-body'> <div class='graph-header'> <button class='btn btn-sm btn-outline-primary createButton' type='button'>Create</button> <div class='bumper'></div> <span class='sec-header'>Secondary</span> </div> <div class='activity'></div> <ol class='sortable-root'></ol> </div> </div> </script> <script id='graph-view-row-tmpl' type='text/template'> <li> <div class='attributes'> <div class='handle'></div> <a class='focus-button content' href='' type=''>node name</a> <input class='sec-select' type='checkbox'> </div> <ol></ol> </li> </script> <!-- attributes-view --> <script id='form-group-tmpl' type='text/template'> <div class='form-group row'> <label class='col-form-label col-sm-4 control-label text-truncate'></label> <div class='col-sm-8'> <div class='input-group'> <span class='form-placeholder value'></span> <input class='form-control value prop' type='text'> <div class='input-group-append'> <span class='input-group-text unit'></span> </div> </div> </div> </div> </script> <script id='form-group-boolean-tmpl' type='text/template'> <div class='form-group row'> <label class='col-form-label col-sm-4 control-label text-truncate'></label> <div class='col-sm-8'> <div class='input-group-prepend'> <span class='form-placeholder value'></span> </div> <div class='checkbox'> <label> <input class='value' type='checkbox'> </label> </div> </div> </div> </script> <script id='form-group-fix-tmpl' type='text/template'> <div class='form-group row'> <label class='col-form-label col-sm-4 control-label text-truncate'></label> <div class='col-sm-8'> <div class='input-group'> <div class='input-group-prepend'> <span class='form-placeholder value'></span> </div> <input class='form-control value prop' readonly type='text'> </div> </div> </div> </script> <script id='attributes-view-tmpl' type='text/template'> <div class='properties card card-section read-mode'> <h3 class='card-header main-title'>Properties</h3> <div class='card-body'> <div class='editButtons'> <button class='btn btn-outline-primary btn-block editButton'>Edit</button> <div class='btn-group d-flex' role='group'> <button class='w-100 btn btn-outline-primary cancel-button'>Cancel</button> <button class='w-100 btn btn-outline-primary saveButton'>Save</button> <button class='w-100 btn btn-outline-danger deleteButton'>Delete</button> </div> </div> <form class='ig-sm' role='form'></form> </div> </div> </script> <!-- navigation view --> <script id='navigation-view-tmpl' type='text/template'> <div class='card card-section'> <h3 class='card-header'>Navigation nodes</h3> <div class='card-body'> <div class='controls'> <div class='options'> <form> <div class='form-group tools-navigationNode'> <label>NavigationNode Tool:</label> <div class='btn-group btn-group-toggle d-flex' data-toggle='buttons' role='group'> <label class='btn btn-outline-primary disabled w-100'> <input autocomplete='off' class='tool-select' name='options' type='radio'> <div class='small'>select</div> </label> <label class='btn btn-outline-primary active w-100'> <input autocomplete='off' checked class='tool-create' name='options' type='radio'> <div class='small'>create</div> </label> <label class='btn btn-outline-primary w-100'> <input autocomplete='off' class='tool-delete' name='options' type='radio'> <div class='small'>delete</div> </label> </div> </div> <div class='form-group tools-connection'> <label>Connection Tool:</label> <div class='btn-group btn-group-toggle d-flex' data-toggle='buttons' role='group'> <label class='btn btn-outline-primary w-100'> <input autocomplete='off' class='tool-none' name='options' type='radio'> <div class='small'>none</div> </label> <label class='btn btn-outline-primary active w-100'> <input autocomplete='off' checked class='tool-connect' name='options' type='radio'> <div class='small'>connect</div> </label> <label class='btn btn-outline-primary w-100'> <input autocomplete='off' class='tool-un-connect' name='options' type='radio'> <div class='small'>(un)connect</div> </label> </div> </div> <div class='form-group'> <label> <input checked class='snap-to-existing' type='checkbox'> Snap to align existing objects </label> <label class='control-label'>Snap to grid:</label> <input class='form-control tool-snap' type='text'> </div> <div class='form-group'> <label> <input checked class='save-on-unfocus' type='checkbox'> Save on unfocus </label> </div> </form> </div> </div> </div> </div> </script>

 

 
<div class='scene-engine'>
 <section id='toolbar'>
   <!-- Nav tabs -->
   <ul class='nav nav-pills'>

    <li class='nav-item'><a class='nav-link' data-toggle='tab' href='#visitor-tab'>Visitor View</a></li>
     <li class='nav-item'><a class='nav-link' data-toggle='tab' href='#map-tab'>Browse</a></li>
     <li class='nav-item'><a class='nav-link' data-toggle='tab' href='#scene-tab'>Scene Editor</a></li>
     <li class='nav-item'><a class='nav-link' data-toggle='tab' href='#tdomlocs-tab'>TdomLoc Editor</a></li>
     <li class='nav-item'><a class='nav-link' data-toggle='tab' href='#navigation-tab'>Navigation Editor</a></li>
     <li class='nav-item'><a class='nav-link' data-toggle='tab' href='#beacon-tab'>Beacon Editor</a></li>
   </ul>
 </section>
 <nav id='left-pane'>
   <div id='pages'></div>
   <div id='scenegraph'></div>
   <div id='selection'></div>
 </nav>
 <section data-locale='de' data-project-id='hannovermesse' data-host='https://www.insideguidance.com' id='map'>
   <div class='infobox'>
 </div>
 </section>
 <section id='right-pane'>
<div id='exhibitors'></div>

<div id='events'>

</div> <div id='sceneNode-attributes'></div> <div id='tdomLoc-attributes'></div> <div id='tdomLoc-details'></div> <div id='navigationNode-attributes'></div> <div id='beacon-attributes'></div> <div id='page-attributes'></div> <div id='pois'></div> <div id='navigationNodes'></div> <div id='tdomLocs'></div> <div id='beacons'></div>  </section>
</div>

 

 

3. Pass configuration data to the engine

Please mind the data attributes on the #map element. 

data-project-id should match the INSIDE project identifier as found in the main url (insideguidance.com/PROJECT_ID)

data-locale should contain an appropriate language code (ISO-639-1, e.g. de, en, fr)

data-host is used as a base url for api requests and should match the inside url:  https://www.insideguidance.com

 

TODO - Additional data attribute for focussing specific content: 

data-focus-external-entity should be the entity ('exhibitor', 'event') type to focus

data-focus-external-id should be the object id of as given in the data export of the object to focus