OS Thematic - Example 1

<script type="text/javascript"
    src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=---YOUR-API-KEY-HERE---"></script>
<script type="text/javascript" src="os_thematic.js"></script>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var osMap = new OpenSpace.Map('map');
        osMap.setCenter(new OpenSpace.MapPoint(400000, 400000), 1);

        var ost = new OSThematic(osMap);

        ost.setData([
            { 'ons_code': 'E15000001', 'value': 477.1},
            { 'ons_code': 'E15000002', 'value': 484.6},
            { 'ons_code': 'E15000003', 'value': 479},
            { 'ons_code': 'E15000004', 'value': 483.4},
            { 'ons_code': 'E15000005', 'value': 480.6},
            { 'ons_code': 'E15000006', 'value': 539.1},
            { 'ons_code': 'E15000007', 'value': 617.8},
            { 'ons_code': 'E15000008', 'value': 567},
            { 'ons_code': 'E15000009', 'value': 495.6},
            { 'ons_code': 'S15000001', 'value': 518.2},
            { 'ons_code': 'W08000001', 'value': 479.4}
        ]);
        
        ost.setColours(['#001A66', '#0033CC', '#99ADEB']);
        ost.setOpacity(0.7);
        ost.setLayers(["EUR"]);

        ost.drawMap();
    });
</script>

<div id="map"></div>