From 37301312e54189640803661334f2c31842089c02 Mon Sep 17 00:00:00 2001
From: vershwal <vershwal.princi@gmail.com>
Date: Mon, 21 May 2018 16:07:22 +0530
Subject: [PATCH] button appeared

---
 data/core.yaml         |  7 +++-
 dist/locales/en.json   |  8 +++-
 modules/ui/map_data.js | 84 +++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 96 insertions(+), 3 deletions(-)

diff --git a/data/core.yaml b/data/core.yaml
index c10fa4c7c..d401c3c45 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -585,7 +585,7 @@ en:
   cannot_zoom: "Cannot zoom out further in current mode."
   full_screen: Toggle Full Screen
   gpx:
-    local_layer: "Local file"
+    local_layer: "Add a GPX"
     drag_drop: "Drag and drop a .gpx, .geojson or .kml file on the page, or click the button to the right to browse"
     zoom: "Zoom to layer"
     browse: "Browse for a file"
@@ -593,6 +593,11 @@ en:
     tooltip: "Streetside photos from Microsoft"
     title: "Photo Overlay (Bing Streetside)"
     report: Report a privacy concern with this image
+  mvt:
+    local_layer: "Add a MVT"
+    drag_drop: "Drag and drop a .mvt or .geojson file on the page, or click the button to the right to browse"
+    zoom: "Zoom to layer"
+    browse: "Browse for a file"
   mapillary_images:
     tooltip: "Street-level photos from Mapillary"
     title: "Photo Overlay (Mapillary)"
diff --git a/dist/locales/en.json b/dist/locales/en.json
index c0ba6ad9d..c1e5a8432 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -710,7 +710,7 @@
         "cannot_zoom": "Cannot zoom out further in current mode.",
         "full_screen": "Toggle Full Screen",
         "gpx": {
-            "local_layer": "Local file",
+            "local_layer": "Add a GPX",
             "drag_drop": "Drag and drop a .gpx, .geojson or .kml file on the page, or click the button to the right to browse",
             "zoom": "Zoom to layer",
             "browse": "Browse for a file"
@@ -720,6 +720,12 @@
             "title": "Photo Overlay (Bing Streetside)",
             "report": "Report a privacy concern with this image"
         },
+        "mvt": {
+            "local_layer": "Add a MVT",
+            "drag_drop": "Drag and drop a .mvt or .geojson file on the page, or click the button to the right to browse",
+            "zoom": "Zoom to layer",
+            "browse": "Browse for a file"
+        },
         "mapillary_images": {
             "tooltip": "Street-level photos from Mapillary",
             "title": "Photo Overlay (Mapillary)"
diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js
index 32e1eac19..1d6da4c6d 100644
--- a/modules/ui/map_data.js
+++ b/modules/ui/map_data.js
@@ -277,6 +277,87 @@ export function uiMapData(context) {
             .property('checked', showsGpx);
     }
 
+    function drawMvtItem(selection) {
+        var mvt = layers.layer('gpx'),
+            hasMvt = mvt && mvt.hasGpx(),
+            showsMvt = hasMvt && gpx.enabled();
+
+        var ul = selection
+            .selectAll('.layer-list-mvt')
+            .data(mvt ? [0] : []);
+
+        // Exit
+        ul.exit()
+            .remove();
+
+        // Enter
+        var ulEnter = ul.enter()
+            .append('ul')
+            .attr('class', 'layer-list layer-list-mvt');
+
+        var liEnter = ulEnter
+            .append('li')
+            .attr('class', 'list-item-mvt');
+
+        liEnter
+            .append('button')
+            .attr('class', 'list-item-mvt-extent')
+            .call(tooltip()
+                .title(t('mvt.zoom'))
+                .placement((textDirection === 'rtl') ? 'right' : 'left')
+            )
+            .on('click', function() {
+                d3_event.preventDefault();
+                d3_event.stopPropagation();
+                mvt.fitZoom();
+            })
+            .call(svgIcon('#icon-search'));
+
+        liEnter
+            .append('button')
+            .attr('class', 'list-item-mvt-browse')
+            .call(tooltip()
+                .title(t('mvt.browse'))
+                .placement((textDirection === 'rtl') ? 'right' : 'left')
+            )
+            .on('click', function() {
+                d3_select(document.createElement('input'))
+                    .attr('type', 'file')
+                    .on('change', function() {
+                        mvt.files(d3_event.target.files);
+                    })
+                    .node().click();
+            })
+            .call(svgIcon('#icon-geolocate'));
+
+        var labelEnter = liEnter
+            .append('label')
+            .call(tooltip()
+                .title(t('mvt.drag_drop'))
+                .placement('top')
+            );
+
+        labelEnter
+            .append('input')
+            .attr('type', 'checkbox')
+            .on('change', function() { toggleLayer('mvt'); });
+
+        labelEnter
+            .append('span')
+            .text(t('mvt.local_layer'));
+
+        // Update
+        ul = ul
+            .merge(ulEnter);
+
+        ul.selectAll('.list-item-mvt')
+            .classed('active', showsMvt)
+            .selectAll('label')
+            .classed('deemphasize', !hasMvt)
+            .selectAll('input')
+            .property('disabled', !hasMvt)
+            .property('checked', showsMvt);
+    }
 
     function drawListItems(selection, data, type, name, change, active) {
         var items = selection.selectAll('li')
@@ -369,7 +450,8 @@ export function uiMapData(context) {
         _dataLayerContainer
             .call(drawOsmItem)
             .call(drawPhotoItems)
-            .call(drawGpxItem);
+            .call(drawGpxItem)
+            .call(drawMvtItem);
 
         _fillList
             .call(drawListItems, fills, 'radio', 'area_fill', setFill, showsFill);