Merge remote-tracking branch 'upstream/master' into fix/web-driver-tests-v6

Conflicts:
	package-lock.json

package.json

@@ -1,6 +1,6 @@
 {
   "name": "maputnik",
-  "version": "1.0.1",
+  "version": "1.1.0-beta",
   "description": "A MapboxGL visual style editor",
   "main": "''",
   "scripts": {
@@ -32,7 +32,7 @@
     "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "mapbox-gl": "^0.41.0",
+    "mapbox-gl": "^0.43.0",
     "mapbox-gl-inspect": "^1.2.4",
     "maputnik-design": "github:maputnik/design",
     "mousetrap": "^1.6.1",

src/components/map/FeatureLayerPopup.jsx

@@ -4,13 +4,26 @@ import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import LayerIcon from '../icons/LayerIcon'
 
-
 function groupFeaturesBySourceLayer(features) {
   const sources = {}
+
+  let returnedFeatures = {};
+
   features.forEach(feature => {
+    if(returnedFeatures.hasOwnProperty(feature.layer.id)) {
+      returnedFeatures[feature.layer.id]++
+      
+      const featureObject = sources[feature.layer['source-layer']].find(f => f.layer.id === feature.layer.id)
+
+      featureObject.counter = returnedFeatures[feature.layer.id]
+    } else {
       sources[feature.layer['source-layer']] = sources[feature.layer['source-layer']] || []
       sources[feature.layer['source-layer']].push(feature)
+
+      returnedFeatures[feature.layer.id] = 1
+    }
   })
+
   return sources
 }
 
@@ -34,6 +47,7 @@ class FeatureLayerPopup extends React.Component {
             paddingRight: 3
           }}/>
           {feature.layer.id}
+          {feature.counter && <span> × {feature.counter}</span>}
         </label>
       })
       return <div key={vectorLayerId}>

src/components/map/FeaturePropertyPopup.jsx

@@ -23,7 +23,7 @@ function renderProperties(feature) {
 
 function renderFeature(feature) {
   return <div key={feature.id}>
-    <div className="maputnik-popup-layer-id">{feature.layer['source-layer']}</div>
+    <div className="maputnik-popup-layer-id">{feature.layer['source-layer']}{feature.inspectModeCounter && <span> × {feature.inspectModeCounter}</span>}</div>
     <InputBlock key={"property-type"} label={"$type"}>
       <StringInput value={feature.geometry.type} style={{backgroundColor: 'transparent'}} />
     </InputBlock>
@@ -31,13 +31,36 @@ function renderFeature(feature) {
   </div>
 }
 
+function removeDuplicatedFeatures(features) {
+  let uniqueFeatures = [];
+
+  features.forEach(feature => {
+    const featureIndex = uniqueFeatures.findIndex(feature2 => {
+      return feature.layer['source-layer'] === feature2.layer['source-layer'] 
+        && JSON.stringify(feature.properties) === JSON.stringify(feature2.properties)
+    })
+
+    if(featureIndex === -1) {
+      uniqueFeatures.push(feature)
+    } else {
+      if(uniqueFeatures[featureIndex].hasOwnProperty('counter')) {
+        uniqueFeatures[featureIndex].inspectModeCounter++
+      } else {
+        uniqueFeatures[featureIndex].inspectModeCounter = 2
+      }
+    }
+  })
+
+  return uniqueFeatures
+}
+
 class FeaturePropertyPopup extends React.Component {
   static propTypes = {
     features: PropTypes.array
   }
 
   render() {
-    const features = this.props.features
+    const features = removeDuplicatedFeatures(this.props.features)
     return <div className="maputnik-feature-property-popup">
       {features.map(renderFeature)}
     </div>

src/components/modals/ExportModal.jsx

@@ -55,8 +55,8 @@ class Gist extends React.Component {
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>`+styleTitle+` Preview</title>
-    <link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.css" />
-    <script src="https://api.mapbox.com/mapbox-gl-js/v0.28.0/mapbox-gl.js"></script>
+    <link rel="stylesheet" type="text/css" href="https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css" />
+    <script src="https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js"></script>
     <style>
       body { margin:0; padding:0; }
       #map { position:absolute; top:0; bottom:0; width:100%; }