Welcome to the Safer Street Maker, where you can create the active travel network of your dreams!
It's very early days of the site, so don't be surprised if you encounter the odd issue.
You can place various active travel features on your area. The idea is to use these to instigate local conversations about improving our towns and cities, or you can use these to respond to council consultations on infrastructure projects (I like to respond with what I think a better scheme would be).
You can now also generate html to embed your map in another web page, so if you want to illustrate a blog post with an infrastructure map, you now can.
Modal filters are designed to stop motorised vehicles from passing. This is usually done with either bollards and planters, or Automatic Number Plate Recognition cameras (ANPR). To add a modal filter, click the Green Circle button in the toolbar on the left-hand side of the map, and just click on the map to place one. Once placed, you can click on one to delete it, or drag it to move it.
Modal filters are designed to stop all motorised vehicles APART FROM BUSES from passing. This is usually done with either mechanically raised bollards, or Automatic Number Plate Recognition cameras (ANPR). To add a bus gate, right-click the Green Circle button in the toolbar on the left-hand side of the map, select the bus icon, and just click on the map to place one. Once placed, you can click on one to delete it, or drag it to move it.
Most people think of a mobility lane as a cycle lane, and it's true that the majority of traffic on them would be people on bicycles. However, by designating them as Mobility lanes, this indicates that they are designed to also be used by people using mobility scooters, wheelchairs, and electric scooters. And to enable this requires a better design of a lane (including being wide enough to allow passing).
To add a mobility lane , click on the Cycle button in the toolbar. You draw the lane by placing a serious of points. When done, click on the last point added, and you will leave lane creation mode.
To edit a lane, click anywhere on it to enter edit mode. You can click on the fainter squares to add an extra point to the line, if you need one. Whilst in edit mode, you will see a popup, which currently has a button to delete the whole lane.
I find that the best way of placing a lane is to put the start and end points of the lane whilst in create mode, click on the last point you added to exit create mode, then click anywhere on the line to go into edit mode. You can then place the extra points to get the lane exactly where you want it.
These work in exactly the same way as mobility lanes. To add one, click on the Tram button in the toolbar. You draw the lane by placing a serious of points. When done, click on the last point added, and you will leave line creation mode.
These are streets that are not accessible to vehicles (with possible limited exceptions for deliveries). Again, these work in exactly the same way as mobility lanes. To add one, click on the No Vehicles button in the toolbar. You draw the lane by placing a serious of points. When done, click on the last point added, and you will leave line creation mode.
These are streets around a school that are not accessible to vehicles during drop-off and pick-up times. Again, these work in exactly the same way as mobility lanes. To add one, click on the No Vehicles button in the toolbar. You draw the lane by placing a serious of points. When done, click on the last point added, and you will leave line creation mode.
LTNs, or Low Traffic Neighbourhoods/Healthy Living Zones, are residential areas that restrict through-traffic, usually by placing modal filters on a group of roads. They are a critical part of a safe cycling network, as they provide a safe cycling environment on roads that cannot have mobility lanes on them (often due to on-street parking).
Cars can still get to everywhere they could previously, but may have to take a slightly longer route. That hasn't stopped
You draw a polygon in much the same way as you draw a line, this time clicking on the first point added to complete the shape. Clicking on one allows you to set the label text for each LTN block.
This feature is to define a set of traffic lights used to control traffic at junctions. This usually includes phases that allow pedestrians to cross the road, however if you want a set of traffic lights that are purely pedestrian crossings, use the Pedestrian Crossing Traffic Lights feature.
To add a traffic light, click the Traffic Light button in the toolbar on the left-hand side of the map, and just click on the map to place one. Once placed, you can click on one to delete it, or drag it to move it.
This feature is to define a set of traffic lights only used to allow pedestrians to cross a road.
To add a pedestrian crossing traffic light, right-click the Traffic Light button in the toolbar on the left-hand side of the map, click on the Pedestrian Light button, and just click on the map to place one. Once placed, you can click on one to delete it, or drag it to move it.
This feature is to define a zebra crossing, to allow pedestrians to safely cross a road.
To add a zebra crossing, right-click the Traffic Light button in the toolbar on the left-hand side of the map, click on the Zebra Crossing button, and just click on the map to place one. Once placed, you can click on one to delete it, or drag it to move it.
Your maps are currently automatically saved in the browser you are using every time you change the map, either the features or zooming/moving the map. You can use the map management window to create new maps. copy or delete maps, download map files, and open files.
The window consists of a series of action buttons at the top of the window, and a list of all the maps that are currently stored in this browser.
Clicking on the New Map button will bring up a text box to enter a title for the new map. Enter a title and hit the Create button, and a new, blank, map will be created.
Clicking on the Copy Map button will create a new map with the name {current map name}_copy_{x}, where x is the number of copies you've made of that map (so that you don't accidentally overwrite a previous copy you made).
Clicking on the Load File button to open up a file dialog to select the map json file that you want to load to the map.
Clicking on the Save file button will automatically download the map JSON to your device. This will be in the form {current map name}.json. You can then send this files to other devices for you to work on, or to other people for them to work on, or just back-up your map file.
If you wish to see what the file format is, there is an example map you can download that you can look at.
Clicking on the Export to GeoJSON will save the map as a GeoJson file, which you can import into most GIS software programs.
All the maps that are stored in the current browser you are on will be listed in this section. The current map will be in bold at the top of the list, while the other maps will be listed below it. If you wish to switch maps, just click on the one you want to load. Your current map will be saved before swapping. You can also hit the delete button to delete any of the other maps.
The settings window allows you to set the title of the map, see the current zoom level and centre point of the map.
You can choose to make the map read-only, which will remove all the buttons for adding features to the map (but still shows the map management, settings, sharing, and help buttons).
Finally, you can choose which layers are active on the map. Switching a layer off will remove the button from the toolbar and the layer from the legend. So, if you're not interested in adding Tram Lines to your map, you can switch that layer off.
Obviously, you can save the map file and send that to someone, who could upload it to the site, work on it, save it, and send it back to you.
If you have somewhere you can host the json file, you can add a querystring parameter to the url for this site, and it will be automatically loaded. Please note that the file extension must be .json, as otherwise your browser will refuse to download the file.
Furthermore, if you wish to link to different parts of the same map, there are also querystring parameters to enable you to set the zoom level and the centre point of the map:
https://saferstreetmaker.org?map=https://saferstreetmaker.org/Birmigham.json&zoom=14¢re=52.43937399964168,-1.8881893157958987
The current values for zoom and the centre point can be found in the settings window. Additionally, you can add the hide-toolbar=true parameter to remove the whole toolbar from the map.
You can see an example of a link here.
However, if you wish to embed a map in a web page (such as a blog post), you can create your map, open the Settings (by clicking the Cog button in the toolbar), setting the map title, whether the map is in read-only mode (so no one can change it), and selecting which layers you want visible on the map. Example
With that done, you can click on the Share button in the toolbar. Here, you can enter the dimensions of the map, and whether the toolbar is visible, then hit the Create button. The html needed to embed the map in your web page will be copied to your clipboard, so just go to your page and paste the html into the html of your page.
Be warned: this can be a very large amount of data!
If you're interested, this site uses the leaflet.js mapping library. It's built using parcel.js. The code is hosted on GitHub. This is a public repository, so if you wish to contribute to the project, feel free! The site is hosted on Azure, as a Static Web App, which is free for a ridiculous amount of traffic.