OS Thematic - Example 3

<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(306000, 280000), 2);

        var ost = new OSThematic(osMap);

        ost.setData([
            { 'ons_code': 'W06000001', 'value': 69751 },
            { 'ons_code': 'W06000019', 'value': 69814 },
            { 'ons_code': 'W06000013', 'value': 139178 },
            { 'ons_code': 'W06000018', 'value': 178806 },
            { 'ons_code': 'W06000015', 'value': 346090 },
            { 'ons_code': 'W06000010', 'value': 183777 },
            { 'ons_code': 'W06000008', 'value': 75922 },
            { 'ons_code': 'W06000003', 'value': 115228 },
            { 'ons_code': 'W06000004', 'value': 93734 },
            { 'ons_code': 'W06000005', 'value': 152506 },
            { 'ons_code': 'W06000002', 'value': 121874 },
            { 'ons_code': 'W06000024', 'value': 58802 },
            { 'ons_code': 'W06000021', 'value': 91323 },
            { 'ons_code': 'W06000012', 'value': 139812 },
            { 'ons_code': 'W06000022', 'value': 145736 },
            { 'ons_code': 'W06000009', 'value': 122439 },
            { 'ons_code': 'W06000023', 'value': 132976 },
            { 'ons_code': 'W06000016', 'value': 234410 },
            { 'ons_code': 'W06000011', 'value': 239023 },
            { 'ons_code': 'W06000014', 'value': 126336 },
            { 'ons_code': 'W06000020', 'value': 91075 },
            { 'ons_code': 'W06000006', 'value': 134844 }
        ]);
        
        ost.setColours(['#1A661A', '#29A329', '#5CD65C', '#99E699']);
        ost.setNoDataColour('#CCCCCC');
        ost.setNoDataOpacity(0.4);
        ost.setLayers(["UTA"]);

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

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