Merge pull request #362 from Bayer-Group/multi-map-controls

move SplitScreen & SyncableMap into ol-kit
Bayer-Group · Dec 23, 2021 · 7e6b209 · 7e6b209
2 parents 7e967d3 + c6445ba
commit 7e6b209
Show file tree

Hide file tree

Showing 223 changed files with 2,641 additions and 602 deletions.
diff --git a/app/demos/multi/App.js b/app/demos/multi/App.js
@@ -2,28 +2,46 @@ import React from 'react'
 import {
   Map,
   Popup,
-  TabbedPanel,
   Controls,
   ContextMenu,
   loadDataLayer,
-  LayerStyler,
-  LayerPanelLayersPage,
   MultiMapManager,
-  TabbedPanelPage,
   BasemapContainer,
   VectorLayer,
-  DrawContainer,
+  LayerPanel,
+  FullScreenFlex,
   FlexMap,
-  FullScreenFlex
+  SplitScreen,
 } from '@bayer/ol-kit'
 import { fromLonLat } from 'ol/proj'
 import olFeature from 'ol/Feature'
 import olGeomPoint from 'ol/geom/Point'
 import olSourceVector from 'ol/source/Vector'
 
-import Welcome from '../../Welcome'
-
 class App extends React.Component {
+  mapConfigs = [
+    {
+      id: 'map0',
+      synced: true,
+      visible: true
+    },
+    {
+      id: 'map1',
+      synced: false,
+      visible: false
+    },
+    {
+      id: 'map2',
+      synced: false,
+      visible: false
+    },
+    {
+      id: 'map3',
+      synced: false,
+      visible: false
+    },
+  ]
+
   onMapInit = async (map) => {
     // create a vector layer and add to the map
     const layer = new VectorLayer({
@@ -43,34 +61,21 @@ class App extends React.Component {
     const dataLayer = await loadDataLayer(map, 'https://data.nasa.gov/api/geospatial/7zbq-j77a?method=export&format=KML')
 
     dataLayer.getSource().getFeatures().forEach(f => f.set('title', f.get('name')))
-
-    window.map = map
   }
 
   render () {
-    const mapKeys = [
-      'map0',
-      'map1',
-      'map2',
-      'map3',
-      'map4',
-      'map5',
-      'map6',
-      'map7',
-    ]
-
     return (
-      <MultiMapManager groups={[['map0', 'map1'],['map2', 'map3']]}>
+      <MultiMapManager>
+        <div style={{position: 'absolute', top: 20, left: 20, zIndex: 1, }}>
+          <SplitScreen />
+        </div>
         <FullScreenFlex>
-          {mapKeys.map((key, i, array) => {
+          {this.mapConfigs.map(({ id, synced, visible }, i) => {
             return (
               <FlexMap
-                key={key}
-                index={i}
-                total={array.length}
-                numberOfRows={2}
-                numberOfColumns={4}>
-                <Map id={key} onMapInit={this.onMapInit} isMultiMap>
+                key={id}
+                index={i}>
+                <Map id={id} onMapInit={this.onMapInit} synced={synced} visible={visible} isMultiMap>
                   <Popup />
                   <ContextMenu />
                   <Controls />

diff --git a/docs/BasemapBingMaps.html b/docs/BasemapBingMaps.html
diff --git a/docs/BasemapBlankWhite.html b/docs/BasemapBlankWhite.html
diff --git a/docs/BasemapContainer.html b/docs/BasemapContainer.html
diff --git a/docs/BasemapManager.html b/docs/BasemapManager.html
diff --git a/docs/BasemapOpenStreetMap.html b/docs/BasemapOpenStreetMap.html
diff --git a/docs/BasemapStamenTerrain.html b/docs/BasemapStamenTerrain.html
diff --git a/docs/BasemapStamenTonerDark.html b/docs/BasemapStamenTonerDark.html
diff --git a/docs/BasemapStamenTonerLite.html b/docs/BasemapStamenTonerLite.html
diff --git a/docs/Basemaps_BasemapContainer.js.html b/docs/Basemaps_BasemapContainer.js.html
diff --git a/docs/Basemaps_BasemapManager.js.html b/docs/Basemaps_BasemapManager.js.html
diff --git a/docs/Basemaps_BingMaps.js.html b/docs/Basemaps_BingMaps.js.html
diff --git a/docs/Basemaps_BlankWhite.js.html b/docs/Basemaps_BlankWhite.js.html
diff --git a/docs/Basemaps_OpenStreetMap.js.html b/docs/Basemaps_OpenStreetMap.js.html
diff --git a/docs/Basemaps_StamenTerrain.js.html b/docs/Basemaps_StamenTerrain.js.html
diff --git a/docs/Basemaps_StamenTonerDark.js.html b/docs/Basemaps_StamenTonerDark.js.html
diff --git a/docs/Basemaps_StamenTonerLite.js.html b/docs/Basemaps_StamenTonerLite.js.html
diff --git a/docs/Basemaps_utils.js.html b/docs/Basemaps_utils.js.html
diff --git a/docs/Compass.html b/docs/Compass.html
diff --git a/docs/ContextMenu.html b/docs/ContextMenu.html
diff --git a/docs/ContextMenuCoords.html b/docs/ContextMenuCoords.html
diff --git a/docs/ContextMenuListItem.html b/docs/ContextMenuListItem.html
diff --git a/docs/ContextMenu_ContextMenu.js.html b/docs/ContextMenu_ContextMenu.js.html
diff --git a/docs/ContextMenu_ContextMenuCoords.js.html b/docs/ContextMenu_ContextMenuCoords.js.html
diff --git a/docs/ContextMenu_ContextMenuListItem.js.html b/docs/ContextMenu_ContextMenuListItem.js.html
diff --git a/docs/ControlGroup.html b/docs/ControlGroup.html
diff --git a/docs/ControlGroupButton.html b/docs/ControlGroupButton.html
diff --git a/docs/Controls.html b/docs/Controls.html
diff --git a/docs/Controls_Compass.js.html b/docs/Controls_Compass.js.html
diff --git a/docs/Controls_ControlGroup.js.html b/docs/Controls_ControlGroup.js.html
diff --git a/docs/Controls_ControlGroupButton.js.html b/docs/Controls_ControlGroupButton.js.html
diff --git a/docs/Controls_Controls.js.html b/docs/Controls_Controls.js.html
diff --git a/docs/Controls_CurrentLocation.js.html b/docs/Controls_CurrentLocation.js.html
diff --git a/docs/Controls_ScaleLine.js.html b/docs/Controls_ScaleLine.js.html
diff --git a/docs/Controls_ZoomControls.js.html b/docs/Controls_ZoomControls.js.html
diff --git a/docs/Controls_ZoomIn.js.html b/docs/Controls_ZoomIn.js.html
diff --git a/docs/Controls_ZoomOut.js.html b/docs/Controls_ZoomOut.js.html
diff --git a/docs/CurrentLocation.html b/docs/CurrentLocation.html
diff --git a/docs/DataLayers_utils.js.html b/docs/DataLayers_utils.js.html
diff --git a/docs/Draw.html b/docs/Draw.html
diff --git a/docs/DrawBox.html b/docs/DrawBox.html
diff --git a/docs/DrawCircle.html b/docs/DrawCircle.html
diff --git a/docs/DrawContainer.html b/docs/DrawContainer.html
diff --git a/docs/DrawFreehand.html b/docs/DrawFreehand.html
diff --git a/docs/DrawLine.html b/docs/DrawLine.html
diff --git a/docs/DrawPin.html b/docs/DrawPin.html
diff --git a/docs/DrawPoint.html b/docs/DrawPoint.html
diff --git a/docs/DrawPolygon.html b/docs/DrawPolygon.html
diff --git a/docs/Draw_Box.js.html b/docs/Draw_Box.js.html
diff --git a/docs/Draw_Circle.js.html b/docs/Draw_Circle.js.html
diff --git a/docs/Draw_Draw.js.html b/docs/Draw_Draw.js.html
diff --git a/docs/Draw_DrawContainer.js.html b/docs/Draw_DrawContainer.js.html
diff --git a/docs/Draw_Freehand.js.html b/docs/Draw_Freehand.js.html
diff --git a/docs/Draw_Line.js.html b/docs/Draw_Line.js.html
diff --git a/docs/Draw_Pin.js.html b/docs/Draw_Pin.js.html
diff --git a/docs/Draw_Point.js.html b/docs/Draw_Point.js.html
diff --git a/docs/Draw_Polygon.js.html b/docs/Draw_Polygon.js.html
diff --git a/docs/Draw_utils.js.html b/docs/Draw_utils.js.html
diff --git a/docs/ErrorBoundary.html b/docs/ErrorBoundary.html
diff --git a/docs/ErrorBoundary_ErrorBoundary.js.html b/docs/ErrorBoundary_ErrorBoundary.js.html
diff --git a/docs/FeatureEditor.html b/docs/FeatureEditor.html
diff --git a/docs/FeatureEditor_FeatureEditor.js.html b/docs/FeatureEditor_FeatureEditor.js.html
diff --git a/docs/FeatureEditor_styles.js.html b/docs/FeatureEditor_styles.js.html
diff --git a/docs/GoogleDirections.html b/docs/GoogleDirections.html
diff --git a/docs/GoogleDirections_GoogleDirections.js.html b/docs/GoogleDirections_GoogleDirections.js.html
diff --git a/docs/GooglePlacesSearch.html b/docs/GooglePlacesSearch.html
diff --git a/docs/GooglePlacesSearch_GooglePlacesSearch.js.html b/docs/GooglePlacesSearch_GooglePlacesSearch.js.html
diff --git a/docs/HeatmapControls.html b/docs/HeatmapControls.html
diff --git a/docs/Heatmap_HeatmapControls.js.html b/docs/Heatmap_HeatmapControls.js.html
diff --git a/docs/ImageExif_ImageExif.js.html b/docs/ImageExif_ImageExif.js.html
diff --git a/docs/LayerPanel.html b/docs/LayerPanel.html
diff --git a/docs/LayerPanelActionDuplicate.html b/docs/LayerPanelActionDuplicate.html
diff --git a/docs/LayerPanelActionExport.html b/docs/LayerPanelActionExport.html
diff --git a/docs/LayerPanelActionExtent.html b/docs/LayerPanelActionExtent.html
diff --git a/docs/LayerPanelActionHeatmap.html b/docs/LayerPanelActionHeatmap.html
diff --git a/docs/LayerPanelActionImport.html b/docs/LayerPanelActionImport.html
diff --git a/docs/LayerPanelActionMerge.html b/docs/LayerPanelActionMerge.html
diff --git a/docs/LayerPanelActionMergeFeatures.html b/docs/LayerPanelActionMergeFeatures.html
diff --git a/docs/LayerPanelActionOpacity.html b/docs/LayerPanelActionOpacity.html
diff --git a/docs/LayerPanelActionRemove.html b/docs/LayerPanelActionRemove.html
diff --git a/docs/LayerPanelActions.html b/docs/LayerPanelActions.html
diff --git a/docs/LayerPanelBase.html b/docs/LayerPanelBase.html
diff --git a/docs/LayerPanelCheckbox.html b/docs/LayerPanelCheckbox.html
diff --git a/docs/LayerPanelContent.html b/docs/LayerPanelContent.html
diff --git a/docs/LayerPanelHeader.html b/docs/LayerPanelHeader.html
diff --git a/docs/LayerPanelLayersPage.html b/docs/LayerPanelLayersPage.html
diff --git a/docs/LayerPanelList.html b/docs/LayerPanelList.html
diff --git a/docs/LayerPanelListItem.html b/docs/LayerPanelListItem.html
diff --git a/docs/LayerPanelMenu.html b/docs/LayerPanelMenu.html
diff --git a/docs/LayerPanelPage.html b/docs/LayerPanelPage.html
diff --git a/docs/LayerPanel_LayerPanel.js.html b/docs/LayerPanel_LayerPanel.js.html
diff --git a/docs/LayerPanel_LayerPanelActionDuplicate_index.js.html b/docs/LayerPanel_LayerPanelActionDuplicate_index.js.html
diff --git a/docs/LayerPanel_LayerPanelActionExport_index.js.html b/docs/LayerPanel_LayerPanelActionExport_index.js.html
diff --git a/docs/LayerPanel_LayerPanelActionExport_utils.js.html b/docs/LayerPanel_LayerPanelActionExport_utils.js.html
diff --git a/docs/LayerPanel_LayerPanelActionExtent_index.js.html b/docs/LayerPanel_LayerPanelActionExtent_index.js.html
diff --git a/docs/LayerPanel_LayerPanelActionHeatmap_index.js.html b/docs/LayerPanel_LayerPanelActionHeatmap_index.js.html
diff --git a/docs/LayerPanel_LayerPanelActionHeatmap_utils.js.html b/docs/LayerPanel_LayerPanelActionHeatmap_utils.js.html
diff --git a/docs/LayerPanel_LayerPanelActionImport_index.js.html b/docs/LayerPanel_LayerPanelActionImport_index.js.html
diff --git a/docs/LayerPanel_LayerPanelActionImport_utils.js.html b/docs/LayerPanel_LayerPanelActionImport_utils.js.html
diff --git a/docs/LayerPanel_LayerPanelActionMergeFeatures_index.js.html b/docs/LayerPanel_LayerPanelActionMergeFeatures_index.js.html
diff --git a/docs/LayerPanel_LayerPanelActionMergeFeatures_utils.js.html b/docs/LayerPanel_LayerPanelActionMergeFeatures_utils.js.html
diff --git a/docs/LayerPanel_LayerPanelActionMerge_index.js.html b/docs/LayerPanel_LayerPanelActionMerge_index.js.html
diff --git a/docs/LayerPanel_LayerPanelActionMerge_utils.js.html b/docs/LayerPanel_LayerPanelActionMerge_utils.js.html
diff --git a/docs/LayerPanel_LayerPanelActionOpacity_index.js.html b/docs/LayerPanel_LayerPanelActionOpacity_index.js.html
diff --git a/docs/LayerPanel_LayerPanelActionRemove_index.js.html b/docs/LayerPanel_LayerPanelActionRemove_index.js.html
diff --git a/docs/LayerPanel_LayerPanelActions_index.js.html b/docs/LayerPanel_LayerPanelActions_index.js.html
diff --git a/docs/LayerPanel_LayerPanelBase_index.js.html b/docs/LayerPanel_LayerPanelBase_index.js.html
diff --git a/docs/LayerPanel_LayerPanelCheckbox_index.js.html b/docs/LayerPanel_LayerPanelCheckbox_index.js.html
diff --git a/docs/LayerPanel_LayerPanelContent_index.js.html b/docs/LayerPanel_LayerPanelContent_index.js.html
diff --git a/docs/LayerPanel_LayerPanelHeader_index.js.html b/docs/LayerPanel_LayerPanelHeader_index.js.html
diff --git a/docs/LayerPanel_LayerPanelLayersPage_index.js.html b/docs/LayerPanel_LayerPanelLayersPage_index.js.html
diff --git a/docs/LayerPanel_LayerPanelListItem_index.js.html b/docs/LayerPanel_LayerPanelListItem_index.js.html
diff --git a/docs/LayerPanel_LayerPanelList_index.js.html b/docs/LayerPanel_LayerPanelList_index.js.html
diff --git a/docs/LayerPanel_LayerPanelMenu_index.js.html b/docs/LayerPanel_LayerPanelMenu_index.js.html
diff --git a/docs/LayerPanel_LayerPanelPage_index.js.html b/docs/LayerPanel_LayerPanelPage_index.js.html
diff --git a/docs/LayerStyler.html b/docs/LayerStyler.html
diff --git a/docs/LayerStyler_LayerStyler.js.html b/docs/LayerStyler_LayerStyler.js.html
diff --git a/docs/LayerStyler_StyleManager_index.js.html b/docs/LayerStyler_StyleManager_index.js.html
diff --git a/docs/LayerStyler__AttributesFilter_index.js.html b/docs/LayerStyler__AttributesFilter_index.js.html
diff --git a/docs/LayerStyler__ColorPicker_index.js.html b/docs/LayerStyler__ColorPicker_index.js.html
diff --git a/docs/LayerStyler__LabelStyler_index.js.html b/docs/LayerStyler__LabelStyler_index.js.html
diff --git a/docs/LayerStyler__LayerStyler__StyleGroup__GenericSymbolizer_index.js.html b/docs/LayerStyler__LayerStyler__StyleGroup__GenericSymbolizer_index.js.html
diff --git a/docs/LayerStyler__LayerStyler__StyleGroup_index.js.html b/docs/LayerStyler__LayerStyler__StyleGroup_index.js.html
diff --git a/docs/LayerStyler__LayerStyler_index.js.html b/docs/LayerStyler__LayerStyler_index.js.html
diff --git a/docs/LayerStyler__Popover_index.js.html b/docs/LayerStyler__Popover_index.js.html
diff --git a/docs/LayerStyler__SelectTabs_index.js.html b/docs/LayerStyler__SelectTabs_index.js.html
diff --git a/docs/LayerStyler__Selector_index.js.html b/docs/LayerStyler__Selector_index.js.html
diff --git a/docs/Map.html b/docs/Map.html
diff --git a/docs/MapDisplayElement.html b/docs/MapDisplayElement.html
diff --git a/docs/Map_Map.js.html b/docs/Map_Map.js.html
diff --git a/docs/Map_utils.js.html b/docs/Map_utils.js.html
diff --git a/docs/Measure_utils.js.html b/docs/Measure_utils.js.html
diff --git a/docs/MultiMapManager.html b/docs/MultiMapManager.html
diff --git a/docs/MultiMapManager_MultiMapManager.js.html b/docs/MultiMapManager_MultiMapManager.js.html
diff --git a/docs/MultiMapManager_SafeParent.js.html b/docs/MultiMapManager_SafeParent.js.html
diff --git a/docs/MultiMapManager_utils.js.html b/docs/MultiMapManager_utils.js.html
diff --git a/docs/Pdf_utils.js.html b/docs/Pdf_utils.js.html
diff --git a/docs/Popup.html b/docs/Popup.html
diff --git a/docs/PopupActionCopyWkt.html b/docs/PopupActionCopyWkt.html
diff --git a/docs/PopupActionGoogleMaps.html b/docs/PopupActionGoogleMaps.html
diff --git a/docs/PopupActionGroup.html b/docs/PopupActionGroup.html
diff --git a/docs/PopupActionItem.html b/docs/PopupActionItem.html
diff --git a/docs/PopupActionLink.html b/docs/PopupActionLink.html
diff --git a/docs/PopupBase.html b/docs/PopupBase.html
diff --git a/docs/PopupDataList.html b/docs/PopupDataList.html
diff --git a/docs/PopupDefaultInsert.html b/docs/PopupDefaultInsert.html
diff --git a/docs/PopupDefaultPage.html b/docs/PopupDefaultPage.html
diff --git a/docs/PopupPageLayout.html b/docs/PopupPageLayout.html
diff --git a/docs/PopupPageLayoutChild.html b/docs/PopupPageLayoutChild.html
diff --git a/docs/PopupTabs.html b/docs/PopupTabs.html
diff --git a/docs/Popup_Popup.js.html b/docs/Popup_Popup.js.html
diff --git a/docs/Popup_PopupActions_PopupActionCopyWkt_PopupActionCopyWkt.js.html b/docs/Popup_PopupActions_PopupActionCopyWkt_PopupActionCopyWkt.js.html
diff --git a/docs/Popup_PopupActions_PopupActionCopyWkt_utils.js.html b/docs/Popup_PopupActions_PopupActionCopyWkt_utils.js.html
diff --git a/docs/Popup_PopupActions_PopupActionCut_PopupActionCut.js.html b/docs/Popup_PopupActions_PopupActionCut_PopupActionCut.js.html
diff --git a/docs/Popup_PopupActions_PopupActionDuplicate_PopupActionDuplicate.js.html b/docs/Popup_PopupActions_PopupActionDuplicate_PopupActionDuplicate.js.html
diff --git a/docs/Popup_PopupActions_PopupActionGoogleMaps_PopupActionGoogleMaps.js.html b/docs/Popup_PopupActions_PopupActionGoogleMaps_PopupActionGoogleMaps.js.html
diff --git a/docs/Popup_PopupActions_PopupActionRemove_PopupActionRemove.js.html b/docs/Popup_PopupActions_PopupActionRemove_PopupActionRemove.js.html
diff --git a/docs/Popup_PopupActions_PopupActionZoomToExtent_PopupActionZoomToExtent.js.html b/docs/Popup_PopupActions_PopupActionZoomToExtent_PopupActionZoomToExtent.js.html
diff --git a/docs/Popup_PopupBase.js.html b/docs/Popup_PopupBase.js.html
diff --git a/docs/Popup_PopupInsert_PopupActionGroup_index.js.html b/docs/Popup_PopupInsert_PopupActionGroup_index.js.html
diff --git a/docs/Popup_PopupInsert_PopupActionItem_index.js.html b/docs/Popup_PopupInsert_PopupActionItem_index.js.html
diff --git a/docs/Popup_PopupInsert_PopupActionLink_index.js.html b/docs/Popup_PopupInsert_PopupActionLink_index.js.html
diff --git a/docs/Popup_PopupInsert_PopupDataList_index.js.html b/docs/Popup_PopupInsert_PopupDataList_index.js.html
diff --git a/docs/Popup_PopupInsert_PopupDefaultInsert.js.html b/docs/Popup_PopupInsert_PopupDefaultInsert.js.html
diff --git a/docs/Popup_PopupInsert_PopupDefaultPage_index.js.html b/docs/Popup_PopupInsert_PopupDefaultPage_index.js.html
diff --git a/docs/Popup_PopupInsert_PopupPageLayoutChild_index.js.html b/docs/Popup_PopupInsert_PopupPageLayoutChild_index.js.html
diff --git a/docs/Popup_PopupInsert_PopupPageLayout_index.js.html b/docs/Popup_PopupInsert_PopupPageLayout_index.js.html
diff --git a/docs/Popup_PopupInsert_PopupTabs_index.js.html b/docs/Popup_PopupInsert_PopupTabs_index.js.html
diff --git a/docs/Popup_PopupInsert__LoadingSpinner_index.js.html b/docs/Popup_PopupInsert__LoadingSpinner_index.js.html
diff --git a/docs/Popup_utils.js.html b/docs/Popup_utils.js.html
diff --git a/docs/ProjectMenu.html b/docs/ProjectMenu.html
diff --git a/docs/Project_Project.js.html b/docs/Project_Project.js.html
diff --git a/docs/Project_utils.js.html b/docs/Project_utils.js.html
diff --git a/docs/Provider.html b/docs/Provider.html
diff --git a/docs/Provider_Provider.js.html b/docs/Provider_Provider.js.html
diff --git a/docs/Provider_utils.js.html b/docs/Provider_utils.js.html
diff --git a/docs/SplitScreen_MapDisplayElement_index.js.html b/docs/SplitScreen_MapDisplayElement_index.js.html
diff --git a/docs/SplitScreen_Slider_index.js.html b/docs/SplitScreen_Slider_index.js.html
@@ -0,0 +1,148 @@
+
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>ol-kit | SplitScreen/Slider/index.js</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
+
+
+    <!-- these scripts must be at the top to properly syntax highlight code examples -->
+    <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js" integrity="sha256-FiZMk1zgTeujzf/+vomWZGZ9r00+xnGvOgXoj0Jo1jA=" crossorigin="anonymous"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+    <link type="text/css" rel="stylesheet" href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/tomorrow.min.css">
+    <link type="text/css" rel="stylesheet" href="styles/app.css">
+    <link type="text/css" rel="stylesheet" href="styles/iframe.css">
+</head>
+
+<body>
+    <div id="stickyNavbarOverlay"></div>
+    <div class="top-navbar">
+        <div class="container">
+            <nav class="navbar" role="navigation" aria-label="main navigation">
+                <div class="navbar-brand">
+                    <a href="index.html"><img src="static/ol-kit-logo.png" alt="logo"></a>
+                    <a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
+                        <span aria-hidden="true"></span>
+                        <span aria-hidden="true"></span>
+                        <span aria-hidden="true"></span>
+                    </a>
+                </div>
+
+                <div class="navbar-menu">
+                    <div class="navbar-end">
+
+                        <div class="navbar-item">
+                            <a href="tutorial-Getting%20Started.html">
+                                Get Started
+                            </a>
+                        </div>
+
+                        <div class="navbar-item">
+                            <a href="docs.html">
+                                Docs
+                            </a>
+                        </div>
+
+                        <div class="navbar-item">
+                            <a href="https://github.com/Bayer-Group/ol-kit">
+                                Github
+                            </a>
+                        </div>
+
+                    </div>
+                </div>
+
+            </nav>
+        </div>
+    </div>
+    <div id="page-wrapper" class="container">
+        <div class="columns">
+            <div class="column is-3" id="sidebar-nav">
+                <div class="sidebar sidebar__inner">
+                    <nav>
+                        <div class="category"><h3>Tutorials</h3><ul><li><a class="undefined"href="tutorial-Getting Started.html">Getting Started</a></li><li><a class="undefined"href="tutorial-LayerPanel_.html">LayerPanel</a></li><li><a class="undefined"href="tutorial-Popup_.html">Popup</a></li><li><a class="undefined"href="tutorial-TimeSlider_.html">TimeSlider</a></li><li><a class="undefined"href="tutorial-connectToContext.html">connectToContext</a></li><li><a class="undefined"href="tutorial-contextProps.html">contextProps</a></li><li><a class="undefined"href="tutorial-i18n Support.html">i18n Support</a></li></ul><h3>Components</h3><ul><li><a href="ErrorBoundary.html">ErrorBoundary</a></li></ul><h3>Utils</h3><ul><li><a href="global.html#immediateEditStyle">immediateEditStyle</a></li><li><a href="global.html#styleText">styleText</a></li></ul></div><div class="category"><h2>Basemap</h2><h3>Components</h3><ul><li><a href="BasemapBingMaps.html">BasemapBingMaps</a></li><li><a href="BasemapBlankWhite.html">BasemapBlankWhite</a></li><li><a href="BasemapContainer.html">BasemapContainer</a></li><li><a href="BasemapManager.html">BasemapManager</a></li><li><a href="BasemapOpenStreetMap.html">BasemapOpenStreetMap</a></li><li><a href="BasemapStamenTerrain.html">BasemapStamenTerrain</a></li><li><a href="BasemapStamenTonerDark.html">BasemapStamenTonerDark</a></li><li><a href="BasemapStamenTonerLite.html">BasemapStamenTonerLite</a></li></ul><h3>Utils</h3><ul><li><a href="global.html#loadBasemapLayer">loadBasemapLayer</a></li></ul></div><div class="category"><h2>Classes</h2><h3>Utils</h3><ul><li><a href="global.html#VectorLayer">VectorLayer</a></li><li><a href="global.html#VectorTileLayer">VectorTileLayer</a></li></ul></div><div class="category"><h2>ContextMenu</h2><h3>Components</h3><ul><li><a href="ContextMenu.html">ContextMenu</a></li><li><a href="ContextMenuCoords.html">ContextMenuCoords</a></li><li><a href="ContextMenuListItem.html">ContextMenuListItem</a></li></ul></div><div class="category"><h2>Controls</h2><h3>Components</h3><ul><li><a href="Compass.html">Compass</a></li><li><a href="ControlGroup.html">ControlGroup</a></li><li><a href="ControlGroupButton.html">ControlGroupButton</a></li><li><a href="Controls.html">Controls</a></li><li><a href="CurrentLocation.html">CurrentLocation</a></li><li><a href="ZoomControls.html">ZoomControls</a></li><li><a href="ZoomIn.html">ZoomIn</a></li><li><a href="ZoomOut.html">ZoomOut</a></li></ul></div><div class="category"><h2>DataLayers</h2><h3>Utils</h3><ul><li><a href="global.html#loadDataLayer">loadDataLayer</a></li></ul></div><div class="category"><h2>Draw</h2><h3>Components</h3><ul><li><a href="Draw.html">Draw</a></li><li><a href="DrawBox.html">DrawBox</a></li><li><a href="DrawCircle.html">DrawCircle</a></li><li><a href="DrawContainer.html">DrawContainer</a></li><li><a href="DrawFreehand.html">DrawFreehand</a></li><li><a href="DrawLine.html">DrawLine</a></li><li><a href="DrawPin.html">DrawPin</a></li><li><a href="DrawPoint.html">DrawPoint</a></li><li><a href="DrawPolygon.html">DrawPolygon</a></li></ul><h3>Utils</h3><ul><li><a href="global.html#getStyledFeatures">getStyledFeatures</a></li><li><a href="global.html#styleText">styleText</a></li></ul></div><div class="category"><h2>FeatureEditor</h2><h3>Components</h3><ul><li><a href="FeatureEditor.html">FeatureEditor</a></li></ul></div><div class="category"><h2>GoogleDirections</h2><h3>Components</h3><ul><li><a href="GoogleDirections.html">GoogleDirections</a></li></ul></div><div class="category"><h2>GooglePlacesSearch</h2><h3>Components</h3><ul><li><a href="GooglePlacesSearch.html">GooglePlacesSearch</a></li></ul></div><div class="category"><h2>Heatmap</h2><h3>Components</h3><ul><li><a href="HeatmapControls.html">HeatmapControls</a></li></ul></div><div class="category"><h2>LayerPanel</h2><h3>Components</h3><ul><li><a href="LayerPanel.html">LayerPanel</a></li><li><a href="LayerPanelActionDuplicate.html">LayerPanelActionDuplicate</a></li><li><a href="LayerPanelActionExport.html">LayerPanelActionExport</a></li><li><a href="LayerPanelActionExtent.html">LayerPanelActionExtent</a></li><li><a href="LayerPanelActionHeatmap.html">LayerPanelActionHeatmap</a></li><li><a href="LayerPanelActionImport.html">LayerPanelActionImport</a></li><li><a href="LayerPanelActionMerge.html">LayerPanelActionMerge</a></li><li><a href="LayerPanelActionMergeFeatures.html">LayerPanelActionMergeFeatures</a></li><li><a href="LayerPanelActionOpacity.html">LayerPanelActionOpacity</a></li><li><a href="LayerPanelActionRemove.html">LayerPanelActionRemove</a></li><li><a href="LayerPanelActions.html">LayerPanelActions</a></li><li><a href="LayerPanelBase.html">LayerPanelBase</a></li><li><a href="LayerPanelCheckbox.html">LayerPanelCheckbox</a></li><li><a href="LayerPanelContent.html">LayerPanelContent</a></li><li><a href="LayerPanelHeader.html">LayerPanelHeader</a></li><li><a href="LayerPanelLayersPage.html">LayerPanelLayersPage</a></li><li><a href="LayerPanelList.html">LayerPanelList</a></li><li><a href="LayerPanelListItem.html">LayerPanelListItem</a></li><li><a href="LayerPanelMenu.html">LayerPanelMenu</a></li><li><a href="LayerPanelPage.html">LayerPanelPage</a></li></ul><h3>Utils</h3><ul><li><a href="global.html#addHeatmapLayer">addHeatmapLayer</a></li><li><a href="global.html#addVectorLayer">addVectorLayer</a></li><li><a href="global.html#convertFileToFeatures">convertFileToFeatures</a></li><li><a href="global.html#convertFileToLayer">convertFileToLayer</a></li><li><a href="global.html#exportFeatures">exportFeatures</a></li><li><a href="global.html#mergeLayerFeatures">mergeLayerFeatures</a></li></ul></div><div class="category"><h2>LayerStyler</h2><h3>Components</h3><ul><li><a href="LayerStyler.html">LayerStyler</a></li></ul></div><div class="category"><h2>Map</h2><h3>Components</h3><ul><li><a href="Map.html">Map</a></li></ul><h3>Utils</h3><ul><li><a href="global.html#addSelectInteraction">addSelectInteraction</a></li><li><a href="global.html#centerAndZoom">centerAndZoom</a></li><li><a href="global.html#convertXYtoLatLong">convertXYtoLatLong</a></li><li><a href="global.html#createMap">createMap</a></li><li><a href="global.html#createSelectInteraction">createSelectInteraction</a></li><li><a href="global.html#getExtentForFeatures">getExtentForFeatures</a></li><li><a href="global.html#getSelectInteraction">getSelectInteraction</a></li><li><a href="global.html#setMapExtent">setMapExtent</a></li><li><a href="global.html#updateMapFromUrl">updateMapFromUrl</a></li><li><a href="global.html#updateUrlFromMap">updateUrlFromMap</a></li></ul></div><div class="category"><h2>MultiMap</h2><h3>Components</h3><ul><li><a href="MultiMapManager.html">MultiMapManager</a></li></ul><h3>Utils</h3><ul><li><a href="global.html#syncViewEvents">syncViewEvents</a></li></ul></div><div class="category"><h2>PDF</h2><h3>Utils</h3><ul><li><a href="global.html#convertSvgToPDFTemplate">convertSvgToPDFTemplate</a></li><li><a href="global.html#printPDFTemplate">printPDFTemplate</a></li></ul></div><div class="category"><h2>Popup</h2><h3>Components</h3><ul><li><a href="Popup.html">Popup</a></li><li><a href="PopupActionGroup.html">PopupActionGroup</a></li><li><a href="PopupActionItem.html">PopupActionItem</a></li><li><a href="PopupActionLink.html">PopupActionLink</a></li><li><a href="PopupBase.html">PopupBase</a></li><li><a href="PopupDataList.html">PopupDataList</a></li><li><a href="PopupDefaultInsert.html">PopupDefaultInsert</a></li><li><a href="PopupDefaultPage.html">PopupDefaultPage</a></li><li><a href="PopupPageLayout.html">PopupPageLayout</a></li><li><a href="PopupPageLayoutChild.html">PopupPageLayoutChild</a></li><li><a href="PopupTabs.html">PopupTabs</a></li></ul><h3>Utils</h3><ul><li><a href="global.html#addMovementListener">addMovementListener</a></li><li><a href="global.html#calculateViewPadding">calculateViewPadding</a></li><li><a href="global.html#getLayersAndFeaturesForEvent">getLayersAndFeaturesForEvent</a></li><li><a href="global.html#getPixelValue">getPixelValue</a></li><li><a href="global.html#getPopupPositionFromFeatures">getPopupPositionFromFeatures</a></li><li><a href="global.html#removeMovementListener">removeMovementListener</a></li><li><a href="global.html#sanitizeProperties">sanitizeProperties</a></li></ul></div><div class="category"><h2>PopupActionCopyWkt</h2><h3>Components</h3><ul><li><a href="PopupActionCopyWkt.html">PopupActionCopyWkt</a></li></ul><h3>Utils</h3><ul><li><a href="global.html#convertFeatureToWkt">convertFeatureToWkt</a></li><li><a href="global.html#copyTextToClipboard">copyTextToClipboard</a></li><li><a href="global.html#copyWktToClipbard">copyWktToClipbard</a></li></ul></div><div class="category"><h2>PopupActionGoogleMaps</h2><h3>Components</h3><ul><li><a href="PopupActionGoogleMaps.html">PopupActionGoogleMaps</a></li></ul></div><div class="category"><h2>Project</h2><h3>Components</h3><ul><li><a href="ProjectMenu.html">ProjectMenu</a></li></ul><h3>Utils</h3><ul><li><a href="global.html#createProject">createProject</a></li><li><a href="global.html#loadProject">loadProject</a></li></ul></div><div class="category"><h2>Provider</h2><h3>Components</h3><ul><li><a href="Provider.html">Provider</a></li></ul><h3>Utils</h3><ul><li><a href="global.html#connectToContext">connectToContext</a></li></ul></div><div class="category"><h2>SplitScreen</h2><h3>Components</h3><ul><li><a href="MapDisplayElement.html">MapDisplayElement</a></li></ul></div><div class="category"><h2>TabbedPanel</h2><h3>Components</h3><ul><li><a href="TabbedPanel.html">TabbedPanel</a></li></ul></div><div class="category"><h2>TimeSlider</h2><h3>Components</h3><ul><li><a href="TimeSlider.html">TimeSlider</a></li><li><a href="TimeSliderBase.html">TimeSliderBase</a></li></ul></div>
+                    </nav>
+                </div>
+            </div>
+            <div class="column is-9-desktop" id="main-content-wrapper">
+                <div class="content">
+
+
+
+
+
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>import React from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+import Draggable from 'react-draggable'
+import { DragBar } from './styled'
+import DragBarIcon from './svgIcons/DragBarIcon'
+
+const Slider = ({ initialPosition, onDrag, innerRef }) => {
+  const limit = window.innerWidth * 0.2
+  const leftBound = (window.innerWidth - limit - (window.innerWidth - initialPosition)) * -1
+  const rightBound = window.innerWidth - initialPosition - limit
+
+  return (
+    ReactDOM.createPortal(
+      &lt;Draggable axis={'x'} bounds={{ left: leftBound, right: rightBound }} onDrag={onDrag}>
+        &lt;DragBar position={initialPosition} yOffset={55} ref={innerRef}>
+          &lt;DragBarIcon color={'lightgray'} />
+        &lt;/DragBar>
+      &lt;/Draggable>,
+      document.body
+    )
+  )
+}
+
+Slider.propTypes = {
+  /** render slider in a specific position */
+  initialPosition: PropTypes.number,
+
+  /** Callback that get's fired when the slider is dragged */
+  onDrag: PropTypes.func,
+
+  /** A reference to the inner DOM node */
+  innerRef: PropTypes.func
+}
+
+export default Slider
+</code></pre>
+        </article>
+    </section>
+
+
+
+
+                </div>
+            </div>
+        </div>
+    </div>
+<footer class="footer">
+    <div class="content has-text-centered">
+        <div style="margin: 0 auto; text-align: center; background: white; margin: 30px 0;">
+            <a href="https://www.cropscience.bayer.com" target="_blank">
+                <img src="static/bayer-logo.png" width="200px" />
+            </a>
+            <div>&copy; 2020 Bayer Crop Science; All Rights Reserved. <br />
+            <a style="color: #a2a2a2" target="_blank" href="https://bayer.talentnet.community/jobs/881c8317-33b7-435f-9410-359b1b925322"> Geospatial Developer Career Opportunities </a>
+            </div>
+        </div>
+    </div>
+</footer>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js" integrity="sha256-vrn14y7WH7zgEElyQqm2uCGSQrX/xjYDjniRUQx3NyU=" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/sticky-sidebar/dist/sticky-sidebar.min.js"></script>
+<script src="scripts/app.js"></script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>