This article is a continuation of the article “Heatmap and Interpolation: it is easy in OpenWebGIS” about creation of Heatmap and Interpolation with the help of OpenWebGIS interface. We are now describing the process of creating a heatmap, based on any point layer, using JavaScript, OpenLayers 2.x and canvas element (as part of HTML5 technology). Describing the process we will expect that you certainly already have some basic knowledge of programming language JavaScript and can handle OpenLayers library (which is an open source provided under the 2-clause BSD License) JavaScript library for displaying map data in web browsers.). Perhaps the general principles of work with the OpenLayers 2.x library can be applied with some adjustments to the work with the OpenLayers 3.x library, if for example, while creating some new objects replace the “new OpenLayers” to “new ol”, but this is not tested and I have not put currently such a task. As for me, the author of OpenWebGIS, it is enough in my work to use OpenLayers 2.x. But adapting the entire project on the base of the OpenLayers 3.x library can be very labor-expensive.
Readers should take into account that the code itself is likely not perfect and of course there are better solutions. But this code really works and gives the desired result. So that it can be used as a base for creating your heatmap functions using any libraries and their versions. And you make it more optimal for your own tasks.
In your project the OpenLayers library should be added. To do this, write the row: , where instead of PATH to specify path to where you put the OpenLayers.js file.
First of all it is necessary to get all the elements of the layer that will be used to create a heatmap. To do this, the user must select the name of the layer (in this case select the layer “Cities”) with which we will work in the list of “Editable Layer” and click on the menu item “Calculations-> Interpolation”. When the user selects the layer name in the list of “Editable Layer”, in the code of OpenWebGIS the global variable “edilayerMainLayer” becomes equal to the layer and its contents. How it happens, you can look in the function SeteditlayerMain (editlayerM) in file “opengis_eng.html” if you download the javascript code using the menu item of OpenWebGIS “JavascriptSourceCode”.
After the user selects the menu item “Calculations-> Interpolation”, the pop-up window will appear as shown in Figure 1. You can see the window creation code in the function Interpolation() inside the file “opengis_eng.html”.
Figure 1 – Interpolation pop-up window in OpenWebGIS interface
The user selects the desired type of heatmap or interpolation and clicks “OK” button, after pressing this button function OK_Interpolation_First() fulfills. Inside this function the process redirection occurs to perform other functions, depending on the user’s choice. When selecting Heatmap, redirection to a HeatmapCanvas2() function occurs. In the HeatmapCanvas2() function the pop-up window construction happens with the options of creating Heatmap. Again, the code to create a window is not given here by us. You can examine it carefully in the file “opengis_eng.html”. The window will appear as shown in Figure 2.
Figure 2 – Pop-up window with the options of creating Heatmap
It is only necessary to note that the “OK” button with the id = “okHeatmapOWG_id” is tied with the event onclick:
document.getElementById ("okHeatmapOWG_id").onclick=function(){var zoomH = 0; HeatmapCanvas (zoomH)}The variable “zoomH” is necessary to indicate the fact that the layer is created with the heatmap results for the first time or it already exists and only needs to be recalculated and redrawn after the user performs zoom in or zoom out. If the layer is just created, then the zoomH variable is set to 0, if it is not so, then the zoomH variable becomes equivalent to a layer that is to be recalculated (we will write about it later).
The OpenWebGIS user has the ability to calculate a heatmap simply depending on the density of points or taking into account the value of the layer selected field (attribute) . Fields names are specified in the list (element select) with identificator id = “htmpselectatrowg_id”. With this in mind, the code will branch out.
So after clicking “OK” button in the pop-up window shown in Figure 2 the HeatmapCanvas(zoomH) function starts to run. The function start looks like this:
//create array for the points coordinates of our layer selected in the list of "Editable Layer":var data = [];if (zoomH == 0) // if the layer with the heatmap is created for the first time{// Create a new layer that will contain the heatmap. //The layer name is taken from the value of the input element with id = "Id_HeatowgLayerNameAtl_Name",// which was inserted by the user:var new_layer_Heat = new OpenLayers.Layer (document.getElementById ("Id_HeatowgLayerNameAtl_Name"). value, {}); // Check the existence of the features:if(edilayerMainLayer.features&&edilayerMainLayer.features[0]&&edilayerMainLayer.features[0].geometry&&edilayerMainLayer.features[0].geometry.CLASS_NAME=="OpenLayers.Geometry.Point"){// Creating a new parser with the OpenLayers.Format.GeoJSON constructor:var format = new OpenLayers.Format.GeoJSON ({'internalProjection': new OpenLayers.Projection ("EPSG: 900913"),'externalProjection': new OpenLayers.Projection ("EPSG: 900913")});var jsonstringH = format.write (edilayerMainLayer.features);// Create a "featuresH" array of source features for subsequent recalculation of the layer for zooming:new_layer_Heat.featuresH = JSON.parse (jsonstringH) .features;// looping over the whole array of features (points), recalculate their geographical coordinates //in pixel coordinates on the map and add the result to an "data" array :for (var i=0;i
Readers should take into account that the code itself is likely not perfect and of course there are better solutions. But this code really works and gives the desired result. So that it can be used as a base for creating your heatmap functions using any libraries and their versions. And you make it more optimal for your own tasks.
In your project the OpenLayers library should be added. To do this, write the row: , where instead of PATH to specify path to where you put the OpenLayers.js file.
First of all it is necessary to get all the elements of the layer that will be used to create a heatmap. To do this, the user must select the name of the layer (in this case select the layer “Cities”) with which we will work in the list of “Editable Layer” and click on the menu item “Calculations-> Interpolation”. When the user selects the layer name in the list of “Editable Layer”, in the code of OpenWebGIS the global variable “edilayerMainLayer” becomes equal to the layer and its contents. How it happens, you can look in the function SeteditlayerMain (editlayerM) in file “opengis_eng.html” if you download the javascript code using the menu item of OpenWebGIS “JavascriptSourceCode”.
After the user selects the menu item “Calculations-> Interpolation”, the pop-up window will appear as shown in Figure 1. You can see the window creation code in the function Interpolation() inside the file “opengis_eng.html”.
Figure 1 – Interpolation pop-up window in OpenWebGIS interfaceThe user selects the desired type of heatmap or interpolation and clicks “OK” button, after pressing this button function OK_Interpolation_First() fulfills. Inside this function the process redirection occurs to perform other functions, depending on the user’s choice. When selecting Heatmap, redirection to a HeatmapCanvas2() function occurs. In the HeatmapCanvas2() function the pop-up window construction happens with the options of creating Heatmap. Again, the code to create a window is not given here by us. You can examine it carefully in the file “opengis_eng.html”. The window will appear as shown in Figure 2.
Figure 2 – Pop-up window with the options of creating HeatmapIt is only necessary to note that the “OK” button with the id = “okHeatmapOWG_id” is tied with the event onclick:
document.getElementById ("okHeatmapOWG_id").onclick=function(){var zoomH = 0; HeatmapCanvas (zoomH)}The variable “zoomH” is necessary to indicate the fact that the layer is created with the heatmap results for the first time or it already exists and only needs to be recalculated and redrawn after the user performs zoom in or zoom out. If the layer is just created, then the zoomH variable is set to 0, if it is not so, then the zoomH variable becomes equivalent to a layer that is to be recalculated (we will write about it later).
The OpenWebGIS user has the ability to calculate a heatmap simply depending on the density of points or taking into account the value of the layer selected field (attribute) . Fields names are specified in the list (element select) with identificator id = “htmpselectatrowg_id”. With this in mind, the code will branch out.
So after clicking “OK” button in the pop-up window shown in Figure 2 the HeatmapCanvas(zoomH) function starts to run. The function start looks like this:
//create array for the points coordinates of our layer selected in the list of "Editable Layer":var data = [];if (zoomH == 0) // if the layer with the heatmap is created for the first time{// Create a new layer that will contain the heatmap. //The layer name is taken from the value of the input element with id = "Id_HeatowgLayerNameAtl_Name",// which was inserted by the user:var new_layer_Heat = new OpenLayers.Layer (document.getElementById ("Id_HeatowgLayerNameAtl_Name"). value, {}); // Check the existence of the features:if(edilayerMainLayer.features&&edilayerMainLayer.features[0]&&edilayerMainLayer.features[0].geometry&&edilayerMainLayer.features[0].geometry.CLASS_NAME=="OpenLayers.Geometry.Point"){// Creating a new parser with the OpenLayers.Format.GeoJSON constructor:var format = new OpenLayers.Format.GeoJSON ({'internalProjection': new OpenLayers.Projection ("EPSG: 900913"),'externalProjection': new OpenLayers.Projection ("EPSG: 900913")});var jsonstringH = format.write (edilayerMainLayer.features);// Create a "featuresH" array of source features for subsequent recalculation of the layer for zooming:new_layer_Heat.featuresH = JSON.parse (jsonstringH) .features;// looping over the whole array of features (points), recalculate their geographical coordinates //in pixel coordinates on the map and add the result to an "data" array :for (var i=0;i