Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

How to use OpenHeatMap within your own site

petewarden edited this page · 20 revisions

The OpenHeatMap component is designed to be easily be reused by web developers who want to display map data within their own sites. Here’s the code to embed and populate your own heatmap:

$(document).ready(function() {
  var mapWidth = 800;
  var mapHeight = 600;
  insertOpenHeatMapInto(‘#openheatmap_container’, mapWidth, mapHeight);
});

function onMapCreated() {
  var map = getOpenHeatMap();
  map.loadWaysFromFile(‘http://static.openheatmap.com/world_countries.osm’);
  map.loadValuesFromFile(‘hello_data.csv’);
}

That will create a map of the world inside the HTML element with the id ‘openheatmap_container’ inside your page, with the data inside the hello_data.csv file displayed on top of the map. Here’s what that CSV file could look like:

country_code,value
AFG,10
AUS,20
CAN,30
USA,40

You can see a minimal but complete example at http://openheatmap.com/examples/hello_world/

It depends on Jquery and you’ll need to also include the OpenHeatMap script from http://static.openheatmap.com/openheatmap.js

There are more advanced examples at http://openheatmap.com/examples/us_unemployment_county/ and http://openheatmap.com/examples/world_bank_data/

Because the rendering code is held on the openheatmap.com server, you will need to grant cross-domain access if you want to allow it to read the CSV files from your own server. Here’s the contents of a crossdomain.xml file to enable that, you’ll need to save it in the root folder of your webserver:

<?xml version=“1.0”?>
<!DOCTYPE cross-domain-policy SYSTEM “http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd”>
<cross-domain-policy>
<allow-access-from domain=“static.openheatmap.com” />
<allow-access-from domain=“static.openheatmap.com.s3.amazonaws.com” />
</cross-domain-policy>

As an alternative, you can copy the http://static.openheatmap.com/openheatmap.swf file over to your local server, and supply your local URL as the optional fourth argument to insertOpenHeatMapInto(). If you take that route you won’t get automatically get updates and bug fixes to the rendering component, and you may want to copy over the openheatmap.js file also to ensure everything you need is local.

Something went wrong with that request. Please try again.