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;
  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