Treat osm layer like other vector layers and give it a toggle

(closes #2904)

data/core.yaml

@@ -390,6 +390,10 @@ en:
     description: Map Data
     key: F
     data_layers: Data Layers
+    layers:
+      osm:
+        tooltip: Map data from OpenStreetMap
+        title: OpenStreetMap data
     fill_area: Fill Areas
     map_features: Map Features
     autohidden: "These features have been automatically hidden because too many would be shown on the screen.  You can zoom in to edit them."

dist/locales/en.json

@@ -480,6 +480,12 @@
             "description": "Map Data",
             "key": "F",
             "data_layers": "Data Layers",
+            "layers": {
+                "osm": {
+                    "tooltip": "Map data from OpenStreetMap",
+                    "title": "OpenStreetMap data"
+                }
+            },
             "fill_area": "Fill Areas",
             "map_features": "Map Features",
             "autohidden": "These features have been automatically hidden because too many would be shown on the screen.  You can zoom in to edit them."

modules/renderer/map.js

@@ -84,7 +84,7 @@ export function rendererMap(context) {
         isRedrawScheduled = false;
         window.cancelIdleCallback(pendingRedrawCall);
     }
-        
+
     function map(selection) {
 
         _selection = selection;
@@ -756,6 +756,9 @@ export function rendererMap(context) {
 
 
     map.editable = function() {
+        var osmLayer = surface.selectAll('.data-layer-osm');
+        if (!osmLayer.empty() && osmLayer.classed('disabled')) return false;
+
         return map.zoom() >= context.minEditableZoom();
     };
 

modules/svg/osm.js

@@ -1,10 +1,61 @@
-export function svgOsm() {
-    return function drawOsm(selection) {
-        var layers = selection.selectAll('.layer-osm')
-            .data(['areas', 'lines', 'hit', 'halo', 'label']);
+export function svgOsm(projection, context, dispatch) {
+    var enabled = true;
 
-        layers.enter()
+
+    function drawOsm(selection) {
+        selection.selectAll('.layer-osm')
+            .data(['areas', 'lines', 'hit', 'halo', 'label'])
+            .enter()
             .append('g')
             .attr('class', function(d) { return 'layer-osm layer-' + d; });
+    }
+
+
+    function showLayer() {
+        var layer = context.surface().selectAll('.data-layer-osm');
+        layer.interrupt();
+
+        layer
+            .classed('disabled', false)
+            .style('opacity', 0)
+            .transition()
+            .duration(250)
+            .style('opacity', 1)
+            .on('end interrupt', function () {
+                dispatch.call('change');
+            });
+    }
+
+
+    function hideLayer() {
+        var layer = context.surface().selectAll('.data-layer-osm');
+        layer.interrupt();
+
+        layer
+            .transition()
+            .duration(250)
+            .style('opacity', 0)
+            .on('end interrupt', function () {
+                layer.classed('disabled', true);
+                dispatch.call('change');
+            });
+    }
+
+
+    drawOsm.enabled = function(_) {
+        if (!arguments.length) return enabled;
+        enabled = _;
+
+        if (enabled) {
+            showLayer();
+        } else {
+            hideLayer();
+        }
+
+        dispatch.call('change');
+        return this;
     };
+
+
+    return drawOsm;
 }

modules/ui/map_data.js

@@ -76,11 +76,6 @@ export function uiMapData(context) {
         }
 
 
-        function clickGpx() {
-            toggleLayer('gpx');
-        }
-
-
         function clickMapillaryImages() {
             toggleLayer('mapillary-images');
             if (!showsLayer('mapillary-images')) {
@@ -191,27 +186,77 @@ export function uiMapData(context) {
         }
 
 
+        function drawOsmItem(selection) {
+            var osm = layers.layer('osm'),
+                showsOsm = osm.enabled();
+
+            var ul = selection
+                .selectAll('.layer-list-osm')
+                .data(osm ? [0] : []);
+
+            // Exit
+            ul.exit()
+                .remove();
+
+            // Enter
+            var ulEnter = ul.enter()
+                .append('ul')
+                .attr('class', 'layer-list layer-list-osm');
+
+            var liEnter = ulEnter
+                .append('li')
+                .attr('class', 'list-item-osm');
+
+            var labelEnter = liEnter
+                .append('label')
+                .call(tooltip()
+                    .title(t('map_data.layers.osm.tooltip'))
+                    .placement('top')
+                );
+
+            labelEnter
+                .append('input')
+                .attr('type', 'checkbox')
+                .on('change', function() { toggleLayer('osm'); });
+
+            labelEnter
+                .append('span')
+                .text(t('map_data.layers.osm.title'));
+
+            // Update
+            ul = ul
+                .merge(ulEnter);
+
+            ul.selectAll('.list-item-osm')
+                .classed('active', showsOsm)
+                .selectAll('input')
+                .property('checked', showsOsm);
+        }
+
+
         function drawGpxItem(selection) {
             var gpx = layers.layer('gpx'),
                 hasGpx = gpx && gpx.hasGpx(),
                 showsGpx = hasGpx && gpx.enabled();
 
-            var gpxLayerItem = selection
+            var ul = selection
                 .selectAll('.layer-list-gpx')
                 .data(gpx ? [0] : []);
 
             // Exit
-            gpxLayerItem.exit()
+            ul.exit()
                 .remove();
 
             // Enter
-            var enter = gpxLayerItem.enter()
+            var ulEnter = ul.enter()
                 .append('ul')
-                .attr('class', 'layer-list layer-list-gpx')
+                .attr('class', 'layer-list layer-list-gpx');
+
+            var liEnter = ulEnter
                 .append('li')
-                .classed('list-item-gpx', true);
+                .attr('class', 'list-item-gpx');
 
-            enter
+            liEnter
                 .append('button')
                 .attr('class', 'list-item-gpx-extent')
                 .call(tooltip()
@@ -224,12 +269,13 @@ export function uiMapData(context) {
                 })
                 .call(svgIcon('#icon-search'));
 
-            enter
+            liEnter
                 .append('button')
                 .attr('class', 'list-item-gpx-browse')
                 .call(tooltip()
                     .title(t('gpx.browse'))
-                    .placement((textDirection === 'rtl') ? 'right' : 'left'))
+                    .placement((textDirection === 'rtl') ? 'right' : 'left')
+                )
                 .on('click', function() {
                     d3.select(document.createElement('input'))
                         .attr('type', 'file')
@@ -240,33 +286,33 @@ export function uiMapData(context) {
                 })
                 .call(svgIcon('#icon-geolocate'));
 
-            var labelGpx = enter
+            var labelEnter = liEnter
                 .append('label')
-                .call(tooltip().title(t('gpx.drag_drop')).placement('top'));
+                .call(tooltip()
+                    .title(t('gpx.drag_drop'))
+                    .placement('top')
+                );
 
-            labelGpx
+            labelEnter
                 .append('input')
                 .attr('type', 'checkbox')
-                .on('change', clickGpx);
+                .on('change', function() { toggleLayer('gpx'); });
 
-            labelGpx
+            labelEnter
                 .append('span')
                 .text(t('gpx.local_layer'));
 
-
             // Update
-            gpxLayerItem = gpxLayerItem
-                .merge(enter);
+            ul = ul
+                .merge(ulEnter);
 
-            gpxLayerItem
+            ul.selectAll('.list-item-gpx')
                 .classed('active', showsGpx)
+                .selectAll('label')
+                .classed('deemphasize', !hasGpx)
                 .selectAll('input')
                 .property('disabled', !hasGpx)
                 .property('checked', showsGpx);
-
-            gpxLayerItem
-                .selectAll('label')
-                .classed('deemphasize', !hasGpx);
         }
 
 
@@ -324,11 +370,16 @@ export function uiMapData(context) {
 
 
         function update() {
-            dataLayerContainer.call(drawMapillaryItems);
-            dataLayerContainer.call(drawGpxItem);
+            dataLayerContainer
+                .call(drawOsmItem)
+                .call(drawMapillaryItems)
+                .call(drawGpxItem);
+
+            fillList
+                .call(drawList, fills, 'radio', 'area_fill', setFill, showsFill);
 
-            fillList.call(drawList, fills, 'radio', 'area_fill', setFill, showsFill);
-            featureList.call(drawList, features, 'checkbox', 'feature', clickFeature, showsFeature);
+            featureList
+                .call(drawList, features, 'checkbox', 'feature', clickFeature, showsFeature);
         }