schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-11-10 12:17:46 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Restrict data function types, reorder buttons

Browse source 
Checking the Mapbox style spec properties to see whether or not
exponential should be allowed as the property type, defaulting to
categorical which appears to work for either type. Also re-orders zoom
and data function buttons, aligning zoom right if data not supplied.
This commit is contained in:
pjsier 2017-10-10 10:30:06 -05:00
parent 1d29f67065
commit 148f64c261
2 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/components/fields/ZoomSpecField.jsx
View file

@ -47,7 +47,7 @@ export default class ZoomSpecProperty extends React.Component {
const lastStop = stops[stops.length - 1] const lastStop = stops[stops.length - 1]
if (typeof lastStop[0] === "object") { if (typeof lastStop[0] === "object") {
stops.push([ stops.push([
{zoom: lastStop[0].zoom, value: lastStop[0].value}, {zoom: lastStop[0].zoom + 1, value: lastStop[0].value},
lastStop[1] lastStop[1]
]) ])
} }
@ -89,10 +89,19 @@ export default class ZoomSpecProperty extends React.Component {
this.props.onChange(this.props.fieldName, zoomFunc) this.props.onChange(this.props.fieldName, zoomFunc)
} }
getDataFunctionTypes(functionType) {
if (functionType === "interpolated") {
return ["categorical", "interval", "exponential"]
}
else {
return ["categorical", "interval"]
}
}
makeDataFunction() { makeDataFunction() {
const dataFunc = { const dataFunc = {
property: "", property: "",
type: "exponential", type: "categorical",
stops: [ stops: [
[{zoom: 6, value: 0}, this.props.value], [{zoom: 6, value: 0}, this.props.value],
[{zoom: 10, value: 0}, this.props.value] [{zoom: 10, value: 0}, this.props.value]
@ -180,13 +189,13 @@ export default class ZoomSpecProperty extends React.Component {
<div className="maputnik-data-spec-property-group"> <div className="maputnik-data-spec-property-group">
<DocLabel <DocLabel
label="Type" label="Type"
doc={"Select a type of data scale (default is 'exponential')."} doc={"Select a type of data scale (default is 'categorical')."}
/> />
<div className="maputnik-data-spec-property-input"> <div className="maputnik-data-spec-property-input">
<SelectInput <SelectInput
value={this.props.value.type || "exponential"} value={this.props.value.type}
onChange={propVal => this.changeDataProperty("type", propVal)} onChange={propVal => this.changeDataProperty("type", propVal)}
options={["exponential", "interval", "categorical", "identity"]} options={this.getDataFunctionTypes(this.props.fieldSpec.function)}
/> />
</div> </div>
</div> </div>
@ -307,7 +316,7 @@ function MakeFunctionButtons(props) {
/> />
</Button> </Button>
if (props.fieldSpec['property-function']) { if (props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(props.fieldSpec['function']) !== -1) {
makeDataButton = <Button makeDataButton = <Button
className="maputnik-make-data-function" className="maputnik-make-data-function"
onClick={props.onDataClick} onClick={props.onDataClick}
@ -319,7 +328,7 @@ function MakeFunctionButtons(props) {
/> />
</Button> </Button>
} }
return <div>{makeZoomButton}{makeDataButton}</div> return <div>{makeDataButton}{makeZoomButton}</div>
} }
else { else {
return null return null

5
src/styles/_components.scss
View file

@ -40,6 +40,7 @@
.maputnik-doc-target:hover .maputnik-doc-popup { .maputnik-doc-target:hover .maputnik-doc-popup {
display: block; display: block;
text-align: left;
} }
// BUTTON // BUTTON
@ -112,6 +113,10 @@
display: inline-block; display: inline-block;
width: 15%; width: 15%;
} }
.maputnik-input-block-action > div {
text-align: right;
}
} }
// SPACE HELPER // SPACE HELPER