OS Thematic - Example 2

<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(538500, 180000), 6);

        var ost = new OSThematic(osMap);

        ost.setData([
            { 'ons_code': 'E09000002', 'value': 17.7 },
            { 'ons_code': 'E09000003', 'value': 25.6 },
            { 'ons_code': 'E09000004', 'value': 11.4 },
            { 'ons_code': 'E09000005', 'value': 30.1 },
            { 'ons_code': 'E09000006', 'value': 13.3 },
            { 'ons_code': 'E09000007', 'value': 32.2 },
            { 'ons_code': 'E09000001', 'value': 35.9 },
            { 'ons_code': 'E09000008', 'value': 21 },
            { 'ons_code': 'E09000009', 'value': 27.5 },
            { 'ons_code': 'E09000010', 'value': 22.2 },
            { 'ons_code': 'E09000011', 'value': 19.8 },
            { 'ons_code': 'E09000012', 'value': 29 },
            { 'ons_code': 'E09000013', 'value': 31.7 },
            { 'ons_code': 'E09000014', 'value': 31.5 },
            { 'ons_code': 'E09000015', 'value': 21.7 },
            { 'ons_code': 'E09000016', 'value': 10.6 },
            { 'ons_code': 'E09000017', 'value': 18.1 },
            { 'ons_code': 'E09000018', 'value': 23.4 },
            { 'ons_code': 'E09000019', 'value': 27 },
            { 'ons_code': 'E09000020', 'value': 35.8 },
            { 'ons_code': 'E09000021', 'value': 22.5 },
            { 'ons_code': 'E09000022', 'value': 29.3 },
            { 'ons_code': 'E09000023', 'value': 24.3 },
            { 'ons_code': 'E09000024', 'value': 24.8 },
            { 'ons_code': 'E09000025', 'value': 34.1 },
            { 'ons_code': 'E09000026', 'value': 22.9 },
            { 'ons_code': 'E09000027', 'value': 21.8 },
            { 'ons_code': 'E09000028', 'value': 23.7 },
            { 'ons_code': 'E09000029', 'value': 15.9 },
            { 'ons_code': 'E09000030', 'value': 32.6 },
            { 'ons_code': 'E09000031', 'value': 25.9 },
            { 'ons_code': 'E09000032', 'value': 31.7 },
            { 'ons_code': 'E09000033', 'value': 39.7 }
        ]);
        
        ost.setColours(['#663D00', '#B26B00', '#FF9900', '#FFB84D', '#FFD699']);
        ost.setBorderColour('white');
        ost.setLayers(["LBO"]);

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

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