schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2025-01-15 08:51:19 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Show hints in the source modal as well

Browse source
This commit is contained in:
Lukas Martinelli 2017-01-09 22:44:22 +01:00
parent a3caf8499c
commit d3276829b2
3 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/modals/SettingsModal.jsx
View file

@ -46,7 +46,7 @@ class SettingsModal extends React.Component {
onOpenToggle={this.props.onOpenToggle} onOpenToggle={this.props.onOpenToggle}
title={'Style Settings'} title={'Style Settings'}
> >
<InputBlock label={"Name"} doc={GlSpec['$root'].name.doc}> <InputBlock label={"Name"} doc={GlSpec.$root.name.doc}>
<StringInput {...inputProps} <StringInput {...inputProps}
value={this.props.mapStyle.name} value={this.props.mapStyle.name}
onChange={this.changeStyleProperty.bind(this, "name")} onChange={this.changeStyleProperty.bind(this, "name")}
@ -58,14 +58,14 @@ class SettingsModal extends React.Component {
onChange={this.changeStyleProperty.bind(this, "owner")} onChange={this.changeStyleProperty.bind(this, "owner")}
/> />
</InputBlock> </InputBlock>
<InputBlock label={"Sprite URL"} doc={GlSpec['$root'].sprite.doc}> <InputBlock label={"Sprite URL"} doc={GlSpec.$root.sprite.doc}>
<StringInput {...inputProps} <StringInput {...inputProps}
value={this.props.mapStyle.sprite} value={this.props.mapStyle.sprite}
onChange={this.changeStyleProperty.bind(this, "sprite")} onChange={this.changeStyleProperty.bind(this, "sprite")}
/> />
</InputBlock> </InputBlock>
<InputBlock label={"Glyphs URL"} doc={GlSpec['$root'].glyphs.doc}> <InputBlock label={"Glyphs URL"} doc={GlSpec.$root.glyphs.doc}>
<StringInput {...inputProps} <StringInput {...inputProps}
value={this.props.mapStyle.glyphs} value={this.props.mapStyle.glyphs}
onChange={this.changeStyleProperty.bind(this, "glyphs")} onChange={this.changeStyleProperty.bind(this, "glyphs")}

5
src/components/modals/SourcesModal.jsx
View file

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
import Modal from './Modal' import Modal from './Modal'
import Heading from '../Heading' import Heading from '../Heading'
import Button from '../Button' import Button from '../Button'
@ -163,13 +164,13 @@ class AddSource extends React.Component {
render() { render() {
return <div> return <div>
<InputBlock label={"Source ID"}> <InputBlock label={"Source ID"} doc={"Unique ID that identifies the source and is used in the layer to reference the source."}>
<StringInput <StringInput
value={this.state.sourceId} value={this.state.sourceId}
onChange={v => this.setState({ sourceId: v})} onChange={v => this.setState({ sourceId: v})}
/> />
</InputBlock> </InputBlock>
<InputBlock label={"Source Type"}> <InputBlock label={"Source Type"} doc={GlSpec.source_tile.type.doc}>
<SelectInput <SelectInput
options={[ options={[
['geojson', 'GeoJSON'], ['geojson', 'GeoJSON'],

11
src/components/sources/SourceTypeEditor.jsx
View file

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
import InputBlock from '../inputs/InputBlock' import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput' import StringInput from '../inputs/StringInput'
import NumberInput from '../inputs/NumberInput' import NumberInput from '../inputs/NumberInput'
@ -10,7 +11,7 @@ class TileJSONSourceEditor extends React.Component {
} }
render() { render() {
return <InputBlock label={"TileJSON URL"}> return <InputBlock label={"TileJSON URL"} doc={GlSpec.source_tile.url.doc}>
<StringInput <StringInput
value={this.props.source.url} value={this.props.source.url}
onChange={url => this.props.onChange({ onChange={url => this.props.onChange({
@ -32,7 +33,7 @@ class TileURLSourceEditor extends React.Component {
const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th'] const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th']
const tiles = this.props.source.tiles || [] const tiles = this.props.source.tiles || []
return tiles.map((tileUrl, tileIndex) => { return tiles.map((tileUrl, tileIndex) => {
return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"}> return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={GlSpec.source_tile.tiles.doc}>
<StringInput <StringInput
value={tileUrl} value={tileUrl}
/> />
@ -43,7 +44,7 @@ class TileURLSourceEditor extends React.Component {
render() { render() {
return <div> return <div>
{this.renderTileUrls()} {this.renderTileUrls()}
<InputBlock label={"Min Zoom"}> <InputBlock label={"Min Zoom"} doc={GlSpec.source_tile.minzoom.doc}>
<NumberInput <NumberInput
value={this.props.source.minZoom} value={this.props.source.minZoom}
onChange={minZoom => this.props.onChange({ onChange={minZoom => this.props.onChange({
@ -52,7 +53,7 @@ class TileURLSourceEditor extends React.Component {
})} })}
/> />
</InputBlock> </InputBlock>
<InputBlock label={"Max Zoom"}> <InputBlock label={"Max Zoom"} doc={GlSpec.source_tile.maxzoom.doc}>
<NumberInput <NumberInput
value={this.props.source.maxZoom} value={this.props.source.maxZoom}
onChange={maxZoom => this.props.onChange({ onChange={maxZoom => this.props.onChange({
@ -73,7 +74,7 @@ class GeoJSONSourceEditor extends React.Component {
} }
render() { render() {
return <InputBlock label={"GeoJSON Data"}> return <InputBlock label={"GeoJSON Data"} doc={GlSpec.source_geojson.data.doc}>
<StringInput <StringInput
value={this.props.source.data} value={this.props.source.data}
onChange={data => this.props.onChange({ onChange={data => this.props.onChange({