NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum
Revision history[back]
|
3 |
Removed massive listing
|
|
Multiple Heatmap Layers (Heatmap.js)
Hello -- I apologize in advance for the rookie question, but I'm trying to create a page with toggle buttons for multiple heatmap layers. I'd like to be able to turn off/on different heatmap layers. I've included my code below, I'm getting the first heatmap layer to render, but I can't seem to get the second layer to render via the toggle button.
I think the problem might be the way I'm defining var's TestData and TestData2. I'm not sure if there is a better way to define multiple "data" variables"
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Heatmap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
margin:0;
padding:0;
font-family:Arial;
}
h1 {
margin-bottom:10px;
}
#main {
position:relative;
width:1020px;
padding:20px;
margin:auto;
}
#heatmapArea {
position:relative;
float:left;
width:800px;
height:600px;
border:1px dashed black;
}
#configArea {
position:relative;
float:left;
width:200px;
padding:15px;
padding-top:0;
padding-right:0;
}
.btn {
margin-top:25px;
padding:10px 20px 10px 20px;
-moz-border-radius:15px;
-o-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
border:2px solid black;
cursor:pointer;
color:white;
background-color:black;
}
#gen:hover{
background-color:grey;
color:black;
}
textarea{
width:260px;
padding:10px;
height:200px;
}
h2{
margin-top:0;
}
</style>
<link rel="shortcut icon" type="image/png" href="" />
</head>
<body>
<div id="main">
<h1>OpenLayers Heatmap Overlay</h1>
<div id="heatmapArea">
</div>
<div id="configArea">
<h2>Notes:</h2>
This is an example heatmap overlay.<br /><br />
<div id="tog" class="btn">Toggle HeatmapOverlay</div>
<div id="tog2" class="btn">Toggle HeatmapOverlay 2</div>
</div>
</div>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="../../src/heatmap.js"></script>
<script type="text/javascript" src="../../src/heatmap-openlayers.js"></script>
<script type="text/javascript">
var map, layer, heatmap, heatmap2;
function init(){
var testData={max: 46,data:[{lat: 41.317958, lon:-81.759524, count: 1},
{lat: 39.6785682, lon:-89.706304, count: 1},
{lat: 33.1199456, lon:-117.3237695, count: 1},
{lat: 33.572221, lon:-111.8874255, count: 1400},
]
};
var testData2={max: 46,data:[{lat: 34.2863678, lon:-118.4443829, count: 1},
{lat: 35.118237, lon:-118.492091, count: 1650},
{lat: 34.0628248, lon:-117.2482364, count: 1},
{lat: 36.274405, lon:-115.271394, count: 15}
]
};
var transformedTestData = { max: testData.max , data: [] },
data = testData.data,
datalen = data.length,
nudata = [];
var transformedTestData2 = { max: testData2.max , data: [] },
data = testData2.data,
datalen = data.length,
nudata = [];
// in order to use the OpenLayers Heatmap Layer we have to transform our data into
// { max: <max>, data: [{lonlat: <OpenLayers.LonLat>, count: <count>},...]}
var proj4326 = new OpenLayers.Projection("EPSG:4326");
var projmerc = new OpenLayers.Projection("EPSG:900913");
var lonlat = new OpenLayers.LonLat(-98.35, 39.5); //center of USA
lonlat.transform(proj4326, projmerc);
while(datalen--){
nudata.push({
lonlat: new OpenLayers.LonLat(data[datalen].lon, data[datalen].lat),
count: data[datalen].count
});
}
transformedTestData.data = nudata;
transformedTestData2.data = nudata;
map = new OpenLayers.Map( 'heatmapArea');
layer = new OpenLayers.Layer.OSM();
// create our heatmap layer
heatmap = new OpenLayers.Layer.Heatmap( "Heatmap Layer", map, layer, {visible: true, radius:10}, {isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")});
map.addLayers([layer, heatmap]);
map.zoomToMaxExtent();
map.zoomIn();
map.setCenter(lonlat, 4);
heatmap.setDataSet(transformedTestData);
heatmap2 = new OpenLayers.Layer.Heatmap( "Heatmap Layer", map, layer, {visible: false, radius:10}, {isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")});
map.addLayers([layer, heatmap2]);
map.zoomToMaxExtent();
map.zoomIn();
map.setCenter(lonlat, 4);
heatmap.setDataSet(transformedTestData2);
}
window.onload = function(){
init();
};
document.getElementById("tog").onclick = function(){
heatmap.toggle();
};
document.getElementById("tog2").onclick = function(){
heatmap2.toggle();
};
</script>
</html>
[Listing removed for readability]
|
|
2 |
|
|
Multiple Heatmap Layers (Heatmap.js)
Hello -- I apologize in advance for the rookie question, but I'm trying to create a page with toggle buttons for multiple heatmap layers. I'd like to be able to turn off/on different heatmap layers. I've included my code below, I'm getting the first heatmap layer to render, but I can't seem to get the second layer to render via the toggle button.
I think the problem might be the way I'm defining var's TestData and TestData2. I'm not sure if there is a better way to define multiple "data" variables"
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Heatmap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
margin:0;
padding:0;
font-family:Arial;
}
h1 {
margin-bottom:10px;
}
#main {
position:relative;
width:1020px;
padding:20px;
margin:auto;
}
#heatmapArea {
position:relative;
float:left;
width:800px;
height:600px;
border:1px dashed black;
}
#configArea {
position:relative;
float:left;
width:200px;
padding:15px;
padding-top:0;
padding-right:0;
}
.btn {
margin-top:25px;
padding:10px 20px 10px 20px;
-moz-border-radius:15px;
-o-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
border:2px solid black;
cursor:pointer;
color:white;
background-color:black;
}
#gen:hover{
background-color:grey;
color:black;
}
textarea{
width:260px;
padding:10px;
height:200px;
}
h2{
margin-top:0;
}
</style>
<link rel="shortcut icon" type="image/png" href="" />
</head>
<body>
<div id="main">
<h1>OpenLayers Heatmap Overlay</h1>
<div id="heatmapArea">
</div>
<div id="configArea">
<h2>Notes:</h2>
This is an example heatmap overlay.<br /><br />
<div id="tog" class="btn">Toggle HeatmapOverlay</div>
<div id="tog2" class="btn">Toggle HeatmapOverlay 2</div>
</div>
</div>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="../../src/heatmap.js"></script>
<script type="text/javascript" src="../../src/heatmap-openlayers.js"></script>
<script type="text/javascript">
var map, layer, heatmap, heatmap2;
function init(){
var testData={max: 46,data:[{lat: 41.317958, lon:-81.759524, count: 1},
{lat: 39.6785682, lon:-89.706304, count: 1},
{lat: 33.1199456, lon:-117.3237695, count: 1},
{lat: 33.572221, lon:-111.8874255, count: 1400},
]
};
var testData2={max: 46,data:[{lat: 34.2863678, lon:-118.4443829, count: 1},
{lat: 35.118237, lon:-118.492091, count: 1650},
{lat: 34.0628248, lon:-117.2482364, count: 1},
{lat: 36.274405, lon:-115.271394, count: 15}
]
};
var transformedTestData = { max: testData.max , data: [] },
data = testData.data,
datalen = data.length,
nudata = [];
var transformedTestData2 = { max: testData2.max , data: [] },
data = testData2.data,
datalen = data.length,
nudata = [];
// in order to use the OpenLayers Heatmap Layer we have to transform our data into
// { max: <max>, data: [{lonlat: <OpenLayers.LonLat>, count: <count>},...]}
var proj4326 = new OpenLayers.Projection("EPSG:4326");
var projmerc = new OpenLayers.Projection("EPSG:900913");
var lonlat = new OpenLayers.LonLat(-98.35, 39.5); //center of USA
lonlat.transform(proj4326, projmerc);
while(datalen--){
nudata.push({
lonlat: new OpenLayers.LonLat(data[datalen].lon, data[datalen].lat),
count: data[datalen].count
});
}
transformedTestData.data = nudata;
transformedTestData2.data = nudata;
map = new OpenLayers.Map( 'heatmapArea');
layer = new OpenLayers.Layer.OSM();
// create our heatmap layer
heatmap = new OpenLayers.Layer.Heatmap( "Heatmap Layer", map, layer, {visible: true, radius:10}, {isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")});
map.addLayers([layer, heatmap]);
map.zoomToMaxExtent();
map.zoomIn();
map.setCenter(lonlat, 4);
heatmap.setDataSet(transformedTestData);
heatmap2 = new OpenLayers.Layer.Heatmap( "Heatmap Layer", map, layer, {visible: false, radius:10}, {isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")});
map.addLayers([layer, heatmap2]);
map.zoomToMaxExtent();
map.zoomIn();
map.setCenter(lonlat, 4);
heatmap.setDataSet(transformedTestData2);
}
window.onload = function(){
init();
};
document.getElementById("tog").onclick = function(){
heatmap.toggle();
};
document.getElementById("tog2").onclick = function(){
heatmap2.toggle();
};
</script>
</html>
|
|
1 |
|
|
Multiple Heatmap Layers (Heatmap.js)
Hello -- I apologize in advance for the rookie question, but I'm trying to create a page with toggle buttons for multiple heatmap layers. I'd like to be able to turn off/on different heatmap layers. I've included my code below, I'm getting the first heatmap layer to render, but I can't seem to get the second layer to render via the toggle button.
I think the problem might be the way I'm defining var's TestData and TestData2. I'm not sure if there is a better way to define multiple "data" variables"
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Heatmap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
margin:0;
padding:0;
font-family:Arial;
}
h1 {
margin-bottom:10px;
}
#main {
position:relative;
width:1020px;
padding:20px;
margin:auto;
}
#heatmapArea {
position:relative;
float:left;
width:800px;
height:600px;
border:1px dashed black;
}
#configArea {
position:relative;
float:left;
width:200px;
padding:15px;
padding-top:0;
padding-right:0;
}
.btn {
margin-top:25px;
padding:10px 20px 10px 20px;
-moz-border-radius:15px;
-o-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
border:2px solid black;
cursor:pointer;
color:white;
background-color:black;
}
#gen:hover{
background-color:grey;
color:black;
}
textarea{
width:260px;
padding:10px;
height:200px;
}
h2{
margin-top:0;
}
</style>
<link rel="shortcut icon" type="image/png" href="" />
</head>
<body>
<div id="main">
<h1>OpenLayers Heatmap Overlay</h1>
<div id="heatmapArea">
</div>
<div id="configArea">
<h2>Notes:</h2>
This is an example heatmap overlay.<br /><br />
<div id="tog" class="btn">Toggle HeatmapOverlay</div>
<div id="tog2" class="btn">Toggle HeatmapOverlay 2</div>
</div>
</div>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="../../src/heatmap.js"></script>
<script type="text/javascript" src="../../src/heatmap-openlayers.js"></script>
<script type="text/javascript">
var map, layer, heatmap, heatmap2;
function init(){
var testData={max: 46,data:[{lat: 41.317958, lon:-81.759524, count: 1},
{lat: 39.6785682, lon:-89.706304, count: 1},
{lat: 33.1199456, lon:-117.3237695, count: 1},
{lat: 33.572221, lon:-111.8874255, count: 1400},
]
};
var testData2={max: 46,data:[{lat: 34.2863678, lon:-118.4443829, count: 1},
{lat: 35.118237, lon:-118.492091, count: 1650},
{lat: 34.0628248, lon:-117.2482364, count: 1},
{lat: 36.274405, lon:-115.271394, count: 15}
]
};
var transformedTestData = { max: testData.max , data: [] },
data = testData.data,
datalen = data.length,
nudata = [];
var transformedTestData2 = { max: testData2.max , data: [] },
data = testData2.data,
datalen = data.length,
nudata = [];
// in order to use the OpenLayers Heatmap Layer we have to transform our data into
// { max: <max>, data: [{lonlat: <OpenLayers.LonLat>, count: <count>},...]}
var proj4326 = new OpenLayers.Projection("EPSG:4326");
var projmerc = new OpenLayers.Projection("EPSG:900913");
var lonlat = new OpenLayers.LonLat(-98.35, 39.5); //center of USA
lonlat.transform(proj4326, projmerc);
while(datalen--){
nudata.push({
lonlat: new OpenLayers.LonLat(data[datalen].lon, data[datalen].lat),
count: data[datalen].count
});
}
transformedTestData.data = nudata;
transformedTestData2.data = nudata;
map = new OpenLayers.Map( 'heatmapArea');
layer = new OpenLayers.Layer.OSM();
// create our heatmap layer
heatmap = new OpenLayers.Layer.Heatmap( "Heatmap Layer", map, layer, {visible: true, radius:10}, {isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")});
map.addLayers([layer, heatmap]);
map.zoomToMaxExtent();
map.zoomIn();
map.setCenter(lonlat, 4);
heatmap.setDataSet(transformedTestData);
heatmap2 = new OpenLayers.Layer.Heatmap( "Heatmap Layer", map, layer, {visible: false, radius:10}, {isBaseLayer: false, opacity: 0.3, projection: new OpenLayers.Projection("EPSG:4326")});
map.addLayers([layer, heatmap2]);
map.zoomToMaxExtent();
map.zoomIn();
map.setCenter(lonlat, 4);
heatmap.setDataSet(transformedTestData2);
}
window.onload = function(){
init();
};
document.getElementById("tog").onclick = function(){
heatmap.toggle();
};
document.getElementById("tog2").onclick = function(){
heatmap2.toggle();
};
</script>
</html>
NOTICE: help.openstreetmap.org is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum