Using Safer Street Maker

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

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.

Mobility Lanes

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.

Tram Lines

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.

Car-free Streets

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.

School Streets

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.

Saving and loading maps

The map is currently automatically saved in the browser you are using. If you wish to either share a map with someone, use it on another device, or have more than one map, click on the Folder icon to open the file menu, and hit the Disk icon to save the current map to a text file on your machine. To load a map, click on the Folder icon to open the file menu, and hit the cloud-like button to select the file you wish to upload.

Example map

There is an example map you can downloadif you want to see what one looks like.

Exporting maps

If you wish to export the map as GeoJSON, for importing it into a mapping application, click on the Folder icon and hit the GeoJSON icon.

Sharing maps

Obviously, you can save the map file and send that to someone, who could upload it to the site.

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.

Tech Details

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.

Support

If you have a GitHub account, you can raise an issue, or you can use that to suggest a feature. You can also message me on Twitter.

Sorry, an error has occurred