-
-
+
+
+ {/* Keyboard accessible quick links */}
+
+ Layers list
+
+
+
+
+ 
+
+ {pkgJson.name}
+ v{pkgJson.version}
+
+
-
- );
+
+
+
+ Open
+
+
+
+ Export
+
+
+
+ Data Sources
+
+
+
+ Style Settings
+
+
+
+
+
+
+
+
+
+ Help
+
+
+
+ Take the Maputnik Survey
+
+
+
+
}
}
diff --git a/src/components/LayerEditor.jsx b/src/components/LayerEditor.jsx
index 5b0ce5b5..075681ff 100644
--- a/src/components/LayerEditor.jsx
+++ b/src/components/LayerEditor.jsx
@@ -1,46 +1,47 @@
-import PropTypes from "prop-types";
-import React from "react";
-import { Button, Menu, MenuItem, Wrapper } from "react-aria-menubutton";
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Wrapper, Button, Menu, MenuItem } from 'react-aria-menubutton'
-import { Accordion } from "react-accessible-accordion";
-import FieldComment from "./FieldComment";
-import FieldId from "./FieldId";
-import FieldJson from "./FieldJson";
-import FieldMaxZoom from "./FieldMaxZoom";
-import FieldMinZoom from "./FieldMinZoom";
-import FieldSource from "./FieldSource";
-import FieldSourceLayer from "./FieldSourceLayer";
-import FieldType from "./FieldType";
-import FilterEditor from "./FilterEditor";
-import LayerEditorGroup from "./LayerEditorGroup";
-import PropertyGroup from "./PropertyGroup";
+import FieldJson from './FieldJson'
+import FilterEditor from './FilterEditor'
+import PropertyGroup from './PropertyGroup'
+import LayerEditorGroup from './LayerEditorGroup'
+import FieldType from './FieldType'
+import FieldId from './FieldId'
+import FieldMinZoom from './FieldMinZoom'
+import FieldMaxZoom from './FieldMaxZoom'
+import FieldComment from './FieldComment'
+import FieldSource from './FieldSource'
+import FieldSourceLayer from './FieldSourceLayer'
+import {Accordion} from 'react-accessible-accordion';
-import { MdMoreVert } from "react-icons/md";
+import {MdMoreVert} from 'react-icons/md'
-import layout from "../config/layout.json";
-import { changeProperty, changeType } from "../libs/layer";
-import { formatLayerId } from "../util/format";
+import { changeType, changeProperty } from '../libs/layer'
+import layout from '../config/layout.json'
+import {formatLayerId} from '../util/format';
-function getLayoutForType(type) {
+
+function getLayoutForType (type) {
return layout[type] ? layout[type] : layout.invalid;
}
function layoutGroups(layerType) {
const layerGroup = {
- title: "Layer",
- type: "layer",
- };
+ title: 'Layer',
+ type: 'layer'
+ }
const filterGroup = {
- title: "Filter",
- type: "filter",
- };
+ title: 'Filter',
+ type: 'filter'
+ }
const editorGroup = {
- title: "JSON Editor",
- type: "jsoneditor",
- };
+ title: 'JSON Editor',
+ type: 'jsoneditor'
+ }
return [layerGroup, filterGroup]
.concat(getLayoutForType(layerType).groups)
- .concat([editorGroup]);
+ .concat([editorGroup])
}
/** Layer editor supporting multiple types of layers. */
@@ -60,320 +61,277 @@ export default class LayerEditor extends React.Component {
isLastLayer: PropTypes.bool,
layerIndex: PropTypes.number,
errors: PropTypes.array,
- };
+ }
static defaultProps = {
onLayerChanged: () => {},
onLayerIdChange: () => {},
onLayerDestroyed: () => {},
- };
+ }
static childContextTypes = {
- reactIconBase: PropTypes.object,
- };
+ reactIconBase: PropTypes.object
+ }
constructor(props) {
- super(props);
+ super(props)
//TODO: Clean this up and refactor into function
- const editorGroups = {};
- layoutGroups(this.props.layer.type).forEach((group) => {
- editorGroups[group.title] = true;
- });
+ const editorGroups = {}
+ layoutGroups(this.props.layer.type).forEach(group => {
+ editorGroups[group.title] = true
+ })
- this.state = { editorGroups };
+ this.state = { editorGroups }
}
static getDerivedStateFromProps(props, state) {
- const additionalGroups = { ...state.editorGroups };
+ const additionalGroups = { ...state.editorGroups }
- getLayoutForType(props.layer.type).groups.forEach((group) => {
- if (!(group.title in additionalGroups)) {
- additionalGroups[group.title] = true;
+ getLayoutForType(props.layer.type).groups.forEach(group => {
+ if(!(group.title in additionalGroups)) {
+ additionalGroups[group.title] = true
}
- });
+ })
return {
- editorGroups: additionalGroups,
+ editorGroups: additionalGroups
};
}
- getChildContext() {
+ getChildContext () {
return {
reactIconBase: {
size: 14,
- color: "#8e8e8e",
- },
- };
+ color: '#8e8e8e',
+ }
+ }
}
changeProperty(group, property, newValue) {
this.props.onLayerChanged(
this.props.layerIndex,
changeProperty(this.props.layer, group, property, newValue)
- );
+ )
}
onGroupToggle(groupTitle, active) {
const changedActiveGroups = {
...this.state.editorGroups,
[groupTitle]: active,
- };
+ }
this.setState({
- editorGroups: changedActiveGroups,
- });
+ editorGroups: changedActiveGroups
+ })
}
renderGroupType(type, fields) {
- let comment = "";
- if (this.props.layer.metadata) {
- comment = this.props.layer.metadata["maputnik:comment"];
+ let comment = ""
+ if(this.props.layer.metadata) {
+ comment = this.props.layer.metadata['maputnik:comment']
}
- const { errors, layerIndex } = this.props;
+ const {errors, layerIndex} = this.props;
const errorData = {};
- errors.forEach((error) => {
+ errors.forEach(error => {
if (
error.parsed &&
error.parsed.type === "layer" &&
error.parsed.data.index == layerIndex
) {
errorData[error.parsed.data.key] = {
- message: error.parsed.data.message,
+ message: error.parsed.data.message
};
}
- });
+ })
let sourceLayerIds;
- if (this.props.sources.hasOwnProperty(this.props.layer.source)) {
+ if(this.props.sources.hasOwnProperty(this.props.layer.source)) {
sourceLayerIds = this.props.sources[this.props.layer.source].layers;
}
- switch (type) {
- case "layer":
- return (
-
-
- this.props.onLayerIdChange(
- this.props.layerIndex,
- this.props.layer.id,
- newId
- )
- }
- />
-
- this.props.onLayerChanged(
- this.props.layerIndex,
- changeType(this.props.layer, newType)
- )
- }
- />
- {this.props.layer.type !== "background" && (
- this.changeProperty(null, "source", v)}
- />
- )}
- {["background", "raster", "hillshade", "heatmap"].indexOf(
- this.props.layer.type
- ) < 0 && (
- this.changeProperty(null, "source-layer", v)}
- />
- )}
- this.changeProperty(null, "minzoom", v)}
- />
- this.changeProperty(null, "maxzoom", v)}
- />
-
- this.changeProperty(
- "metadata",
- "maputnik:comment",
- v == "" ? undefined : v
- )
- }
- />
-
- );
- case "filter":
- return (
-
-
- this.changeProperty(null, "filter", f)}
- />
-
-
- );
- case "properties":
- return (
-
+ this.props.onLayerIdChange(this.props.layerIndex, this.props.layer.id, newId)}
+ />
+ this.props.onLayerChanged(
+ this.props.layerIndex,
+ changeType(this.props.layer, newType)
+ )}
+ />
+ {this.props.layer.type !== 'background' && this.changeProperty(null, 'source', v)}
+ />
+ }
+ {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.props.layer.type) < 0 &&
+ this.changeProperty(null, 'source-layer', v)}
+ />
+ }
+ this.changeProperty(null, 'minzoom', v)}
+ />
+ this.changeProperty(null, 'maxzoom', v)}
+ />
+ this.changeProperty('metadata', 'maputnik:comment', v == "" ? undefined : v)}
+ />
+