How to use OpenHeatMap within your own site

petewarden edited this page Oct 25, 2010 · 20 revisions

OpenHeatMap is packaged as a JQuery plugin 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() {
    width: 800,
    height: 600

function onMapCreated() {
  var map = $.getOpenHeatMap();

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:


You can see the full source to a minimal but complete example at and try it running live at

The component depends on Jquery and you’ll need to also include the OpenHeatMap script from


Because the rendering code is held on the server, you will need to grant cross-domain access if you want to allow it to read the CSV files from your own server. You can download mine from or 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 ""> <cross-domain-policy> <allow-access-from domain="" /> <allow-access-from domain="" />

As an alternative, you can copy the 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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.