refactors, adds controls, improves styles re: #4670

archesproject · Jun 20, 2019 · c32d4d0 · c32d4d0
1 parent dae689c
commit c32d4d0
Show file tree

Hide file tree

Showing 5 changed files with 677 additions and 17 deletions.
diff --git a/arches/app/media/css/arches.css b/arches/app/media/css/arches.css
@@ -20,6 +20,7 @@
 @import url(../packages/leaflet/dist/leaflet.css);
 @import url(../packages/leaflet-draw/dist/leaflet.draw.css);
 @import url(../css/tree/tree.css);
+@import url(../packages/@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css);
 .regular-link {
     color: #337ab7;
     text-decoration: none;
@@ -1215,7 +1216,7 @@ ul.tabbed-report-tab-list {
 }
 
 .basemap-listing:before, .overlay-listing .overlay-name:before {
-    margin-right: 16px;
+    margin-right: 4px;
     font-family: FontAwesome;
 }
 
@@ -1302,7 +1303,16 @@ ul.tabbed-report-tab-list {
 }
 .layer-listing-icon {
     display: inline-block;
-    width: 20px;
+}
+.layer-listing-icon::before {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border: solid 1px rgb(216, 216, 216);
+    border-radius: 100%;
+    background-color: rgb(247, 247, 247);
 }
 .basemap-listing.active-basemap, .basemap-listing:hover, .overlay-listing.active-overlay, .overlay-listing:hover, .legend-listing .legend-name {
     color: rgb(33, 62, 95);
@@ -9869,6 +9879,10 @@ a.clear-geojson-button:hover {
     visibility: hidden;
 }
 
+.map-card-wrapper .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+    visibility: visible;
+}
+
 .widget-wrapper .mapboxgl-map {
     z-index: 10;
     margin-bottom: -10px;

diff --git a/arches/app/media/js/views/components/map.js b/arches/app/media/js/views/components/map.js
@@ -3,8 +3,10 @@ define([
     'underscore',
     'arches',
     'knockout',
+    'mapbox-gl',
+    'mapbox-gl-geocoder',
     'bindings/sortable'
-], function($, _, arches, ko) {
+], function($, _, arches, ko, mapboxgl, MapboxGeocoder) {
     var viewModel = function(params) {
         var self = this;
         var geojsonSourceFactory = function() {
@@ -21,6 +23,13 @@ define([
         var y = params.y || arches.mapDefaultY;
         var zoom = params.zoom || arches.mapDefaultZoom;
         var bounds = params.bounds || arches.hexBinBounds;
+        var sources = Object.assign({
+            "resource": geojsonSourceFactory(),
+            "search-results-hex": geojsonSourceFactory(),
+            "search-results-hashes": geojsonSourceFactory(),
+            "search-results-points": geojsonSourceFactory()
+        }, arches.mapSources, params.sources);
+        var mapLayers = params.mapLayers || arches.mapLayers;
 
         this.basemaps = [];
         this.overlays = ko.observableArray();
@@ -30,7 +39,7 @@ define([
             self.activeTab(undefined);
         };
 
-        arches.mapLayers.forEach(function(layer) {
+        mapLayers.forEach(function(layer) {
             if (!layer.isoverlay) {
                 self.basemaps.push(layer);
                 if (layer.addtomap) self.activeBasemap(layer);
@@ -47,7 +56,7 @@ define([
             }
         });
 
-        _.each(arches.mapSources, function(sourceConfig) {
+        _.each(sources, function(sourceConfig) {
             if (sourceConfig.tiles) {
                 sourceConfig.tiles.forEach(function(url, i) {
                     if (url.startsWith('/')) {
@@ -125,12 +134,7 @@ define([
         this.mapOptions = {
             style: {
                 version: 8,
-                sources: Object.assign({
-                    "resource": geojsonSourceFactory(),
-                    "search-results-hex": geojsonSourceFactory(),
-                    "search-results-hashes": geojsonSourceFactory(),
-                    "search-results-points": geojsonSourceFactory()
-                }, arches.mapSources, params.sources),
+                sources: sources,
                 sprite: arches.mapboxSprites,
                 glyphs: arches.mapboxGlyphs,
                 layers: layers(),
@@ -149,9 +153,15 @@ define([
         };
 
         this.setupMap = function(map) {
-            if (ko.isObservable(params.map)) {
-                params.map(map);
-            }
+            if (ko.isObservable(params.map)) params.map(map);
+
+            map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+            map.addControl(new MapboxGeocoder({
+                accessToken: mapboxgl.accessToken,
+                mapboxgl: mapboxgl,
+                placeholder: arches.geocoderPlaceHolder,
+                bbox: bounds
+            }), 'top-right');
 
             layers.subscribe(function(layers) {
                 var style = map.getStyle();

diff --git a/arches/app/templates/javascript.htm b/arches/app/templates/javascript.htm
@@ -51,6 +51,7 @@
             'chosen': '{{ STATIC_URL }}packages/chosen-js/chosen.jquery',
             'mapbox-gl': '{{ STATIC_URL }}packages/mapbox-gl/dist/mapbox-gl',
             'mapbox-gl-draw': '{{ STATIC_URL }}packages/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw',
+            'mapbox-gl-geocoder': '{{ STATIC_URL }}packages/@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.min',
             'proj4': '{{ STATIC_URL }}packages/proj4/dist/proj4',
             'noUiSlider': '{{ STATIC_URL }}packages/nouislider/distribute/nouislider.min',
             'geojson-extent': '{{ STATIC_URL }}packages/@mapbox/geojson-extent/geojson-extent',
@@ -233,6 +234,7 @@
                 api_card: "{% url 'api_card' 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa' %}".replace('aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa', ''),
                 api_search_component_data: "{% url 'api_search_component_data' 'aaaa'%}".replace('aaaa', ''),
             },
+            geocoderPlaceHolder: "{% trans 'Find an address...' %}",
             confirmNav: {
                 title: "{% trans 'Edits pending...' %}",
                 text: "{% trans 'You currently have edits pending, are you sure you would like to proceed (and discard any pending edits)?' %}"

diff --git a/arches/install/package.json b/arches/install/package.json
@@ -7,6 +7,7 @@
     "dependencies": {
         "@mapbox/geojson-extent": "0.3.2",
         "@mapbox/mapbox-gl-draw": "1.0.8",
+        "@mapbox/mapbox-gl-geocoder": "^4.4.0",
         "@turf/turf": "4.4.0",
         "backbone": "1.3.3",
         "blueimp-gallery": "2.15.2",