merge next (#5)

merged, thanks @juliendangers
gaving · Apr 27, 2018 · fd9a055 · fd9a055
1 parent 1762a13
commit fd9a055
Show file tree

Hide file tree

Showing 12 changed files with 18,479 additions and 2,867 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@
 /node_modules
 /umd
 npm-debug.log
+yarn-error.log
diff --git a/.travis.yml b/.travis.yml
@@ -1,11 +1,9 @@
 language: node_js
 node_js:
   - "node"
-  - "7"
-before_install: 
-  - wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
-  - tar -xjf phantomjs-2.1.1-linux-x86_64.tar.bz2
-  - sudo rm -rf /usr/local/phantomjs/bin/phantomjs
-  - sudo mv phantomjs-2.1.1-linux-x86_64/bin/phantomjs /usr/local/phantomjs/bin/phantomjs
-  - npm install -g yarn@0.19.0
-install: yarn install --ignore-optional
+  - "9"
+install: yarn
+cache:
+  yarn: true
+  directories:
+    - node_modules
diff --git a/README.md b/README.md
@@ -10,76 +10,55 @@ Map component for Searchkit
 
 ## Installation
 
-`npm install searchkit-geomap --save`
+`yarn add searchkit-geomap --save`
 
 ## Features
 
-- GeoMap : Display aggregations on a MapGL map using Mapbox with [react-map-gl](https://github.com/uber/react-map-gl).
+* GeoMap : Display aggregations on a MapGL map using Mapbox with [react-map-gl](https://github.com/uber/react-map-gl).
 
 ## Example
 
 ```javascript
-import { GeoMap } from 'searchkit-geomap';
+import React, { Component } from "react";
+import { GeoMap } from "searchkit-geomap";
 
-const host = 'http://demo.searchkit.co/api/crimes';
+const host = "http://demo.searchkit.co/api/crimes";
 const searchkit = new SearchkitManager(host);
 const opts = {
   width: 800,
   height: 600,
   latitude: 37.7577,
   longitude: -122.4376,
-  mapboxApiAccessToken: 'key'
+  mapboxApiAccessToken: "key"
 };
 
-const Demo = React.createClass({
+class Demo extends Component {
   render() {
     return (
       <SearchkitProvider searchkit={searchkit}>
         <Layout>
           <TopBar>
-            <SearchBox
-              autofocus={true}
-              searchOnChange={false} />
+            <SearchBox autofocus={true} searchOnChange={false} />
           </TopBar>
           <LayoutBody>
             <LayoutResults>
-             <GeoMap { ...opts } /> 
+              <GeoMap {...opts} />
             </LayoutResults>
           </LayoutBody>
         </Layout>
       </SearchkitProvider>
-    )
+    );
   }
-})
+});
 
-render(<Demo/>, document.querySelector('#demo'))
+render(<Demo />, document.querySelector("#demo"));
 ```
 
-## Note on using Webpack
-
-Due to some issues with Mapbox and Webpack, add the following to your webpack
-config if you experience errors building:-
-
-    var path = require('path');
-    ...
-    node: {
-      console: true,
-      fs: 'empty',
-      net: 'empty',
-      tls: 'empty'
-    },
-    resolve: {
-      alias: {
-        'mapbox-gl/js/geo/transform': path.join(__dirname, 'node_modules/mapbox-gl/js/geo/transform'),
-        'mapbox-gl': path.join(__dirname, 'node_modules/mapbox-gl/dist/mapbox-gl.js')
-      }
-    }
-
 ## Development
 
-- `git clone https://github.com/gaving/searchkit-geomap.git`
-- `yarn install`
-- `yarn start`
+* `git clone https://github.com/gaving/searchkit-geomap.git`
+* `yarn`
+* `yarn start`
 
 ## License
 

diff --git a/demo/src/index.html b/demo/src/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <link href='https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
+</head>
+
+<body>
+  <div id="<%= htmlWebpackPlugin.options.mountId %>"></div>
+</body>
+
+</html>
diff --git a/demo/src/index.js b/demo/src/index.js
@@ -1,48 +1,50 @@
-import React from 'react';
-import {render} from 'react-dom';
+import React, { Component } from "react";
+import { render } from "react-dom";
 
 import {
-  SearchkitProvider, SearchkitManager,
-  Layout, LayoutResults, LayoutBody, TopBar,
+  SearchkitProvider,
+  SearchkitManager,
+  Layout,
+  LayoutResults,
+  LayoutBody,
+  TopBar,
   SearchBox
-} from 'searchkit';
+} from "searchkit";
 
-import { GeoMap } from '../../src';
+import { GeoMap } from "../../src";
 
-require('searchkit/theming/theme.scss');
+import "searchkit/theming/theme.scss";
 
-const host = 'http://demo.searchkit.co/api/crimes';
+const host = "http://demo.searchkit.co/api/crimes";
 const searchkit = new SearchkitManager(host);
 const opts = {
   width: 800,
   height: 600,
   latitude: 53.4129,
   longitude: -8.2439,
   zoom: 4,
-  mapStyle: 'mapbox://styles/mapbox/streets-v9',
+  mapStyle: "mapbox://styles/mapbox/streets-v9",
   mapboxApiAccessToken:
-    'pk.eyJ1IjoiZ2F2aW5nIiwiYSI6ImNpdXVhbWdvbjAwMHAyb3IzcTN0Ym1xM3AifQ.77yE6Aps7Pro8MOr-w-V3A'
+    "pk.eyJ1IjoiZ2F2aW5nIiwiYSI6ImNpdXVhbWdvbjAwMHAyb3IzcTN0Ym1xM3AifQ.77yE6Aps7Pro8MOr-w-V3A"
 };
 
-const Demo = React.createClass({
+class Demo extends Component {
   render() {
     return (
       <SearchkitProvider searchkit={searchkit}>
         <Layout>
           <TopBar>
-            <SearchBox
-              autofocus={true}
-              searchOnChange={false} />
+            <SearchBox autofocus={true} searchOnChange={false} />
           </TopBar>
           <LayoutBody>
             <LayoutResults>
-             <GeoMap { ...opts } /> 
+              <GeoMap {...opts} />
             </LayoutResults>
           </LayoutBody>
         </Layout>
       </SearchkitProvider>
-    )
+    );
   }
-})
+}
 
-render(<Demo/>, document.querySelector('#demo'))
+render(<Demo />, document.querySelector("#demo"));
diff --git a/nwb.config.js b/nwb.config.js
@@ -1,20 +1,19 @@
-var path = require('path');
+var path = require("path");
 
 module.exports = {
-  type: 'react-component',
-  "npm": {
-    "esModules": true,
-    "umd": {
-      "global": "GeoMap",
-      "externals": {
-        "react": "React"
+  type: "react-component",
+  npm: {
+    esModules: true,
+    umd: {
+      global: "GeoMap",
+      externals: {
+        react: "React"
       }
     }
   },
   webpack: {
-    aliases: {
-      'mapbox-gl/js/geo/transform': path.join(__dirname, 'node_modules/mapbox-gl/js/geo/transform'),
-      'mapbox-gl': path.join(__dirname, 'node_modules/mapbox-gl/dist/mapbox-gl.js')
+    html: {
+      template: "demo/src/index.html"
     }
   }
-}
+};