Integrate map_utils widget into framework core

Fixes various UX issues with map_utils plugin by integrating it into the framework core. Changes: * Replace custom dropdown with Bootstrap widget * Merge CSS, templates, and locale files * Simplify map_utils commands Connects CoastalResilienceNetwork#734 Connects CoastalResilienceNetwork#738
kdeloach · Dec 12, 2016 · 9238068 · 9238068
1 parent 2729b5c
commit 9238068
Show file tree

Hide file tree

Showing 20 changed files with 142 additions and 311 deletions.
diff --git a/src/GeositeFramework/Views/Home/Index.cshtml b/src/GeositeFramework/Views/Home/Index.cshtml
@@ -87,6 +87,7 @@
     <link rel="stylesheet" href="css/TinyBox2.css">
     <link rel="stylesheet" href="css/pageguide.min.css"/>
     <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/measure.css">
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
     <link href="https://fonts.googleapis.com/css?family=Roboto:500,900" rel="stylesheet">
 
@@ -199,7 +200,24 @@
                 <div id="map-0" class="map">
                     <div class="control-container">
                         <div class="top-tools"></div>
-                        <div class="tools"></div>
+						<div class="map-tools">
+							<!-- Map utils control -->
+							<div class="topbar-plugin" id="map-utils-control">
+								<div class="plugin-launcher">
+									<button class="btn btn-default dropdown-toggle" type="button" id="map-utils-dropdown-button" data-toggle="dropdown" aria-haspopup="true">
+										<i class="icon-ellipsis-vert"></i>
+									</button>
+									<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="map-utils-dropdown-button">
+										<li><a href="#" data-command="measure" data-i18n="Measure">Measure</a></li>
+										<li><a href="#" data-command="zoom" data-i18n="Zoom to Extent">Zoom to Extent</a></li>
+										<li><a href="#" data-command="export" data-i18n="Create Map">Create Map</a></li>
+										<li><a href="#" data-command="share" data-i18n="Save &amp; Share">Save &amp; Share</a></li>
+									</ul>
+								</div>
+							</div>
+							<!-- Top bar plugins -->
+							<div class="tools"></div>
+						</div>
                         <div class="basemap-selector">
                             <div class="basemap-selector-title"></div>
                             <div class="basemap-selector-list">
@@ -520,6 +538,31 @@
         </div>
     </script>
 
+    <script type="text/template" id="template-measure-tooltip">
+        <div class="measure-tooltip">
+            <p><%= instructions %></p>
+            <div>
+                <div class="measure-label"><%= segmentLabel %></div><%= segmentLength %> <%= units%>
+            </div>
+            <div>
+                <div class="measure-label"><%= lengthLabel %>:</div><%= totalLength %> <%= units%>
+            </div>
+        </div>
+    </script>
+
+    <script type="text/template" id="template-measure-infobubble">
+        <div class="measure-bubble">
+            <% if (area) { %>
+                <div>
+                    <div class="measure-label i18n" data-i18n="Area:">Area:</div><%= area %> <%= areaUnits%><sup>2</sup>
+                </div>
+            <% } %>
+            <div>
+                <div class="measure-label i18n" data-i18n="Length:">Length:</div><%= length %> <%= lengthUnits%>
+            </div>
+        </div>
+    </script>
+
     <!-- TOP BAR, FIXED TO THE TOP OF THE SCREEN -->
     <header>
         <div class="dropdown header-dropdown nav-main-dropdown">

diff --git a/src/GeositeFramework/css/main.css b/src/GeositeFramework/css/main.css
@@ -1650,7 +1650,7 @@ header .nav-main {
     left: 20px;
     z-index: 1;
 }
-.content .map .tools {
+.content .map .map-tools {
     position: absolute;
     top: 145px;
     right: 20px;
@@ -1691,7 +1691,8 @@ header .nav-main {
     box-shadow: 0 1px 7px #000;
     box-shadow: 0 1px 7px rgba(0, 0, 0, .85);
 }
-.content .map .topbar-plugin a.plugin-launcher > div {
+.content .map .topbar-plugin .plugin-launcher > div,
+.content .map .topbar-plugin .plugin-launcher > button {
     width: 34px;
     height: 34px;
     background-color: white;
@@ -1705,14 +1706,16 @@ header .nav-main {
     box-shadow: 0 0 12px rgba(0, 0, 0, .25);
     border: 1px solid #999;
 }
-.content .map .topbar-plugin.active a.plugin-launcher > div {
+.content .map .topbar-plugin.active .plugin-launcher > div,
+.content .map .topbar-plugin.active .plugin-launcher > button {
     opacity: 1;
     border: 1px solid #212323;
     box-shadow: 0 0 15px black inset;
     background-color: #999;
     box-shadow: 0 0 15px rgba(0, 0, 0, .5) inset;
 }
-.content .map .topbar-plugin a.plugin-launcher > div:hover {
+.content .map .topbar-plugin .plugin-launcher > div:hover,
+.content .map .topbar-plugin .plugin-launcher > button:hover {
     opacity: 1;
 }
 .esriSimpleSlider {

diff --git a/...rk/js/widgets/map_utils/measure/style.css → src/GeositeFramework/css/measure.css b/...rk/js/widgets/map_utils/measure/style.css → src/GeositeFramework/css/measure.css
@@ -18,7 +18,7 @@
         }
 
 
-.content .map .measure {		
+.content .map .measure {
 	  background-image: url(icon.png);
    }
    .content .map .active .measure {

diff --git a/src/GeositeFramework/js/Map.js b/src/GeositeFramework/js/Map.js
@@ -3,6 +3,7 @@
 
 require(['use!Geosite',
          'framework/Legend',
+         'framework/widgets/map_utils/main',
          'framework/util/ajax',
          'esri/map',
          'esri/layers/ArcGISTiledMapServiceLayer',
@@ -12,6 +13,7 @@ require(['use!Geosite',
         ],
     function(N,
              Legend,
+             MapUtils,
              ajaxUtil,
              Map,
              ArcGISTiledMapServiceLayer,
@@ -143,6 +145,7 @@ require(['use!Geosite',
             N.app.syncedMapManager.addMapView(view);
 
             initLegend(view, esriMap);
+            initMapUtils(view, esriMap);
 
             // Cache the parent of the infowindow rather than re-select it every time.
             // Occasionally, the infoWindow dom node as accessed from the underlaying esri.map
@@ -314,6 +317,16 @@ require(['use!Geosite',
         dojo.connect(esriMap, 'resize', redraw);
     }
 
+    function initMapUtils(view, esriMap) {
+        var el = $('#map-utils-control').get(0);
+        return new MapUtils({
+            el: el,
+            map: esriMap,
+            app: N.app,
+            regionData: N.app.data.region
+        });
+    }
+
     N.views = N.views || {};
     N.views.Map = Backbone.View.extend({
         $infoWindowParent: null,

diff --git a/src/GeositeFramework/js/widgets/map_utils/export/main.js b/src/GeositeFramework/js/widgets/map_utils/export/main.js
@@ -5,16 +5,12 @@ define([
     'use strict';
 
     return declare(null, {
-        constructor: function(args) {
-            declare.safeMixin(this, args);
+        constructor: function(dispatcher) {
+            this.dispatcher = dispatcher;
         },
 
         execute: function() {
-            this.app.dispatcher.trigger('export-map:pane-0');
-        },
-
-        cancel: function() {
-            // NOOP
+            this.dispatcher.trigger('export-map:pane-0');
         }
     });
 });
diff --git a/src/GeositeFramework/js/widgets/map_utils/full_extent/locales/en.json b/src/GeositeFramework/js/widgets/map_utils/full_extent/locales/en.json
diff --git a/src/GeositeFramework/js/widgets/map_utils/full_extent/locales/es.json b/src/GeositeFramework/js/widgets/map_utils/full_extent/locales/es.json
diff --git a/src/GeositeFramework/js/widgets/map_utils/full_extent/main.js b/src/GeositeFramework/js/widgets/map_utils/full_extent/main.js
@@ -1,14 +1,4 @@
-require({
-    packages: [
-        {
-            name: 'jquery',
-            location: '//ajax.googleapis.com/ajax/libs/jquery/1.9.0',
-            main: 'jquery.min'
-        }
-    ]
-});
-
-define([
+define([
     'dojo/_base/declare',
     'esri/geometry/Extent',
     'esri/SpatialReference'
@@ -18,28 +8,21 @@ define([
               SpatialReference) {
     'use strict';
 
+    var LatLng = new SpatialReference({ wkid: 4326 });
+
     return declare(null, {
-        constructor: function(args) {
-            declare.safeMixin(this, args);
+        constructor: function(map, extent) {
+            this.map = map;
+            this.initialExtent = new Extent(
+                extent[0],
+                extent[1],
+                extent[2],
+                extent[3],
+                LatLng);
         },
 
         execute: function() {
-            var extent = this.getInitialExtent();
-            this.map.setExtent(extent);
-        },
-
-        cancel: function() {
-            // NOOP
-        },
-
-        getInitialExtent: function() {
-            var x = this.app.regionConfig.initialExtent,
-                srs = new SpatialReference({ wkid: 4326 /*lat-long*/ });
-            return new Extent(x[0], x[1], x[2], x[3], srs);
-        },
-
-        renderLauncher: function() {
-            return $('<div class="full-extent"></div>');
+            this.map.setExtent(this.initialExtent);
         }
     });
 });