Add debug app for Bespoke tool (#165)

bcgov · Jan 19, 2022 · 5d337ff · 5d337ff
1 parent 69d115e
commit 5d337ff
Show file tree

Hide file tree

Showing 8 changed files with 272 additions and 0 deletions.
diff --git a/debug/customization/bespoke/assets/bc-gov-logo-transparent.png b/debug/customization/bespoke/assets/bc-gov-logo-transparent.png
diff --git a/debug/customization/bespoke/assets/style.css b/debug/customization/bespoke/assets/style.css
@@ -0,0 +1,56 @@
+body {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+    padding: 0;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    align-items: stretch;
+
+    font-family: Helvetica,Arial,sans-serif;
+}
+
+header {
+    flex-shrink: 0;
+    border-bottom: 2px solid #fcba19;
+    background-color: #036;
+
+    background-image: url( 'bc-gov-logo-transparent.png' );
+    background-position: 10px -5px;
+    background-repeat: no-repeat;
+
+    padding-left: 185px;
+    color: white;
+    font-size: 30px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+article {
+    flex-grow: 1;
+    position: relative;
+}
+
+footer {
+    flex-shrink: 0;
+    border-top: 2px solid #fcba19;
+    background-color: #036;
+    color: white;
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+#smk-map-frame {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+    padding: 0;
+}
diff --git a/debug/customization/bespoke/components/customComponent.js b/debug/customization/bespoke/components/customComponent.js
@@ -0,0 +1,43 @@
+// 'BespokeTool--101' is a concatenation of 'BespokeTool' and the instance name of the 
+// configured tool (ie. '101'). 'Activated' indicates that the handler will run when the 
+// tool is activated (versus the other options of initialized, deactivated and triggered). 
+// The third argument in the SMK.Handler.set() function is the anonymous function that 
+// executes when the BespokeTool--101 is activated.
+SMK.HANDLER.set('BespokeTool--101', 'activated', (smk, tool) => {
+    tool.component = Vue.component('Zoom', {
+        data: function() {
+            return {
+                buttonText: "Fly to Victoria"
+            }
+        },
+        methods: {
+            handleZoom() {
+                // The 'map' Leaflet Map object (https://leafletjs.com/reference.html#map-example)
+                // is in a tree of objects initialized by SMK in the 'smk' global object. 
+                // 'smk' gives access to all tools and data in the SMK app.
+                const leafletMap = smk.$viewer.map;
+
+                // We use Leaflet's API to store latitude and longitude coordinates.
+                // 'L' is the global Leaflet object, and LatLng is an object that 
+                // can store coordinates. (https://leafletjs.com/reference.html#latlng)
+                const newCenter = new L.LatLng(48.45,-123.35);
+
+                // We call the Leaflet Map's flyTo() method 
+                // (https://leafletjs.com/reference.html#latlng). 
+                leafletMap.flyTo(newCenter, 13);
+            }
+        },
+        template: `
+            <!-- All of a template's content must be inside a pair of parent tags. -->
+            <div>
+                <p>The Bespoke tool allows you to create your own custom tool for SMK apps. You can add HTML, CSS, and Javascript to provide unique functionality.</p>
+
+                <p>This example includes a custom <a href="https://vuejs.org/">Vue.js</a> component that uses <a href="https://leafletjs.com/">Leaflet</a> API to update the map view. Click the button below to see this in action!</p>
+
+                <div>
+                    <button v-on:click="handleZoom">{{buttonText}}</button>
+                </div>
+            </div>
+        `
+    })
+} )
diff --git a/debug/customization/bespoke/index.html b/debug/customization/bespoke/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Bespoke Tool Example</title>
+        <!-- SMK BOOTSTRAP - - - - - - - -->
+        <script src="../../../dist/smk.js"></script>
+        <!-- - - - - - - - - - - - - - - -->
+        <link rel="stylesheet" type="text/css" href="./assets/style.css"/>
+    </head>
+
+    <body>
+        <header>Bespoke Tool</header>
+
+        <article>
+            <div id="smk-map-frame"></div>
+        </article>
+
+        <footer>Application constructed by smk-cli at 2021-11-24T23:12:44.973Z</footer>
+
+        <script src="./components/customComponent.js"></script>
+        <script src="./smk-init.js"></script>
+    </body>
+</html>
diff --git a/debug/customization/bespoke/smk-config.json b/debug/customization/bespoke/smk-config.json
@@ -0,0 +1,138 @@
+{
+    "name": "Bespoke1",
+    "viewer": {
+        "type": "leaflet",
+        "location": {
+            "center": [
+                -124.97187974331459,
+                51.821895387033834
+            ],
+            "extent": [
+                -133.3683520649526,
+                46.021881710514336,
+                -116.57540742167657,
+                56.96082045105082
+            ],
+            "zoom": 5.662861104534402
+        },
+        "baseMap": "Streets"
+    },
+    "layers": [],
+    "tools": [
+        {
+            "type": "toolbar",
+            "enabled": true
+        },
+        {
+            "type": "list-menu",
+            "enabled": true,
+            "title": "My SMK Application"
+        },
+        {
+            "type": "pan",
+            "enabled": true
+        },
+        {
+            "type": "zoom",
+            "enabled": true
+        },
+        {
+            "type": "about",
+            "enabled": false,
+            "title": "About My SMK Application",
+            "position": "list-menu",
+            "content": "<p>Welcome to SMK!</p><p>My Simple Map Kit application.</p>"
+        },
+        {
+            "type": "layers",
+            "enabled": false
+        },
+        {
+            "type": "baseMaps",
+            "enabled": false
+        },
+        {
+            "type": "identify",
+            "enabled": false,
+            "showPanel": true,
+            "showWidget": true,
+            "style": {
+                "strokeWidth": 1,
+                "strokeStyle": "1, 1",
+                "strokeColor": "#000000",
+                "strokeOpacity": 0.8,
+                "fillColor": "#000000",
+                "fillOpacity": 0.5,
+                "markerSize": [
+                    20,
+                    20
+                ],
+                "markerOffset": [
+                    10,
+                    0
+                ]
+            }
+        },
+        {
+            "order": 2,
+            "position": "toolbar",
+            "icon": "search",
+            "title": "Search for Location",
+            "showPanel": true,
+            "showLocation": true,
+            "command": {
+                "identify": true,
+                "measure": true,
+                "directions": true
+            },
+            "type": "search",
+            "enabled": false
+        },
+        {
+            "type": "coordinate",
+            "enabled": false
+        },
+        {
+            "type": "measure",
+            "enabled": false
+        },
+        {
+            "type": "markup",
+            "enabled": false
+        },
+        {
+            "type": "scale",
+            "enabled": false
+        },
+        {
+            "type": "minimap",
+            "enabled": false
+        },
+        {
+            "type": "directions",
+            "enabled": false
+        },
+        {
+            "type": "location",
+            "enabled": false
+        },
+        {
+            "type": "select",
+            "enabled": false
+        },
+        {
+            "order": 1,
+            "position": "toolbar",
+            "icon": "now_widgets",
+            "title": "Example Bespoke Tool",
+            "useComponent": true,
+            "type": "bespoke",
+            "instance": "101",
+            "enabled": true,
+            "showTitle": true
+        }
+    ],
+    "version": "1.0.7",
+    "createdBy": "SMK Developer",
+    "createdDate": "2021-11-24T23:12:44.973Z"
+}
diff --git a/debug/customization/bespoke/smk-init.js b/debug/customization/bespoke/smk-init.js
@@ -0,0 +1,4 @@
+SMK.INIT( {
+    containerSel: '#smk-map-frame',
+    config: [ './smk-config.json', '?' ]
+} )
diff --git a/debug/customization/index.html b/debug/customization/index.html
@@ -0,0 +1,6 @@
+<body>
+<h1><a href="..">SMK Debug</a> / Customization</h1>
+<ul>
+    <li><a href="bespoke">Bespoke Tool</a></li>
+</ul>
+</body>
diff --git a/debug/index.html b/debug/index.html
@@ -4,5 +4,6 @@ <h1>SMK Debug</h1>
     <li><a href="app">Apps</a></li>
     <li><a href="feature">Features</a></li>
     <li><a href="layout">Layouts</a></li>
+    <li><a href="customization">Customization</a></li>
 </ul>
 </body>