Heatmap React/Halogen example

* [WIP] heatmap-halogen-example * [WIP] FFI + types + implementation of creating heatmap layer, adding data (GeoJson) to it, updating data - all still WIP! * [WIP] Load + render earthqake data as heatmap Note: There are some issues to render heatmap data properly I could not fix today, that's why this stuff is still WIP... * Make heatmap work * type safety creation of a layer (no FFI) - remove FFI to create a `Layer` with all needed props (all defined in `Heatmap.purs` - which has been deleted, too) - extract `mapbox-gl-js` related stuff into an own `Mapbox` module - remove GeoJSON definitions - Use `WriteForeign` instances to push `Layer` data over the bounderies to the funky JS world of `mapbox-gl-js` - Remove unneded stuff from `Main` + `MapComponent` of `heatmap-halogen` example * Fix CI build * Bring `GeoJson` module back to live to be more expressive on data structures. As a result after embedding heatmap stuff into tcr map today... * Update constraints/types and fix `onViewportChange` handling to modify state (which is needed to move/zoom map around) * Final clean up: Remove `mapRef` from `Props` of `MapComponent` Aaaah - and add missing newlines... * Add `setLayerVisibilty` func. to show/hide a layer * Example of toggeling `heatmap layer` * Fix README
f-o-a-m · Feb 7, 2019 · 18109e1 · 18109e1
1 parent c8c04dc
commit 18109e1
Show file tree

Hide file tree

Showing 20 changed files with 786 additions and 17 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,4 +7,6 @@
 /.psc*
 /.purs*
 /.psa*
+.psc-ide-port
+.vscode/
 package-lock.json
diff --git a/.travis.yml b/.travis.yml
@@ -4,12 +4,12 @@ sudo: required
 node_js: stable
 install:
   - npm i
-  - bower i --production
+  - bower i
 script:
   - npm run build
-  - bower i
   - npm run example-map
   - npm run example-map-halogen
+  - npm run example-heatmap-halogen
 deploy:
   provider: pages
   skip_cleanup: true

diff --git a/README.md b/README.md
@@ -12,5 +12,5 @@ for [mapbox-gl-js](https://github.com/mapbox/mapbox-gl-js). Additionally, react-
 You can see some examples in `example` directory. It is also hosted [here](https://f-o-a-m.github.io/purescript-react-map-gl/)
 
 ## npm requirements
-- react >= 16.0.0
-- react-map-gl >= 3.2.1
+- react >= 16.0.3
+- react-map-gl >= 4.0.8
diff --git a/bower.json b/bower.json
@@ -10,15 +10,19 @@
   "dependencies": {
     "purescript-prelude": "^4.0.0",
     "purescript-console": "^4.0.0",
-    "purescript-react": "^6.0.0",
+    "purescript-react": "^6.1.0",
     "purescript-generics-rep": "^6.0.0",
     "purescript-record": "^1.0.0",
-    "purescript-web-mercator": "f-o-a-m/purescript-web-mercator#0.2.0"
+    "purescript-simple-json": "^4.4.0",
+    "purescript-web-mercator": "f-o-a-m/purescript-web-mercator#0.2.0",
+    "purescript-foreign-object": "^1.1.0"
   },
   "devDependencies": {
     "purescript-psci-support": "^4.0.0",
     "purescript-react-dom": "^6.0.0",
     "purescript-halogen": "^4.0.0",
-    "purescript-aff-bus": "^4.0.0"
+    "purescript-aff-bus": "^4.0.0",
+    "purescript-debug": "^4.0.0",
+    "purescript-affjax": "^7.0.0"
   }
 }
diff --git a/example/heatmap-halogen/.gitignore b/example/heatmap-halogen/.gitignore
@@ -0,0 +1,5 @@
+/dist/example.js
+/output/
+/bower_components/
+/node_modules/
+package-lock.json
diff --git a/example/heatmap-halogen/README.md b/example/heatmap-halogen/README.md
@@ -0,0 +1,11 @@
+## Build Instructions
+
+You can build this from the root directory
+
+```bash
+> npm i
+> npm run build
+> npm run example-heatmap-halogen
+```
+
+And serve `./dist/` using a webserver.
diff --git a/example/heatmap-halogen/dist/index.html b/example/heatmap-halogen/dist/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+    <head>
+        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
+        <title>react-map-gl example - heatmap halogen</title>
+        <style>
+            body {margin: 0;}
+            .map-wrapper{position: relative;}
+            .btn-toggle {
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script src="example.js"></script>
+    </body>
+</html>
diff --git a/example/heatmap-halogen/src/Main.purs b/example/heatmap-halogen/src/Main.purs
@@ -0,0 +1,51 @@
+module Main where
+
+import Prelude
+
+import Effect (Effect)
+import Effect.Aff.Class (class MonadAff)
+import Effect.Console (log)
+import Data.Maybe (Maybe(..))
+import Halogen as H
+import Halogen.Aff as HA
+import Halogen.HTML as HH
+import Halogen.VDom.Driver (runUI)
+import MapComponent (MapMessages(..), MapQuery, mapComponent)
+
+type State = {}
+
+data Query a
+  = HandleMapUpdate MapMessages a
+
+data MapSlot = MapSlot
+derive instance eqMapSlot :: Eq MapSlot
+derive instance ordMapSlot :: Ord MapSlot
+
+ui 
+  :: forall m
+  . MonadAff m
+  => H.Component HH.HTML Query Unit Void m
+ui =
+  H.parentComponent
+    { initialState: const {}
+    , render
+    , eval
+    , receiver: const Nothing
+    }
+  where
+    render :: State -> H.ParentHTML Query MapQuery MapSlot m
+    render _ =
+      HH.div_
+        [ HH.slot MapSlot mapComponent unit $ Just <<< H.action <<< HandleMapUpdate
+        ]
+
+    eval :: Query ~> H.ParentDSL State Query MapQuery MapSlot Void m
+    eval (HandleMapUpdate msg next) = do
+      case msg of
+        OnClick info -> H.liftEffect $ log $ show info.lngLat
+      pure next
+
+main :: Effect Unit
+main = HA.runHalogenAff do
+  body <- HA.awaitBody
+  runUI ui unit body