Skip to content

Instantly share code, notes, and snippets.

@jaymcaliley
Created December 3, 2011 16:43
Show Gist options
  • Save jaymcaliley/1427530 to your computer and use it in GitHub Desktop.
Save jaymcaliley/1427530 to your computer and use it in GitHub Desktop.
myHeatmap API integration example -- OpenLayers and OpenStreetMap
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>myHeatmap API Example -- OpenLayers and OpenStreetMap</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script src="https://s3.amazonaws.com/myheatmap_api/mHm.js"></script>
<script src="mhm.js"></script>
</head>
<body onload="init()">
<h1 id="title">myHeatmap Overlay Example</h1>
<p>
This file should be placed in the examples folder of your OpenLayers
distribution. Download the distribution here:
<a href="http://openlayers.org/download/OpenLayers-2.11.tar.gz">
OpenLayers-2.11.tar.gz
</a>
</p>
<p>
You should also have a javascript file called mhm.js in the same
directory. For more information,
<a href="https://gist.github.com/1427530">get the Gist</a>.
</p>
<p>&nbsp;</p>
<div id="map" class="smallmap" style="width: 800px; height:480px"></div>
</body>
</html>
var map;
function init() {
map = new OpenLayers.Map({
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
units: "m",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(
-20037508.34, -20037508.34, 20037508.34, 20037508.34
)
});
var osm = new OpenLayers.Layer.OSM();
var token = "Lfprs6BjycggmYjye9fG" // Replace this with your myHeatmap API token
var set_id = "20" // Replace this with the set id for your overlay data
var mhm = new OpenLayers.Layer.mHm( "My Heatmap", set_id, token, {} );
map.addLayers([osm, mhm]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(
new OpenLayers.LonLat(-95, 39).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
),
4
);
}
@jaymcaliley
Copy link
Author

myHeatmap API Example

Integration with OpenLayers and OpenStreetMap

To use this example, download the OpenLayers source distribution and place these two files in the examples folder.

You can view a live copy of this example here. For more information on the myHeatmap API, check out the docs.

This example also requires an OpenLayers class for myHeatmap overlay layers, hosted here: http://s3.amazonaws.com/myheatmap_api/mHm.js

@articthink
Copy link

Hey there,

..Just to let you know the openlayers source distribution link above doesn't work.)

Best,

Mike

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment