From 19e82e5890ba25368fbcf2fef2adb41ea41ed522 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sat, 19 Oct 2019 13:11:29 +0100
Subject: [PATCH 1/5] Added support for raw GeoJSON

---
 src/components/modals/SourcesModal.jsx      | 18 ++++++++++---
 src/components/sources/SourceTypeEditor.jsx | 29 ++++++++++++++++++---
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx
index eee6c859..06f0aebd 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,10 +113,14 @@ 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'
       }
+      case 'geojson_json': return {
+        type: 'geojson',
+        data: source.data || {}
+      }
       case 'tilejson_vector': return {
         type: 'vector',
         url: source.url || 'http://localhost:3000/tilejson.json'
@@ -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)'],
diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx
index 7a9c3237..5c4c2ec2 100644
--- a/src/components/sources/SourceTypeEditor.jsx
+++ b/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,27 @@ 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}
+        onChange={data => {
+          this.props.onChange({
+            ...this.props.source,
+            data,
+          })
+        }}
+      />
+    </InputBlock>
+  }
+}
+
 class SourceTypeEditor extends React.Component {
   static propTypes = {
     mode: PropTypes.string.isRequired,
@@ -118,7 +140,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} />

From 9ac908948d92ae021c975684e970fd1376ef241c Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sat, 19 Oct 2019 13:12:09 +0100
Subject: [PATCH 2/5] Changed label/content styling for input blocks.

---
 src/styles/_modal.scss | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index d4f11f19..2f6b1b7d 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 {

From ee525631fa6596b91e8afd5c9af4e1d4bdcf16b1 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 20 Oct 2019 11:09:20 +0100
Subject: [PATCH 3/5] Fixes for codemirror in sources modal

 - Allows for max height
 - Override GeoJSON data when changing type
---
 src/components/layers/JSONEditor.jsx        | 19 +++++++++++++------
 src/components/modals/SourcesModal.jsx      |  4 ++--
 src/components/sources/SourceTypeEditor.jsx |  1 +
 src/styles/_codemirror.scss                 |  8 ++++++++
 src/styles/index.scss                       |  1 +
 5 files changed, 25 insertions(+), 8 deletions(-)
 create mode 100644 src/styles/_codemirror.scss

diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx
index 2f01b824..5621459f 100644
--- a/src/components/layers/JSONEditor.jsx
+++ b/src/components/layers/JSONEditor.jsx
@@ -69,12 +69,19 @@ class JSONEditor extends React.Component {
       scrollbarStyle: "null",
     }
 
-    return <CodeMirror
-      value={this.state.code}
-      onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
-      onFocusChange={focused => focused ? true : this.resetValue()}
-      options={codeMirrorOptions}
-    />
+    const style = {};
+    if (this.props.maxHeight) {
+      style.maxHeight = this.props.maxHeight;
+    }
+
+    return <div className="CodeMirror-wrapper" style={style}>
+      <CodeMirror
+        value={this.state.code}
+        onBeforeChange={(editor, data, value) => this.onCodeUpdate(value)}
+        onFocusChange={focused => focused ? true : this.resetValue()}
+        options={codeMirrorOptions}
+      />
+    </div>
   }
 }
 
diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx
index 06f0aebd..2d5c8ba7 100644
--- a/src/components/modals/SourcesModal.jsx
+++ b/src/components/modals/SourcesModal.jsx
@@ -115,11 +115,11 @@ class AddSource extends React.Component {
     switch(mode) {
       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: source.data || {}
+        data: {}
       }
       case 'tilejson_vector': return {
         type: 'vector',
diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx
index 5c4c2ec2..83672e19 100644
--- a/src/components/sources/SourceTypeEditor.jsx
+++ b/src/components/sources/SourceTypeEditor.jsx
@@ -116,6 +116,7 @@ class GeoJSONSourceJSONEditor extends React.Component {
     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,
diff --git a/src/styles/_codemirror.scss b/src/styles/_codemirror.scss
new file mode 100644
index 00000000..d2956c9d
--- /dev/null
+++ b/src/styles/_codemirror.scss
@@ -0,0 +1,8 @@
+.CodeMirror-lint-tooltip {
+  z-index: 2000 !important;
+}
+
+.CodeMirror-wrapper {
+  position: relative;
+  overflow: auto;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b27341de..abdca0d2 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -37,6 +37,7 @@ $toolbar-offset: 0;
 @import 'zoomproperty';
 @import 'popup';
 @import 'map';
+@import 'codemirror';
 @import 'react-collapse';
 @import 'react-codemirror';
 

From 72b6dd1ae99bfd0d86a7569da165de35987096c7 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 20 Oct 2019 11:12:54 +0100
Subject: [PATCH 4/5] Fix lint errors.

---
 src/components/layers/JSONEditor.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx
index 5621459f..34a2fb6c 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,
   }
 

From 0fa4d40e92df42f4d38b3ee5bcaedced9c387b3d Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 20 Oct 2019 11:21:38 +0100
Subject: [PATCH 5/5] Remove duplicate import rule.

---
 src/styles/index.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 287bc879..49af9156 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -39,7 +39,6 @@ $toolbar-offset: 0;
 @import 'map';
 @import 'codemirror';
 @import 'react-collapse';
-@import 'codemirror';
 
 /**
  * Hacks for webdriverio isVisibleWithinViewport