Remove static fontstacks.json

Gist preview & access token

package.json

@@ -30,12 +30,11 @@
     "lodash.isequal": "^4.4.0",
     "lodash.throttle": "^4.1.1",
     "mapbox-gl": "^0.31.0",
-    "mapbox-gl-inspect": "^1.2.0",
+    "mapbox-gl-inspect": "^1.2.1",
     "mapbox-gl-style-spec": "^8.11.0",
     "mousetrap": "^1.6.0",
     "ol-mapbox-style": "1.0.1",
     "openlayers": "^3.19.1",
-    "randomcolor": "^0.4.4",
     "react": "^15.4.0",
     "react-addons-pure-render-mixin": "^15.4.0",
     "react-autocomplete": "^1.4.0",

src/components/Toolbar.jsx

@@ -91,6 +91,7 @@ export default class Toolbar extends React.Component {
       />
       <ExportModal
         mapStyle={this.props.mapStyle}
+        onStyleChanged={this.props.onStyleChanged}
         isOpen={this.state.isOpen.export}
         onOpenToggle={this.toggleModal.bind(this, 'export')}
       />

src/components/inputs/CheckboxInput.jsx

@@ -17,7 +17,9 @@ class CheckboxInput extends React.Component {
         checked={this.props.value}
       />
       <div className="maputnik-checkbox-box">
-        <svg className="maputnik-checkbox-icon" viewBox='0 0 32 32'>
+        <svg style={{
+            display: this.props.value ? 'inline' : 'none'
+          }} className="maputnik-checkbox-icon" viewBox='0 0 32 32'>
           <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
         </svg>
       </div>

src/components/inputs/FontInput.jsx

@@ -1,9 +1,6 @@
 import React from 'react'
 import AutocompleteInput from './AutocompleteInput'
 
-//TODO: Query available font stack dynamically
-import fontStacks from '../../config/fontstacks.json'
-
 class FontInput extends React.Component {
   static propTypes = {
     value: React.PropTypes.array.isRequired,

src/components/inputs/StringInput.jsx

@@ -27,7 +27,7 @@ class StringInput extends React.Component {
       placeholder={this.props.default}
       onChange={e => this.setState({ value: e.target.value })}
       onBlur={() => {
-        if(this.state.value) this.props.onChange(this.state.value)
+        if(this.state.value!==this.props.value) this.props.onChange(this.state.value)
       }}
     />
   }

src/components/layers/LayerList.jsx

@@ -115,7 +115,7 @@ class LayerListContainer extends React.Component {
     if(lookupKey in this.state.collapsedGroups) {
       newGroups[lookupKey] = !this.state.collapsedGroups[lookupKey]
     } else {
-      newGroups[lookupKey] = true
+      newGroups[lookupKey] = false
     }
     this.setState({
       collapsedGroups: newGroups
@@ -124,7 +124,7 @@ class LayerListContainer extends React.Component {
 
   isCollapsed(groupPrefix, idx) {
     const collapsed = this.state.collapsedGroups[[groupPrefix, idx].join('-')]
-    return collapsed === undefined ? false : collapsed
+    return collapsed === undefined ? true : collapsed
   }
 
   render() {
@@ -147,7 +147,7 @@ class LayerListContainer extends React.Component {
         const groupIdx = findClosestCommonPrefix(this.props.layers, idx)
         const listItem = <LayerListItem
           className={classnames({
-            'maputnik-layer-list-item-collapsed': this.isCollapsed(groupPrefix, groupIdx),
+            'maputnik-layer-list-item-collapsed': layers.length > 1 && this.isCollapsed(groupPrefix, groupIdx),
             'maputnik-layer-list-item-group-last': idxInGroup == layers.length - 1 && layers.length > 1
           })}
           index={idx}

src/components/map/FeaturePropertyPopup.jsx

@@ -23,6 +23,9 @@ function renderProperties(feature) {
 function renderFeature(feature) {
   return <div key={feature.id}>
     <div className="maputnik-popup-layer-id">{feature.layer['source-layer']}</div>
+    <InputBlock key={"property-type"} label={"$type"}>
+      <StringInput value={feature.geometry.type} style={{backgroundColor: 'transparent'}} />
+    </InputBlock>
     {renderProperties(feature)}
   </div>
 }

src/components/map/MapboxGlMap.jsx

@@ -7,6 +7,8 @@ import FeaturePropertyPopup from './FeaturePropertyPopup'
 import validateColor from 'mapbox-gl-style-spec/lib/validate/validate_color'
 import style from '../../libs/style.js'
 import tokens from '../../config/tokens.json'
+import colors from 'mapbox-gl-inspect/lib/colors'
+import Color from 'color'
 import { colorHighlightedLayer } from '../../libs/highlight'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import '../../mapboxgl.css'
@@ -112,11 +114,15 @@ export default class MapboxGlMap extends React.Component {
 
     const inspect = new MapboxInspect({
       popup: new MapboxGl.Popup({
-        closeButton: false,
         closeOnClick: false
       }),
       showMapPopup: true,
+      showMapPopupOnHover: false,
+      showInspectMapPopupOnHover: true,
       showInspectButton: false,
+      assignLayerColor: (layerId, alpha) => {
+        return Color(colors.brightColor(layerId, alpha)).desaturate(0.5).string()
+      },
       buildInspectStyle: (originalMapStyle, coloredLayers) => buildInspectStyle(originalMapStyle, coloredLayers, this.props.highlightedLayer),
       renderPopup: features => {
         if(this.props.inspectModeEnabled) {

src/components/modals/ExportModal.jsx

@@ -5,9 +5,11 @@ import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'
+import CheckboxInput from '../inputs/CheckboxInput'
 import Button from '../Button'
 import Modal from './Modal'
 import MdFileDownload from 'react-icons/lib/md/file-download'
+import style from '../../libs/style.js'
 import formatStyle from 'mapbox-gl-style-spec/lib/format'
 import GitHub from 'github-api'
 
@@ -15,18 +17,35 @@ import GitHub from 'github-api'
 class Gist extends React.Component {
   static propTypes = {
     mapStyle: React.PropTypes.object.isRequired,
+    onStyleChanged: React.PropTypes.func.isRequired,
   }
 
   constructor(props) {
     super(props);
-    this.state = {}
+    this.state = {
+      preview: false,
+      saving: false,
+      latestGist: null,
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({
+      ...this.state,
+      preview: !!(nextProps.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']
+    })
   }
 
   onSave() {
     this.setState({
+      ...this.state,
       saving: true
     });
-    const mapStyleStr = formatStyle(this.props.mapStyle);
+    const preview = this.state.preview && (this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token'];
+
+    const mapStyleStr = preview ?
+        formatStyle(stripAccessTokens(style.replaceAccessToken(this.props.mapStyle))) :
+        formatStyle(stripAccessTokens(this.props.mapStyle));
     const styleTitle = this.props.mapStyle.name || 'Style';
     const htmlStr = `
   <!DOCTYPE html>
@@ -56,49 +75,100 @@ class Gist extends React.Component {
   </body>
   </html>
 `
+    const files = {
+      "style.json": {
+        content: mapStyleStr
+      }
+    }
+    if(preview) {
+      files["index.html"] = {
+        content: htmlStr
+      }
+    }
     const gh = new GitHub();
     let gist = gh.getGist(); // not a gist yet
     gist.create({
       public: true,
-      description: styleTitle + 'Preview',
+      description: styleTitle,
-      files: {
+      files: files
-        "style.json": {
-          content: mapStyleStr
-        },
-        "index.html": {
-          content: htmlStr
-        }
-      }
     }).then(function({data}) {
       return gist.read();
     }).then(function({data}) {
       this.setState({
-        latestGist: data
+        ...this.state,
+        latestGist: data,
+        saving: false,
       });
     }.bind(this));
   }
 
+  onPreviewChange(value) {
+    this.setState({
+      ...this.state,
+      preview: value
+    })
+  }
+
+  changeMetadataProperty(property, value) {
+    const changedStyle = {
+      ...this.props.mapStyle,
+      metadata: {
+        ...this.props.mapStyle.metadata,
+        [property]: value
+      }
+    }
+    this.props.onStyleChanged(changedStyle)
+  }
+
+  renderPreviewLink() {
+    const gist = this.state.latestGist;
+    const user = gist.user || 'anonymous';
+    const preview = !!gist.files['index.html'];
+    if(preview) {
+      return <span><a target="_blank" href={"https://bl.ocks.org/"+user+"/"+gist.id}>Preview</a>,{' '}</span>
+    }
+    return null;
+  }
+
   renderLatestGist() {
     const gist = this.state.latestGist;
     const saving = this.state.saving;
-    if(gist) {
+    if(saving) {
+      return <p>Saving...</p>
+    } else if(gist) {
       const user = gist.user || 'anonymous';
       return <p>
         Latest saved gist:{' '}
-        <a target="_blank" href={"https://bl.ocks.org/"+user+"/"+gist.id}>Preview</a>,{' '}
+        {this.renderPreviewLink(this)}
         <a target="_blank" href={"https://gist.github.com/"+user+"/"+gist.id}>Source</a>
       </p>
-    } else if(saving) {
-      return <p>Saving...</p>
     }
   }
 
   render() {
-    return <div>
+    return <div className="maputnik-export-gist">
       <Button onClick={this.onSave.bind(this)}>
         <MdFileDownload />
         Save to Gist (anonymous)
       </Button>
+      {' '}
+      <CheckboxInput
+        value={this.state.preview}
+        name='gist-style-preview'
+        onChange={this.onPreviewChange.bind(this)}
+      />
+      <span> Include preview</span>
+      {this.state.preview ?
+          <div>
+            <InputBlock
+                label={"OpenMapTiles Access Token: "}>
+              <StringInput
+                  value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
+                  onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}/>
+            </InputBlock>
+            <a target="_blank" href="https://openmaptiles.com/hosting/">Get your free access token</a>
+          </div>
+      : null}
       {this.renderLatestGist()}
     </div>
   }
@@ -117,6 +187,7 @@ function stripAccessTokens(mapStyle) {
 class ExportModal extends React.Component {
   static propTypes = {
     mapStyle: React.PropTypes.object.isRequired,
+    onStyleChanged: React.PropTypes.func.isRequired,
     isOpen: React.PropTypes.bool.isRequired,
     onOpenToggle: React.PropTypes.func.isRequired,
   }
@@ -150,7 +221,7 @@ class ExportModal extends React.Component {
 
       <div className="maputnik-modal-section">
         <h4>Save style</h4>
-        <Gist mapStyle={this.props.mapStyle} />
+        <Gist mapStyle={this.props.mapStyle} onStyleChanged={this.props.onStyleChanged}/>
       </div>
     </Modal>
   }

src/config/fontstacks.json

@@ -1,35 +0,0 @@
-[
-    "Metropolis Black Italic",
-    "Metropolis Black",
-    "Metropolis Bold Italic",
-    "Metropolis Bold",
-    "Metropolis Extra Bold Italic",
-    "Metropolis Extra Bold",
-    "Metropolis Extra Light Italic",
-    "Metropolis Extra Light",
-    "Metropolis Light Italic",
-    "Metropolis Light",
-    "Metropolis Medium Italic",
-    "Metropolis Medium",
-    "Metropolis Regular Italic",
-    "Metropolis Regular",
-    "Metropolis Semi Bold Italic",
-    "Metropolis Semi Bold",
-    "Metropolis Thin Italic",
-    "Metropolis Thin",
-    "Open Sans Bold Italic",
-    "Open Sans Bold",
-    "Open Sans Extra Bold Italic",
-    "Open Sans Extra Bold",
-    "Open Sans Italic",
-    "Open Sans Light Italic",
-    "Open Sans Light",
-    "Open Sans Regular",
-    "Open Sans Semibold Italic",
-    "Open Sans Semibold",
-    "Klokantech Noto Sans Bold",
-    "Klokantech Noto Sans CJK Bold",
-    "Klokantech Noto Sans CJK Regular",
-    "Klokantech Noto Sans Italic",
-    "Klokantech Noto Sans Regular"
-]

src/config/styles.json

@@ -2,25 +2,25 @@
   {
     "id": "klokantech-basic",
     "title": "Klokantech Basic",
-    "url": "https://rawgit.com/openmaptiles/klokantech-basic-gl-style/gh-pages/style-cdn.json",
+    "url": "https://rawgit.com/openmaptiles/klokantech-basic-gl-style/master/style.json",
     "thumbnail": "http://maputnik.com/thumbnails/klokantech-basic.png"
   },
   {
     "id": "dark-matter",
     "title": "Dark Matter",
-    "url": "https://rawgit.com/openmaptiles/dark-matter-gl-style/gh-pages/style-cdn.json",
+    "url": "https://rawgit.com/openmaptiles/dark-matter-gl-style/master/style.json",
     "thumbnail": "http://maputnik.com/thumbnails/dark-matter.png"
   },
   {
     "id": "positron",
     "title": "Positron",
-    "url": "https://rawgit.com/openmaptiles/positron-gl-style/gh-pages/style-cdn.json",
+    "url": "https://rawgit.com/openmaptiles/positron-gl-style/master/style.json",
     "thumbnail": "http://maputnik.com/thumbnails/positron.png"
   },
   {
     "id": "osm-bright",
     "title": "OSM Bright",
-    "url": "https://rawgit.com/openmaptiles/osm-bright-gl-style/gh-pages/style-cdn.json",
+    "url": "https://rawgit.com/openmaptiles/osm-bright-gl-style/master/style.json",
     "thumbnail": "http://maputnik.com/thumbnails/osm-bright.png"
   },
   {

src/config/tilesets.json

@@ -6,7 +6,7 @@
   },
   "openmaptiles": {
     "type": "vector",
-    "url": "https://free.tilehosting.com/data/v3.json?key=25ItXg7aI5wurYDtttD",
+    "url": "https://free.tilehosting.com/data/v3.json?key={key}",
     "title": "OpenMapTiles"
   },
   "tilezen": {

src/libs/highlight.js

@@ -1,6 +1,3 @@
-import randomColor from 'randomcolor'
-import Color from 'color'
-
 import stylegen from 'mapbox-gl-inspect/lib/stylegen'
 import colors from 'mapbox-gl-inspect/lib/colors'
 
@@ -8,6 +5,12 @@ export function colorHighlightedLayer(layer) {
   if(!layer || layer.type === 'background' || layer.type === 'raster') return null
 
   function changeLayer(l) {
+    if(l.type === 'circle') {
+      l.paint['circle-radius'] = 3
+    } else if(l.type === 'line') {
+      l.paint['line-width'] = 2
+    }
+
     if(layer.filter) {
       l.filter = layer.filter
     } else {
@@ -17,7 +20,8 @@ export function colorHighlightedLayer(layer) {
     return l
   }
 
-  const color = colors.brightColor(layer.id, 1)
+  const sourceLayerId = layer['source-layer'] || ''
+  const color = colors.brightColor(sourceLayerId, 1)
   const layers = []
 
   if(layer.type === "fill" || layer.type === 'fill-extrusion') {

src/libs/metadata.js

@@ -21,7 +21,12 @@ function loadJSON(url, defaultValue, cb) {
 
 export function downloadGlyphsMetadata(urlTemplate, cb) {
   if(!urlTemplate) return cb([])
-  const url = urlTemplate.replace('{fontstack}/{range}.pbf', 'fontstacks.json')
+
+  // Special handling because Tileserver GL serves the fontstacks metadata differently
+  // https://github.com/klokantech/tileserver-gl/pull/104
+  let url = urlTemplate.replace('/fonts/{fontstack}/{range}.pbf', '/fontstacks.json')
+  url = url.replace('{fontstack}/{range}.pbf', 'fontstacks.json')
+
   loadJSON(url, [], cb)
 }
 

src/styles/_base.scss

@@ -72,3 +72,7 @@ label:hover {
     clear: both;
   }
 }
+
+a {
+  color: white;
+}

src/styles/_export.scss

@@ -0,0 +1,5 @@
+.maputnik-export-gist {
+  label.maputnik-checkbox-wrapper {
+    display: inline-block;
+  }
+}

src/styles/_layer.scss

@@ -132,5 +132,35 @@
 
 // PROPERTY
 .maputnik-default-property {
-  opacity: 0.4;
+  .maputnik-input-block-label {
+    color: darken($color-lowgray, 25%);
+  }
+
+  .maputnik-string,
+  .maputnik-number,
+  .maputnik-color,
+  .maputnik-select,
+  .maputnik-checkbox-wrapper {
+    background-color: darken($color-gray, 2%);
+    color: darken($color-lowgray, 25%);
+  }
+
+  .maputnik-make-zoom-function svg {
+    opacity: 0.4;
+  }
+
+  .maputnik-multibutton .maputnik-button {
+    background-color: darken($color-midgray, 10%);
+    color: darken($color-lowgray, 25%);
+
+    &:hover {
+      background-color: lighten($color-midgray, 12);
+      color: $color-white;
+    }
+  }
+
+  .maputnik-multibutton .maputnik-button-selected {
+    background-color: darken($color-midgray, 2%);
+    color: $color-lowgray;
+  }
 }

src/styles/_modal.scss

@@ -181,3 +181,21 @@
   margin-right: $margin-3;
   float: right;
 }
+
+//EXPORT MODAL
+.maputnik-export-gist {
+  font-size: $font-size-6;
+
+  .maputnik-input-block {
+    margin-left: 0;
+    margin-right: 0;
+
+    label {
+      vertical-align: middle;
+    }
+  }
+
+  span {
+    color: $color-lowgray;
+  }
+}

src/styles/index.scss

@@ -27,6 +27,7 @@ $toolbar-height: 40px;
 @import 'picker';
 @import 'toolbar';
 @import 'modal';
+@import 'export';
 @import 'layout';
 @import 'layer';
 @import 'input';

webpack.production.config.js

@@ -14,7 +14,6 @@ module.exports = {
         'mapbox-gl/dist/mapbox-gl.js',
         //TODO: Build failure because cannot resolve migrations file
         //"mapbox-gl-style-spec",
-        "randomcolor",
         "lodash.clonedeep",
         "lodash.throttle",
         'color',