Merge remote-tracking branch 'upstream/master' into feature/ol-experimental-support

src/components/Button.jsx

@@ -9,12 +9,14 @@ class Button extends React.Component {
     onClick: PropTypes.func,
     style: PropTypes.object,
     className: PropTypes.string,
-    children: PropTypes.node
+    children: PropTypes.node,
+    disabled: PropTypes.bool,
   }
 
   render() {
     return <button
       onClick={this.props.onClick}
+      disabled={this.props.disabled}
       aria-label={this.props["aria-label"]}
       className={classnames("maputnik-button", this.props.className)}
       data-wd-key={this.props["data-wd-key"]}

src/components/Toolbar.jsx

@@ -124,7 +124,8 @@ export default class Toolbar extends React.Component {
             className="maputnik-toolbar-logo"
           >
             <img src={logoImage} alt="Maputnik" />
-            <h1>Maputnik
+            <h1>
+              <span className="maputnik-toolbar-name">{pkgJson.name}</span>
               <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
             </h1>
           </a>

src/components/fields/FunctionSpecField.jsx

@@ -32,6 +32,16 @@ export default class FunctionSpecProperty  extends React.Component {
     ]),
   }
 
+  getFieldFunctionType(fieldSpec) {
+    if (fieldSpec.expression.interpolated) {
+      return "exponential"
+    }
+    if (fieldSpec.type === "number") {
+      return "interval"
+    }
+    return "categorical"
+  }
+
   addStop = () => {
     const stops = this.props.value.stops.slice(0)
     const lastStop = stops[stops.length - 1]
@@ -80,12 +90,14 @@ export default class FunctionSpecProperty  extends React.Component {
   }
 
   makeDataFunction = () => {
+    const functionType = this.getFieldFunctionType(this.props.fieldSpec);
+    const stopValue = functionType === 'categorical' ? '' : 0;
     const dataFunc = {
       property: "",
-      type: "categorical",
+      type: functionType,
       stops: [
-        [{zoom: 6, value: 0}, this.props.value],
+        [{zoom: 6, value: stopValue}, this.props.value || stopValue],
-        [{zoom: 10, value: 0}, this.props.value]
+        [{zoom: 10, value: stopValue}, this.props.value || stopValue]
       ]
     }
     this.props.onChange(this.props.fieldName, dataFunc)

src/components/fields/_DataProperty.jsx

@@ -30,7 +30,7 @@ export default class DataProperty extends React.Component {
   }
 
   getFieldFunctionType(fieldSpec) {
-    if (fieldSpec.function === "interpolated") {
+    if (fieldSpec.expression.interpolated) {
       return "exponential"
     }
     if (fieldSpec.type === "number") {
@@ -39,8 +39,8 @@ export default class DataProperty extends React.Component {
     return "categorical"
   }
 
-  getDataFunctionTypes(functionType) {
+  getDataFunctionTypes(fieldSpec) {
-    if (functionType === "interpolated") {
+    if (fieldSpec.expression.interpolated) {
       return ["categorical", "interval", "exponential"]
     }
     else {
@@ -150,7 +150,7 @@ export default class DataProperty extends React.Component {
             <SelectInput
               value={this.props.value.type}
               onChange={propVal => this.changeDataProperty("type", propVal)}
-              options={this.getDataFunctionTypes(this.props.fieldSpec.function)}
+              options={this.getDataFunctionTypes(this.props.fieldSpec)}
             />
           </div>
         </div>

src/components/fields/_FunctionButtons.jsx

@@ -28,7 +28,7 @@ export default class FunctionButtons extends React.Component {
         />
       </Button>
 
-      if (this.props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(this.props.fieldSpec['function']) !== -1) {
+      if (this.props.fieldSpec['property-type'] === 'data-driven') {
         makeDataButton = <Button
           className="maputnik-make-data-function"
           onClick={this.props.onDataClick}

src/components/layers/Collapse.jsx

@@ -10,6 +10,10 @@ export default class CollapseAlt extends React.Component {
     children: PropTypes.element.isRequired
   }
 
+  static defaultProps = {
+    isActive: true
+  }
+
   render() {
     if (accessibility.reducedMotionEnabled()) {
       return (

src/components/layers/LayerListItem.jsx

@@ -31,7 +31,9 @@ class IconAction extends React.Component {
   static propTypes = {
     action: PropTypes.string.isRequired,
     onClick: PropTypes.func.isRequired,
-    wdKey: PropTypes.string
+    wdKey: PropTypes.string,
+    classBlockName: PropTypes.string,
+    classBlockModifier: PropTypes.string,
   }
 
   renderIcon() {
@@ -44,10 +46,21 @@ class IconAction extends React.Component {
   }
 
   render() {
+    const {classBlockName, classBlockModifier} = this.props;
+
+    let classAdditions = '';
+    if (classBlockName) {
+      classAdditions = `maputnik-layer-list-icon-action__${classBlockName}`;
+
+      if (classBlockModifier) {
+        classAdditions += ` maputnik-layer-list-icon-action__${classBlockName}--${classBlockModifier}`;
+      }
+    }
+
     return <button
       tabIndex="-1"
       title={this.props.action}
-      className="maputnik-layer-list-icon-action"
+      className={`maputnik-layer-list-icon-action ${classAdditions}`}
       data-wd-key={this.props.wdKey}
       onClick={this.props.onClick}
     >
@@ -90,6 +103,8 @@ class LayerListItem extends React.Component {
   }
 
   render() {
+    const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
+
     return <li
       key={this.props.layerId}
       onClick={e => this.props.onLayerSelect(this.props.layerId)}
@@ -105,16 +120,20 @@ class LayerListItem extends React.Component {
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":delete"}
           action={'delete'}
+          classBlockName="delete"
           onClick={e => this.props.onLayerDestroy(this.props.layerId)}
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":copy"}
           action={'duplicate'}
+          classBlockName="duplicate"
           onClick={e => this.props.onLayerCopy(this.props.layerId)}
         />
         <IconAction
           wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
-          action={this.props.visibility === 'visible' ? 'show' : 'hide'}
+          action={visibilityAction}
+          classBlockName="visibility"
+          classBlockModifier={visibilityAction}
           onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
         />
     </li>

src/components/modals/OpenModal.jsx

@@ -51,7 +51,9 @@ class OpenModal extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      styleUrl: ""
+    };
   }
 
   clearError() {
@@ -102,6 +104,7 @@ class OpenModal extends React.Component {
     })
     .catch((err) => {
       this.setState({
+        error: `Failed to load: '${styleUrl}'`,
         activeRequest: null,
         activeRequestUrl: null
       });
@@ -150,10 +153,19 @@ class OpenModal extends React.Component {
   }
 
   onOpenToggle() {
+    this.setState({
+      styleUrl: ""
+    });
     this.clearError();
     this.props.onOpenToggle();
   }
 
+  onChangeUrl = () => {
+    this.setState({
+      styleUrl: this.styleUrlElement.value
+    });
+  }
+
   render() {
     const styleOptions = publicStyles.map(style => {
       return <PublicStyle
@@ -197,9 +209,22 @@ class OpenModal extends React.Component {
             <p>
               Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
             </p>
-            <input data-wd-key="open-modal.url.input" type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
+            <input
+              data-wd-key="open-modal.url.input"
+              type="text"
+              ref={(input) => this.styleUrlElement = input}
+              className="maputnik-input"
+              placeholder="Enter URL..."
+              value={this.state.styleUrl}
+              onChange={this.onChangeUrl}
+            />
             <div>
-              <Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl}>Open URL</Button>
+              <Button
+                data-wd-key="open-modal.url.button"
+                className="maputnik-big-button"
+                onClick={this.onOpenUrl}
+                disabled={this.state.styleUrl.length < 1}
+              >Open URL</Button>
             </div>
           </section>
 

src/config/styles.json

@@ -34,5 +34,29 @@
     "title": "Empty Style",
     "url": "https://rawgit.com/maputnik/editor/master/src/config/empty-style.json",
     "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
+  },
+  {
+    "id": "os-zoomstack-outdoor",
+    "title": "Zoomstack Outdoor",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-outdoor/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-outdoor.png"
+  },
+  {
+    "id": "os-zoomstack-road",
+    "title": "Zoomstack Road",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-road/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-road.png"
+  },
+  {
+    "id": "os-zoomstack-light",
+    "title": "Zoomstack Light",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-light/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-light.png"
+  },
+  {
+    "id": "os-zoomstack-night",
+    "title": "Zoomstack Night",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-night/style.json",
+    "thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-night.png"
   }
 ]

src/config/tilesets.json

@@ -1,7 +1,7 @@
 {
   "openmaptiles": {
     "type": "vector",
-    "url": "https://free.tilehosting.com/data/v3.json?key={key}",
+    "url": "https://maps.tilehosting.com/data/v3.json?key={key}",
     "title": "OpenMapTiles"
   },
   "thunderforest_transport": {
@@ -13,5 +13,10 @@
     "type": "vector",
     "url": "https://tile.thunderforest.com/thunderforest.outdoors-v1.json?apikey={key}",
     "title": "Thunderforest Outdoors (heavy)"
+  },
+  "open_zoomstack": {
+    "type": "vector",
+    "url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/data/vector/open-zoomstack/config.json",
+    "title": "OS Open Zoomstack"
   }
 }

src/styles/_components.scss

@@ -77,6 +77,12 @@
     background-color: lighten($color-midgray, 12);
     color: $color-white;
   }
+
+  &:disabled {
+    background-color: darken($color-midgray, 5);
+    color: $color-midgray;
+    cursor: not-allowed;
+  }
 }
 
 .maputnik-big-button {

src/styles/_layer.scss

@@ -58,22 +58,33 @@
     }
   }
 
+  .maputnik-layer-list-icon-action {
+    background: initial;
+    border: none;
+    padding: 0 2px;
+
+    svg {
+      fill: darken($color-lowgray, 20);
+
+      &:hover {
+        fill: $color-white;
+      }
+    }
+  }
+
+  .maputnik-layer-list-icon-action__visibility--hide {
+    display: block;
+  }
+
   .maputnik-layer-list-item:hover,
   .maputnik-layer-list-item-selected {
     background-color: lighten($color-black, 2);
 
     .maputnik-layer-list-icon-action {
       display: block;
-      background: initial;
-      border: none;
-      padding: 0 2px;
-    }
 
-    .maputnik-layer-list-icon-action svg {
+      svg {
-      fill: darken($color-lowgray, 0.5);
+        fill: darken($color-lowgray, 0.5);
-
-      &:hover {
-        fill: $color-white;
       }
     }
   }

src/styles/_toolbar.scss

@@ -80,6 +80,10 @@
   }
 }
 
+.maputnik-toolbar-name {
+  text-transform: capitalize;
+}
+
 .maputnik-toolbar-version {
   font-size: 10px;
   margin-left: 4px;