How to use OpenHeatMap within your own site

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;

$(‘#openheatmap_container’).insertOpenHeatMap({ width: mapWidth, height: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://github.com/petewarden/openheatmap/tree/master/website/examples/hello_world/

There are more advanced examples at http://github.com/petewarden/openheatmap/tree/master/website/examples/us_unemployment_county/ and http://github.com/petewarden/openheatmap/tree/master/website/examples/world_bank_data/

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

Cross-domain

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.

Next steps

To make your map interactive and integrated with your own service, you’ll want to look at the Events list to see what behavior you can tie your own code into, and check out the Component API calls to see what customization options you have.