We’re into March! After meeting with the client, a few changes are needed.

Colouration

Working from the chloropleth example, I’ve chosen 5 colours (cyan = #0080ff, red = #ff0000′, yellow = #ffff00, blue = #0000ff’ and green = #00ff00). This choice was inspired by Education Scotland’s map.)

In the geoJSON file, each feature (i.e. each LA) has an extra line in the ‘properties’ piece: “colour_code”:3 //BMR 2014_02_21.

The code to decide colours is
function getLAcolour(d) {
  return d == 1  ? ‘#0080ff’:
            d == 2  ? ‘#ff0000’:
           d == 3  ? ‘#ffff00’:
           d == 4  ? ‘#0000ff’:
           ‘#00ff00’;
} // end getLAcolour()

Then there’s a function to create a style object:
function laStyle(feature) {
    return {
        fillColor: getLAcolour(feature.properties.colour_code),
       weight: 2,
       opacity: 1,
       color: ‘white’,
       dashArray: ‘3’,
       fillOpacity: 0.7,
       fillOpacity: 0.4
   };
} //end laStyle(feature)

Then the geoJSON function does the heavy lifting:
L.geoJson(laBoundaryData, {style: laStyle}).addTo(laLayerGroup);

So the whole effect looks like this:It’s deliberately similar in look to this map of constituencies and MSP activities:I’ve also moved the link to © data and acknowledgements to a second line in the acks piece at the bottom of the map, so far less screen area is taken up by non-map things. The instructions will go onto a pop-out pane access from a big ? on an edge of the map. Currently they clutter things:

Calculating LA boundaries and extrema: how I did it

I do not claim this was the most efficient way! The following is an expanded write-up of a previous blog entry.

1. Obtain up to date shape files from the Ordnance Survey (BoundaryLine is the relevant product.)
2. Start a new project in QGIS.
3. Do Layer > Add vector layer… and select district_borough_unitary region.
4. Make the layer editable.
5. Select and cut out the non-Scottish features.
6. Save the project as Scotland.
7. Select each LA in turn, then do Vector > Geometry tools > Simplify geometries. The options I used were: but with a different file for each LA. For example, Shetland’s 160,883 vertices were reduced to 5416.
8. Select the newly-created object, then do Layer > Save selection as vector file, with options

So now I had 32 separate geoJSON files. To combine them, I used the process described here to make a single laBoundaryData.js file. That’s my geoJSON file on which the above styling magic works.

Finding LA extrema

In future versions of this map, I’ll want to zoom into individual LAs. The easy way to do this will be (I think) to find the furthest north, south, east, west points of each LA. So I adapted my code to find Scotland’s extrema to work on each LA:
function drawMap() {
    //BMR 2014_02_25
    //find extreme points
    var north = 0;
    var south = 90;
    var west = 90;
    var east = -90;
 
    for (var i = 0; i < coordinates.length; i++) {
        var laDatum = coordinates[i];
        // the other way round from the getScotlandBounds because geoJSON latlongs are in the opposite order to leaflet latlogns
        var longitude = laDatum[0];
        var latitude = laDatum[1];

        if (latitude > north) {
            north = latitude;
        //end if

        if (latitude < south) {
            south = latitude;
        //end if

        if (longitude < west) {
            west = longitude;
        //end if

        if (longitude > east) {
            east = longitude;
        //end if
    //end for

    document.write(“north = ” + north + “, south = ” + south + “, west = ” + west + “, east = ” + east);

}// end drawMap

It’s a complete hack but I copied, pasted and edited the results into my laData.js file to get line such as
    [“Angus”, “http://www.angus.gov.uk/commcouncil&#8221;, 
        56.986816427679120, 56.46164866362316, -3.407021822671358, -2.420365421269425],

If I’d been clever, I’d have made the script write the extrema data to the file. But this is a one-off and so it would have taken longer to write code to do it than to do it myself.

Switching off unwanted polygons for markerClusterGroups

Awe and respect to the leaflet programming folk. I feared I might need to dig into their actual code to switch off these unwanted polygons. But it’s as simple as adding an option object to the otherwise unoptioned code. That is, from this

L.markerClusterGroup();

to this

L.markerClusterGroup({showCoverageOnHover: false});