From 371ff89b49e75809a1d4269c88a3ebcedb49502d Mon Sep 17 00:00:00 2001 From: Xavier Mamano Date: Sat, 20 Apr 2013 10:39:01 +0200 Subject: [PATCH] Show OL-renderer on webside. --- website/example-heatmap-arcgis.html | 3 + website/example-heatmap-click.html | 3 + website/example-heatmap-googlemaps.html | 3 + website/example-heatmap-leaflet.html | 3 + website/example-heatmap-legend.html | 3 + website/example-heatmap-mousemove.html | 3 + .../example-heatmap-openlayers-renderer.html | 236 ++++++++++++++++++ website/example-heatmap-openlayers.html | 3 + website/examples.html | 3 + 9 files changed, 260 insertions(+) create mode 100644 website/example-heatmap-openlayers-renderer.html diff --git a/website/example-heatmap-arcgis.html b/website/example-heatmap-arcgis.html index 246407e..24901dc 100644 --- a/website/example-heatmap-arcgis.html +++ b/website/example-heatmap-arcgis.html @@ -190,6 +190,9 @@

  • Openlayers Layer
    • +
  • + Openlayers Renderer for vectorial layers +
  • ArcGIS Layer
    • diff --git a/website/example-heatmap-click.html b/website/example-heatmap-click.html index ae379b8..63bee7b 100644 --- a/website/example-heatmap-click.html +++ b/website/example-heatmap-click.html @@ -81,6 +81,9 @@

  • Openlayers Layer
    • +
  • + Openlayers Renderer for vectorial layers +
  • ArcGIS Layer
    • diff --git a/website/example-heatmap-googlemaps.html b/website/example-heatmap-googlemaps.html index 9f8e9b7..bf0204f 100644 --- a/website/example-heatmap-googlemaps.html +++ b/website/example-heatmap-googlemaps.html @@ -82,6 +82,9 @@

  • Openlayers Layer
    • +
  • + Openlayers Renderer for vectorial layers +
  • ArcGIS Layer
    • diff --git a/website/example-heatmap-leaflet.html b/website/example-heatmap-leaflet.html index 392c1fd..f54fac0 100644 --- a/website/example-heatmap-leaflet.html +++ b/website/example-heatmap-leaflet.html @@ -133,6 +133,9 @@

  • Openlayers Layer
    • +
  • + Openlayers Renderer for vectorial layers +
  • ArcGIS Layer
    • diff --git a/website/example-heatmap-legend.html b/website/example-heatmap-legend.html index 6459208..5e07a06 100644 --- a/website/example-heatmap-legend.html +++ b/website/example-heatmap-legend.html @@ -81,6 +81,9 @@

  • Openlayers Layer
    • +
  • + Openlayers Renderer for vectorial layers +
  • ArcGIS Layer
    • diff --git a/website/example-heatmap-mousemove.html b/website/example-heatmap-mousemove.html index 3fa21a3..55e8dec 100644 --- a/website/example-heatmap-mousemove.html +++ b/website/example-heatmap-mousemove.html @@ -81,6 +81,9 @@

  • Openlayers Layer
    • +
  • + Openlayers Renderer for vectorial layers +
  • ArcGIS Layer
    • diff --git a/website/example-heatmap-openlayers-renderer.html b/website/example-heatmap-openlayers-renderer.html new file mode 100644 index 0000000..1428c4f --- /dev/null +++ b/website/example-heatmap-openlayers-renderer.html @@ -0,0 +1,236 @@ + + + + + heatmap.js | Examples: OpenLayers Heatmap Layer + + + + + + + + + + + + + + + +
    +
    +
    + + + + + + heatmap.js +
    + +
    +
    +
    +
    + +
    +
    +

    + Examples + See how easy it is to create heatmaps with heatmap.js +

    +
    +
    +
    + +
    +
    + +
    +
    +
    This example shows a static heatmap overlay for OpenLayers. Please feel free to improve the layer implementation on github.
    +
    + +
    +
    +
    +
    +<!DOCTYPE html>
+<html lang="en">
+...
+<div id="heatmapArea" />
+<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
+<script type="text/javascript" src="heatmap.js"></script>
+<script type="text/javascript" src="heatmap-openlayers.js"></script>
+<script type="text/javascript">
+window.onload = function(){
+
+    // here is our data
+    // important: a datapoint now contains lat, lng and count property!
+    var data: [{lat: 33.5363, lng:-117.044, count: 1},{lat: 33.5608, lng:-117.24, count: 1},{lat: 38, lng:-97, count: 1},{lat: 38.9358, lng:-77.1621, count: 1}];
+
+    var datalen = data.length,
+        features = [];
+
+    // in order to use OpenLayers vectorial layer we have to transform our data into 
+    // a features array.
+
+    var sphericalMercatorProj = new OpenLayers.Projection('EPSG:900913'),
+        geographicProj = new OpenLayers.Projection('EPSG:4326');
+    while (datalen--) {
+        var g = new OpenLayers.Geometry.Point(data[datalen].lng, data[datalen].lat);
+        g.transform(geographicProj, sphericalMercatorProj);
+        features.push(
+            new OpenLayers.Feature.Vector(g, {count: data[datalen].count})
+        );
+    }
+
+    var map = new OpenLayers.Map( 'heatmapArea');
+    var layer = new OpenLayers.Layer.OSM();
+
+    // create our vectorial layer using heatmap renderer
+    heatmap = new OpenLayers.Layer.Vector("Heatmap Layer", {
+        opacity: 0.3,
+        renderers: ['Heatmap'],
+        rendererOptions: {weight: 'count', heatmapConfig: {radius: 10}}
+    });
+    map.addLayers([layer, heatmap]);
+
+    map.zoomToMaxExtent();
+
+    // Add the features to a vectorial layer
+    heatmap.addFeatures(features);
+
+};
+</script>
+</body>
+</html>
+
    +
    +
    +
    +
    +
    + +Fork me on GitHub +
    + + + + + + + + + + + + + + + diff --git a/website/example-heatmap-openlayers.html b/website/example-heatmap-openlayers.html index bfff177..0df262b 100644 --- a/website/example-heatmap-openlayers.html +++ b/website/example-heatmap-openlayers.html @@ -84,6 +84,9 @@

  • Openlayers Layer
    • +
  • + Openlayers Renderer for vectorial layers +
  • ArcGIS Layer
    • diff --git a/website/examples.html b/website/examples.html index fe4f156..04417e1 100644 --- a/website/examples.html +++ b/website/examples.html @@ -81,6 +81,9 @@

  • Openlayers Layer
    • +
  • + Openlayers Renderer for vectorial layers +
  • ArcGIS Layer