add immoweb ui

immoweb/node_modules/hexgrid-heatmap/HexgridHeatmap.js

@@ -0,0 +1,207 @@
+var rbush = require('rbush');
+var turf = {
+    center: require('@turf/center'),
+    hexGrid: require('@turf/hex-grid'),
+    destination: require('@turf/destination'),
+    distance: require('@turf/distance'),
+};
+/** 
+ * Creates a hexgrid-based vector heatmap on the specified map.
+ * @constructor
+ * @param {Map} map - The map object that this heatmap should add itself to and track.
+ * @param {string} [layername=hexgrid-heatmap] - The layer name to use for the heatmap.
+ * @param {string} [addBefore] - Name of a layer to insert this heatmap underneath.
+ */
+function HexgridHeatmap(map, layername, addBefore) {
+    if(layername === undefined) layername = "hexgrid-heatmap";
+    this.map = map;
+    this.layername = layername;
+    this._setupLayers(layername, addBefore);
+    this._setupEvents();
+    // Set up an R-tree to look for coordinates as they are stored in GeoJSON Feature objects
+    this._tree = rbush(9,['["geometry"]["coordinates"][0]','["geometry"]["coordinates"][1]','["geometry"]["coordinates"][0]','["geometry"]["coordinates"][1]']);
+
+    this._intensity = 8;
+    this._spread = 0.1;
+    this._minCellIntensity = 0; // Drop out cells that have less than this intensity
+    this._maxPointIntensity = 20; // Don't let a single point have a greater weight than this
+    this._cellDensity = 1;
+
+    var thisthis = this;
+    this._checkUpdateCompleteClosure = function(e) { thisthis._checkUpdateComplete(e); }
+    this._calculatingGrid = false;
+    this._recalcWhenReady = false;
+}
+
+HexgridHeatmap.prototype = {
+    _setupLayers: function(layername, addBefore) {
+        this.map.addLayer({
+        'id': layername,
+        'type': 'fill',
+        'source': {
+            type: 'geojson',
+            data: { type: "FeatureCollection", features: [] }
+        },
+        'paint': {
+          'fill-opacity': 1.0,
+          'fill-color': {
+            property: 'count',
+            stops: [
+              // Short rainbow blue
+              [0, "rgba(0,185,243,0)"],
+              [50, "rgba(0,185,243,0.24)"],
+              [130, "rgba(255,223,0,0.3)"],
+              [200, "rgba(255,105,0,0.3)"],
+            ]
+          }
+        }
+        }, addBefore);
+
+        this.layer = this.map.getLayer(layername);
+        this.source = this.map.getSource(layername);
+    },
+    _setupEvents: function() {
+        var thisthis = this;
+        this.map.on("moveend", function() {
+            thisthis._updateGrid();
+        });
+    },
+
+
+    /**
+     * Set the data to visualize with this heatmap layer
+     * @param {FeatureCollection} data - A GeoJSON FeatureCollection containing data to visualize with this heatmap
+     * @public
+     */
+    setData: function(data) {
+        // Re-build R-tree index
+        this._tree.clear();
+        this._tree.load(data.features);
+    },
+
+
+    /**
+      * Set how widely points affect their neighbors
+      * @param {number} spread - A good starting point is 0.1. Higher values will result in more blurred heatmaps, lower values will highlight individual points more strongly.
+      * @public
+      */
+    setSpread: function(spread) {
+        this._spread = spread;
+    },
+
+
+    /**
+      * Set the intensity value for all points.
+      * @param {number} intensity - Setting this too low will result in no data displayed, setting it too high will result in an oversaturated map. The default is 8 so adjust up or down from there according to the density of your data.
+      * @public
+      */ 
+    setIntensity: function(intensity) {
+        this._intensity = intensity;
+    },
+
+
+    /**
+      * Set custom stops for the heatmap color schem
+      * @param {array} stops - An array of `stops` in the format of the Mapbox GL Style Spec. Values should range from 0 to about 200, though you can control saturation by setting different values here.
+      */
+    setColorStops: function(stops) {
+        this.layer.setPaintProperty("fill-color", {property: "count", stops: stops});
+    },
+
+
+    /**
+      * Set the hexgrid cell density
+      * @param {number} density - Values less than 1 will result in a decreased cell density from the default, values greater than 1 will result in increaded density/higher resolution. Setting this value too high will result in slow performance.
+      * @public
+      */ 
+    setCellDensity: function(density) {
+        this._cellDensity = density;
+    },
+
+
+    /**
+      * Manually force an update to the heatmap
+      * You can call this method to manually force the heatmap to be redrawn. Use this after calling `setData()`, `setSpread()`, or `setIntensity()`
+      */
+    update: function() {
+        this._updateGrid();
+    },
+
+
+    _generateGrid: function() {
+      // Rebuild grid
+      //var cellSize = Math.min(Math.max(1000/Math.pow(2,this.map.transform.zoom), 0.01), 0.1); // Constant screen size
+
+      var cellSize = Math.max(500/Math.pow(2,this.map.transform.zoom) / this._cellDensity, 0.01); // Constant screen size
+      
+      // TODO: These extents don't work when the map is rotated
+      var extents = this.map.getBounds().toArray()
+      extents = [extents[0][0], extents[0][1], extents[1][0], extents[1][1]];
+
+      var hexgrid = turf.hexGrid(extents, cellSize, 'kilometers');
+
+      var sigma = this._spread;
+      var a = 1 / (sigma * Math.sqrt(2 * Math.PI));
+      var amplitude = this._intensity;
+
+      var cellsToSave = [];
+ 
+      var thisthis = this;
+      hexgrid.features.forEach(function(cell) {
+        var center = turf.center(cell);
+        var strength = 0;
+        var SW = turf.destination(center, sigma * 4, -135);
+        var NE = turf.destination(center, sigma * 4, 45);
+        var pois = thisthis._tree.search({
+            minX: SW.geometry.coordinates[0],
+            minY: SW.geometry.coordinates[1],
+            maxX: NE.geometry.coordinates[0],
+            maxY: NE.geometry.coordinates[1]
+        });
+
+        pois.forEach(function(poi) {
+            // TODO: Allow weight to be influenced by a property within the POI
+            var distance = turf.distance(center, poi);
+
+            var weighted = Math.min(Math.exp(-(distance * distance / (2 * sigma * sigma))) * a * amplitude, thisthis._maxPointIntensity);
+            strength += weighted;
+        });
+
+        cell.properties.count = strength;
+
+        if(cell.properties.count > thisthis._minCellIntensity) {
+            cellsToSave.push(cell);
+        }
+      });
+
+      hexgrid.features = cellsToSave;
+      return hexgrid;
+
+    },
+    _updateGrid: function() {
+        if(!this._calculatingGrid) {
+            this._calculatingGrid = true;
+            var hexgrid = this._generateGrid();
+            if(hexgrid != null) {
+                var thisthis = this;
+                this.source.on("data", this._checkUpdateCompleteClosure);
+                this.source.setData(hexgrid);
+            }
+            else {
+              this._calculatingGrid = false;
+            }
+       }
+       else {
+        this._recalcWhenReady = true;
+       }
+    },
+    _checkUpdateComplete: function(e) {
+      if(e.dataType == "source") {
+        this.source.off("data", this._checkUpdateCompleteClosure);  
+        this._calculatingGrid = false;
+        if(this._recalcWhenReady) this._updateGrid();
+      }
+    }
+};
+
+module.exports = exports = HexgridHeatmap;

immoweb/node_modules/hexgrid-heatmap/README.md

@@ -0,0 +1,45 @@
+## Hexgrid-based vector heatmaps for your Mapbox GL JS Maps
+
+![](https://github.com/kronick/HexgridHeatmap/raw/master/docs/hexgrid-heatmap.png)
+
+
+### Usage
+See the [examples directory](examples/index.html) for an example of usage. You will need to provide your own Mabox access token to view the map.
+
+Here's how it works:
+
+- Create an instance of `HexgridHeatmap`. It will automatically add the necessary layer and events to the specified map:
+
+```
+var heatmap = new HexgridHeatmap(map, "hexgrid-heatmap", "waterway-label");
+```
+
+- You can control the intensity and spread of the points:
+
+```
+heatmap.setIntensity(15);
+heatmap.setSpread(0.3);
+```
+
+- Feed in a GeoJSON `FeatureCollection` full of points to map
+
+```
+heatmap.setData(sightseeingPOIs);
+```
+
+- Manually call `update()` after changing settings. The heatmap will automatically call update() when moving and zooming the map.
+
+```
+heatmap.update();
+```
+
+- You can set your own color palette using stops conforming to the Mapbox GL style spec:
+
+```
+heatmap.setColorStops([
+    [0, "rgba(0,185,243,0)"],
+    [50, "rgba(0,185,243,0.5)"],
+    [130, "rgba(255,223,0,0.6)"],
+    [200, "rgba(255,105,0,0.6)"]
+]);
+```

immoweb/node_modules/hexgrid-heatmap/example/index.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<head>
+    <meta charset="utf-8">
+    <title>Hexgrid Heatmap</title>
+    
+    <script src='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
+    <link href='https://api.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
+    
+    <script src='../dist/HexgridHeatmap.js'></script>
+    <script src='sightseeing-pois.js'></script>
+</head>
+
+<div id='map' style='width: 800px; height: 600px;'></div>
+<script>
+mapboxgl.accessToken = '<INSERT YOUR MAPBOX ACCESS TOKEN HERE>';
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/light-v9',
+    zoom: 12,
+    center: [-122.42534069839593, 37.77444125366313]
+});
+
+map.on("load", function() {
+    var heatmap = new HexgridHeatmap(map, "hexgrid-heatmap", "waterway-label");
+
+    heatmap.setIntensity(15);
+    heatmap.setSpread(0.3);
+    heatmap.setData(sightseeingPOIs);
+    heatmap.update();
+    heatmap.setColorStops([
+        [0, "rgba(0,185,243,0)"],
+        [50, "rgba(0,185,243,0.5)"],
+        [130, "rgba(255,223,0,0.6)"],
+        [200, "rgba(255,105,0,0.6)"]
+    ])
+});
+</script>

immoweb/node_modules/hexgrid-heatmap/index.js

@@ -0,0 +1 @@
+window.HexgridHeatmap = require('./HexgridHeatmap');

immoweb/node_modules/hexgrid-heatmap/package.json

@@ -0,0 +1,58 @@
+{
+  "_from": "hexgrid-heatmap",
+  "_id": "hexgrid-heatmap@0.1.2",
+  "_inBundle": false,
+  "_integrity": "sha1-5PNz1fe3e+e9IRzdQNBznnvQb0Q=",
+  "_location": "/hexgrid-heatmap",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "tag",
+    "registry": true,
+    "raw": "hexgrid-heatmap",
+    "name": "hexgrid-heatmap",
+    "escapedName": "hexgrid-heatmap",
+    "rawSpec": "",
+    "saveSpec": null,
+    "fetchSpec": "latest"
+  },
+  "_requiredBy": [
+    "#USER",
+    "/"
+  ],
+  "_resolved": "https://registry.npmjs.org/hexgrid-heatmap/-/hexgrid-heatmap-0.1.2.tgz",
+  "_shasum": "e4f373d5f7b77be7bd211cdd40d0739e7bd06f44",
+  "_spec": "hexgrid-heatmap",
+  "_where": "/home/kadir/workspace/webimmo",
+  "author": {
+    "name": "Sam Kronick",
+    "email": "sam.kronick@mapbox.com",
+    "url": "http://samkronick.com"
+  },
+  "bugs": {
+    "url": "https://github.com/kronick/HexgridHeatmap/issues"
+  },
+  "bundleDependencies": false,
+  "dependencies": {
+    "@turf/center": "^3.10.3",
+    "@turf/destination": "^3.10.3",
+    "@turf/distance": "^3.10.3",
+    "@turf/hex-grid": "^3.10.3",
+    "rbush": "^2.0.1"
+  },
+  "deprecated": false,
+  "description": "A hexgrid-based heatmap layer for your Mapbox GL JS map",
+  "homepage": "https://github.com/kronick/HexgridHeatmap#readme",
+  "license": "ISC",
+  "main": "HexgridHeatmap.js",
+  "name": "hexgrid-heatmap",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kronick/HexgridHeatmap.git"
+  },
+  "scripts": {
+    "build": "browserify index.js -o dist/HexgridHeatmap.js",
+    "dev": "watchify index.js -o dist/HexgridHeatmap.js --verbose",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "version": "0.1.2"
+}