From df04064e819c921e0a4ca4f50df8e94f4e9e90bf Mon Sep 17 00:00:00 2001
From: Torben Barsballe <tbarsballe@boundlessgeo.com>
Date: Mon, 29 May 2017 13:15:25 -0700
Subject: [PATCH] Improved OpenLayers support

Added support for gejson sources
Fix toVectorLayer map callback (this was undefined)
Improved ol css; show map controls
---
 src/components/map/OpenLayers3Map.jsx | 37 +++++++++++++++++++--------
 src/styles/_map.scss                  | 22 ++++++++++++++++
 src/styles/index.scss                 |  1 +
 3 files changed, 49 insertions(+), 11 deletions(-)
 create mode 100644 src/styles/_map.scss

diff --git a/src/components/map/OpenLayers3Map.jsx b/src/components/map/OpenLayers3Map.jsx
index 28fa73a..650b90f 100644
--- a/src/components/map/OpenLayers3Map.jsx
+++ b/src/components/map/OpenLayers3Map.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import style from '../../libs/style.js'
 import isEqual from 'lodash.isequal'
 import { loadJSON } from '../../libs/urlopen'
+import 'openlayers/dist/ol.css'
 
 function suitableVectorSource(mapStyle) {
   const sources = Object.keys(mapStyle.sources)
@@ -11,7 +12,7 @@ function suitableVectorSource(mapStyle) {
         source: mapStyle.sources[sourceId]
       }
     })
-    .filter(({source}) => source.type === 'vector')
+    .filter(({source}) => (source.type === 'vector' || source.type === 'geojson'))
   return sources[0]
 }
 
@@ -28,12 +29,25 @@ function toVectorLayer(source, tilegrid, cb) {
     })
   }
 
-  if(!source.tiles) {
-    sourceFromTileJSON(source.url, tileSource => {
-      cb(newMVTLayer(tileSource.tiles[0]))
+  function newGeoJSONLayer(sourceUrl) {
+    const ol = require('openlayers')
+    return new ol.layer.Vector({
+      source: new ol.source.Vector({
+        format: new ol.format.GeoJSON(),
+        url: sourceUrl
+      })
     })
-  } else {
-    cb(newMVTLayer(source.tiles[0]))
+  }
+  if (source.type === 'vector') {
+    if(!source.tiles) {
+      sourceFromTileJSON(source.url, tileSource => {
+        cb(newMVTLayer(tileSource.tiles[0]))
+      })
+    } else {
+      cb(newMVTLayer(source.tiles[0]))
+    }
+  } else if (source.type === 'geojson') {
+    cb(newGeoJSONLayer(source.data))
   }
 }
 
@@ -91,10 +105,11 @@ class OpenLayers3Map extends React.Component {
       }
 
       if(!this.layer) {
+        var self = this
         toVectorLayer(newSource.source, this.tilegrid, vectorLayer => {
-          this.layer = vectorLayer
-          this.map.addLayer(this.layer)
-          setStyleFunc(this.map, this.layer)
+          self.layer = vectorLayer
+          self.map.addLayer(self.layer)
+          setStyleFunc(self.map, self.layer)
         })
       } else {
         setStyleFunc(this.map, this.layer)
@@ -140,10 +155,10 @@ class OpenLayers3Map extends React.Component {
       ref={x => this.container = x}
       style={{
         position: "fixed",
-        top: 0,
+        top: 40,
         right: 0,
         bottom: 0,
-        height: "100%",
+        height: 'calc(100% - 40px)',
         width: "75%",
         backgroundColor: '#fff',
         ...this.props.style,
diff --git a/src/styles/_map.scss b/src/styles/_map.scss
new file mode 100644
index 0000000..951c654
--- /dev/null
+++ b/src/styles/_map.scss
@@ -0,0 +1,22 @@
+//OPENLAYERS
+.maputnik-layout {
+  .ol-zoom {
+    top: 10px;
+    right: 10px;
+    left: auto;
+  }
+
+  .ol-attribution.ol-logo-only {
+    height: 20px;
+  }
+
+  .ol-control {
+    button {
+      background-color: rgb(28, 31, 36);
+    }
+
+    button:hover {
+      background-color: rgb(86, 83, 83);
+    }
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 16a9740..1472bf6 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -35,3 +35,4 @@ $toolbar-offset: 0;
 @import 'filtereditor';
 @import 'zoomproperty';
 @import 'popup';
+@import 'map';