2014_03_04 progress re LA colours, calculating LA extrema and switching off unwanted polygons for markerClusterGroups

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


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’:
} // 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:Screen Shot 2014-03-04 at 16.28.40It’s deliberately similar in look to this map of constituencies and MSP activities:Screen Shot 2014-03-04 at 16.29.32I’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:Screen Shot 2014-03-04 at 16.34.14

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:Screen Shot 2014-03-04 at 17.07.58 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 optionsScreen Shot 2014-03-04 at 17.09.30

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


to this

L.markerClusterGroup({showCoverageOnHover: false});


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s