Merge pull request #570 from orangemug/feature/issue-559-add-raw-geojson-as-source

Add support for raw GeoJSON as source

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 <div
       className="codemirror-container"
       ref={(el) => this._el = el}
+      style={style}
     />
   }
 }

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 {
       <InputBlock label={"Source Type"} doc={latest.source_vector.type.doc}>
         <SelectInput
           options={[
-            ['geojson', 'GeoJSON'],
+            ['geojson_json', 'GeoJSON (JSON)'],
+            ['geojson_url', 'GeoJSON (URL)'],
             ['tilejson_vector', 'Vector (TileJSON URL)'],
             ['tilexyz_vector', 'Vector (XYZ URLs)'],
             ['tilejson_raster', 'Raster (TileJSON URL)'],

src/components/sources/SourceTypeEditor.jsx

@@ -5,6 +5,7 @@ import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import NumberInput from '../inputs/NumberInput'
 import SelectInput from '../inputs/SelectInput'
+import JSONEditor from '../layers/JSONEditor'
 
 
 class TileJSONSourceEditor extends React.Component {
@@ -86,14 +87,14 @@ class TileURLSourceEditor extends React.Component {
   }
 }
 
-class GeoJSONSourceEditor extends React.Component {
+class GeoJSONSourceUrlEditor extends React.Component {
   static propTypes = {
     source: PropTypes.object.isRequired,
     onChange: PropTypes.func.isRequired,
   }
 
   render() {
-    return <InputBlock label={"GeoJSON Data"} doc={latest.source_geojson.data.doc}>
+    return <InputBlock label={"GeoJSON URL"} doc={latest.source_geojson.data.doc}>
       <StringInput
         value={this.props.source.data}
         onChange={data => 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 <InputBlock label={"GeoJSON"} doc={latest.source_geojson.data.doc}>
+      <JSONEditor
+        layer={this.props.source.data}
+        maxHeight={200}
+        onChange={data => {
+          this.props.onChange({
+            ...this.props.source,
+            data,
+          })
+        }}
+      />
+    </InputBlock>
+  }
+}
+
 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 <GeoJSONSourceEditor {...commonProps} />
+      case 'geojson_url': return <GeoJSONSourceUrlEditor {...commonProps} />
+      case 'geojson_json': return <GeoJSONSourceJSONEditor {...commonProps} />
       case 'tilejson_vector': return <TileJSONSourceEditor {...commonProps} />
       case 'tilexyz_vector': return <TileURLSourceEditor {...commonProps} />
       case 'tilejson_raster': return <TileJSONSourceEditor {...commonProps} />

src/styles/_codemirror.scss

@@ -1,3 +1,9 @@
+.CodeMirror-lint-tooltip {
+  z-index: 2000 !important;
+}
+
 .codemirror-container {
   max-width: 100%;
+  position: relative;
+  overflow: auto;
 }

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 {

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