README.md

Concrete Action LDD Datamap

Overview

This software displays data drawn from the London Development Database, a London-wide database that contains successful planning applications that propose a change to housing units, non-residential floorspace or open space. The London Development Database has now been superseded and replaced by the London Planning Hub, but the database still contains interesting historical data from around 2006 until July 2020.

Installing the map

The mapping software should be installed on a web server. It can be installed simply by uploading it to an appropriate directory using an FTP client, such as Filezilla. Once installed, direct your browser to the directory to access it.

Using the map

Select the layer you wish to view from the ‘Add map layer’ dropdown and then press the [+] button. The layer will take a few moments to load.

Each layer has 4 tabs:

  • Filters: This allows you to filter the data, searching for particular addresses, descriptions, statuses, boroughs and dates. You can also filter based on the level of housing impact each application has (i.e. level of net change in units).
  • Summary: This gives summary stats by borough for housing impact. These stats may not be representative of overall change, depending how the query is configured.
  • List: A list of all applications in the dataset (as filtered). The ‘goto’ button jumps to this application on the map, the ‘view’ button jumps and opens the details tab.
  • Details: This gives key details for the selected application, including changes to housing, non-residential floorspace and open space.

You can select applications either by clicking them on the map, or by pressing ‘goto’ or ‘view’ in the list tab.

Adding additional data layers

You can create new data layers from the LDD using the ‘processLDDtoMapJson.py’ python script. This requires that you have the LDD installed on your system.`

The mapping software does not autodetect these new datasets, instead you need to add code to index.html in two places so that the new map is loaded. This is because you need to add annotation and naming to the dataset, which the json file cannot provide.

This requires basic knowledge of javascript and html.


            var layerPalette = {
              "guide":
                  { add: function(){
                      var ctlLayer = new userGuide(self.meta);
                      self.layers.push({id:"guide", layerType: "guide", tabName: "About", layerObj: ctlLayer, mapActive: false});
                    }
                  }, 
              "eshpa":
                  { add: function(){ 
                      lddLayer = new lddPlanningMapLayer(self.meta, "datasets/planapp_sh.json.min", "eshpa", "Planning applications affecting existing social housing in London", "housingPcShift", "o");
                      self.layers.push({id: "eshpa", layerType: "data", tabName: "LDD-SH", layerObj: lddLayer, mapActive: false});
                    }
                  },
               "alahpa":
                  { add: function(){ 
                      lddLayer = new lddPlanningMapLayer(self.meta, "datasets/planapp_la.json.min", "alahpa", "Planning applications affecting all local authority housing in London", "housingPcShift", "pp");
                      self.layers.push({id: "alahpa", layerType: "data", tabName: "LDD-LA", layerObj: lddLayer, mapActive: false});
                    }
                },
               "b1toc3prior":
                  { add: function(){ 
                      lddLayer = new lddPlanningMapLayer(self.meta, "datasets/planapp_b1toc3_prior.json", "b1toc3prior", "Prior approval of office to residential conversion (B1 to C3)", "housingImpact", "dg");
                      self.layers.push({id: "b1toc3prior", layerType: "data", tabName: "LDD-B1toC3pr", layerObj: lddLayer, mapActive: false});
                    }
                  }, 
               "b1toc3full":
                  { add: function(){ 
                      lddLayer = new lddPlanningMapLayer(self.meta, "datasets/planapp_b1toc3_fullapp.json", "b1toc3full", "Planning applications for office to residential conversion (B1 to C3)", "housingImpact", "pk");
                      self.layers.push({id: "b1toc3full", layerType: "data", tabName: "LDD-B1toC3app", layerObj: lddLayer, mapActive: false});
                    }
                  } 
            }

Adding a layer is pretty involved. The customisable fields are in pointy brackets.


               "<id of layer>":
                  { add: function(){ 
                      lddLayer = new lddPlanningMapLayer(self.meta, "<path of dataset>", "<id of layer>", "<full title of layer>", "<default legend>", "<default colour code>");
                      self.layers.push({id: "<id of layer>", layerType: "data", tabName: "<tab label>", layerObj: lddLayer, mapActive: false});
                    }
                  },

id of layer: This should be a short recognisable code by which you can refer to the layer

path of dataset: Dataset created by the ‘processLDDtoMapJson.py’ python script. Normally this is located in the datasets directory.

full title of layer: The title that will be displayed in the left hand menu when this layer is loaded.

default legend: There are two options for the labels on the displayed planning applications.

  • housingPcShift: The percentage shift in the kind of housing designated in the layer.
  • housingImpact: The net change in units in the kind of housing designated in the layer.

default colour code: Select the default colour for the planning applications for this layer. There are 6 options to choose from.

  • lg: Light Green
  • dg: Dark Green
  • lb: Light Blue
  • o: Orange
  • pk: Pink
  • pp: Purple

tab label: The label for the tab for this map. This needs to be very short, as the tabs have to be kept small.

Once the layer is added to the layer palette array with the variables above, you need to add an option to the ’layerDropDown’ select element, which corresponds to the layer you have selected. The default options are shown below


            <select name="layerDropDown" id="layerDropdown">
                <option value="eshpa" label="Social Housing Planning Applications (existing)">
                      All planning applications in the London Development Database that affect already 
                      existing social housing units (applications that only provide new units will 
                      not be displayed)
                </option>
                <option value="alahpa" label="Local Authority Planning Applications (all)">
                      All planning applications in the London Development Database that build or remove 
                      local authority housing units (i.e. council housing)
                </option>
                <option value="b1toc3prior" label="Office to Resi Convs (B1toC3) Prior Approvals">
                      Prior approvals for office to residential conversions.
                </option>
                <option value="b1toc3full" label="Office to Resi Convs (B1toC3) Applications">
                      Full applications for office to residential conversions.
                </option>
            </select>

The option value requires the id of the layer you have created, as well as a short label and guidance text.

  • value: This must be the id of the layer you wish to create.
  • label: This is the name of the layer that appears in the dropdown menu. It needs to be reasonably brief.
  • The inner text of the option is the guidance text which appears below the dropdown when an option is selected.

Once both the layer is added to the layer palette, and an option for is is added to the layer drop down, it should be possible to load your map. If it doesn’t work, check the console on your browser - you may have made a mistake that is causing an error.

Known issues