diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx index 310ed13..a8c0ce5 100644 --- a/src/components/layers/JSONEditor.jsx +++ b/src/components/layers/JSONEditor.jsx @@ -19,6 +19,7 @@ import '../../vendor/codemirror/addon/lint/json-lint' class JSONEditor extends React.Component { static propTypes = { layer: PropTypes.object.isRequired, + maxHeight: PropTypes.number, onChange: PropTypes.func, } @@ -115,9 +116,15 @@ class JSONEditor extends React.Component { scrollbarStyle: "null", } + const style = {}; + if (this.props.maxHeight) { + style.maxHeight = this.props.maxHeight; + } + return
this._el = el} + style={style} /> } } diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx index eee6c85..2d5c8ba 100644 --- a/src/components/modals/SourcesModal.jsx +++ b/src/components/modals/SourcesModal.jsx @@ -52,7 +52,14 @@ function editorMode(source) { if(source.tiles) return 'tilexyz_vector' return 'tilejson_vector' } - if(source.type === 'geojson') return 'geojson' + if(source.type === 'geojson') { + if (typeof(source.data) === "string") { + return 'geojson_url'; + } + else { + return 'geojson_json'; + } + } return null } @@ -106,9 +113,13 @@ class AddSource extends React.Component { defaultSource(mode) { const source = (this.state || {}).source || {} switch(mode) { - case 'geojson': return { + case 'geojson_url': return { type: 'geojson', - data: source.data || 'http://localhost:3000/geojson.json' + data: 'http://localhost:3000/geojson.json' + } + case 'geojson_json': return { + type: 'geojson', + data: {} } case 'tilejson_vector': return { type: 'vector', @@ -155,7 +166,8 @@ class AddSource extends React.Component { + return this.props.onChange({ @@ -105,6 +106,28 @@ class GeoJSONSourceEditor extends React.Component { } } +class GeoJSONSourceJSONEditor extends React.Component { + static propTypes = { + source: PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, + } + + render() { + return + { + this.props.onChange({ + ...this.props.source, + data, + }) + }} + /> + + } +} + class SourceTypeEditor extends React.Component { static propTypes = { mode: PropTypes.string.isRequired, @@ -118,7 +141,8 @@ class SourceTypeEditor extends React.Component { onChange: this.props.onChange, } switch(this.props.mode) { - case 'geojson': return + case 'geojson_url': return + case 'geojson_json': return case 'tilejson_vector': return case 'tilexyz_vector': return case 'tilejson_raster': return diff --git a/src/styles/_codemirror.scss b/src/styles/_codemirror.scss index 85d7aa8..14cb415 100644 --- a/src/styles/_codemirror.scss +++ b/src/styles/_codemirror.scss @@ -1,3 +1,9 @@ +.CodeMirror-lint-tooltip { + z-index: 2000 !important; +} + .codemirror-container { max-width: 100%; + position: relative; + overflow: auto; } diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index d4f11f1..2f6b1b7 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -180,10 +180,26 @@ border-width: 2px; border-style: solid; padding: $margin-2; + + .maputnik-input-block-label { + width: 30%; + } + + .maputnik-input-block-content { + width: 70%; + } } .maputnik-add-source { @extend .clearfix; + + .maputnik-input-block-label { + width: 30%; + } + + .maputnik-input-block-content { + width: 70%; + } } .maputnik-add-source-button { diff --git a/src/styles/index.scss b/src/styles/index.scss index bfef57f..49af915 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -37,8 +37,8 @@ $toolbar-offset: 0; @import 'zoomproperty'; @import 'popup'; @import 'map'; -@import 'react-collapse'; @import 'codemirror'; +@import 'react-collapse'; /** * Hacks for webdriverio isVisibleWithinViewport