↓Skip to main content
Gorilla Tactics

saferstreetmaker.org - release notes for v 0.7.0

·4 mins

Whilst I have every intention of writing an intro post to saferstreetmaker.org detailing why I’m doing this and the initial decisions behind the tech and architecture decisions, I want to start putting some release notes together when the site gets a reasonable update.

This update started as wanting to add bus gates to the site, but it ended up ballooning into a massive rewrite of a lot of the code!

I feel that I’m pretty close to being able to call it a version 1 of the software, which will make me very happy, I think adding zebra crossings and traffic light layers may be enough to justify that moniker.

Please note that the site definitely is easier to use on a computer rather than a phone when it comes to creating maps. I do intend to see if I can improve that going forward, but I’m not convinced you will ever be able to get the level of precision with touch that you can with a mouse.

The headlines of this update:

  • Added Bus Gates
  • New toolbar
  • All popup windows now show in the middle of the screen
  • Introduced map file management options
  • Made the Setting popup layer selection feature actually work
  • Massively reduced the size of the hash for embedding a map on a web page (75% in my test file)
  • Various other fixes

#In more detail:

##Added Bus Gates.

If you have an existing map, then you will first need to go into the settings and enable bus gates.

The settings popup for activating the bus gate layer

To add them to the map, either right-click or long-press on the Modal Filter button to bring up the bus gate button.

The filters group button fully opened to show the bus gate button

Clicking it will then swap it with the modal filter button (so do the same to swap back to modal filters). Then simply click on the map anywhere you wish to put a bus gate.

A bus gate has been added to the map

##New toolbar

Completely rewrote the toolbar, to introduce group buttons for similar map features (e.g. bus gates and modal filters). Buttons are a different colour when hovering over them, to make it more obvious which one you are on. Buttons are now shaded and bordered when that button has been selected, so you can work out which feature you are adding to the map

A bordered grey button indicating that the mobility lane layer is active, and a slightly greyed car-free street showing the mouse is hovering over it

##Popup windows

All popup windows (map management, settings, and sharing) now show up in the middle of the window, rather than next to their toolbar button).

##Map file management

Map file management is now a single icon that brings up a window with your options. Can now create a new map. All maps stored in your browser’s local storage are now listed, and you can click to switch between them or delete one.

Map File Management Popup

Load map window now only shows JSON files to upload.

##Settings popup

Actually fixed it so that the switches to turn each layer on and off works. Turning a layer off will remove the button for it from the toolbar, its entry on the legend, and will remove the layer from the map. Please note that if there is any data in that layer, it will still be saved, so you will not lose the data by doing this.

##Sharing popup

When using the sharing window to create HTML to allow you to embed a map in a web page, the hash that is created is now compressed. For my test map, that reduced the size from 40kB to 10kB, which is a level of compression that I’m very happy with.

##Various fixes

Fixed the help popup not allowing you to see all the text or close buttons properly. Made LTN cells have some fill colour again, as I prefer them like that. Changed the colour from orange to purple, as tramlines are already purple. Please note that any existing LTNs will stay orange, as I store the colour of the LTN in the map data. This is because I have the intention of adding the ability to set the colour of each LTN.

Added a link to saferstreetmaker.org to the bottom of the map, so that people can get to the site from a map embedded in a web page. Moved map centre and zoom level to settings, rather than being separate. Split out more of the styling to separate files, rather than having most of them in index.css

Finally, I’ve refactored a lot of the existing code, as I get more of a handle on how Leaflet.js (the library I am using for the map functionality), and get the architecture of the code sorted in my head. There is, however, still a lot more to do on this front!

Let me know if you encounter any bugs or have ideas for features, either on [twiiter] (https://twitter.com/manzanotti) or on GitHub.

↑