manzanotti / saferstreetmaker Goto Github PK

The current layer selector doesn't give you any indication of what each layer actually looks like on the map. Sure, you can work it out by turning each layer off and on, but that's not great.

Add a legend showing what each piece of infrastructure looks like on the map.

The CSS file produced is 2MB in size.

Missing id field, I think I just missed checking it in.

Original implementation required downloading packages to work. Update parceljs config and all ts code to work with that. Alias appears to be the config section required.

Probably needs to wait for the ability to select which map is displayed, but have a split-screen mode, where two maps can be shown next to each other.

Could be good for displaying different suggestions for an area.

To completely clear the map of all data.

It would really allow sharing of maps to be able to load a file from a remote location, and include that location in the url.

Probably just have the one marker whether they are for pedestrian lights or full junctions.

Would be nice to allow the user to orient them against the road, however that could be a later feature.

Requires #105 to be implemented, as this feature will be in a group with #56.

Will need to change a lot of toolbar actions from directly calling methods on the container and manager classes, to using pubsub to publish messages to initiate actions.

This will require some kind of line with arrows on it, to indicate the direction of lane.

The map centre and zoom levels are passed into the control when it is opened, so if the user moves the map or changes the zoom level, the control will have to be closed and re-opened for these to be reflected in the iframe code created.

I think that leaflet,js fires events for those two scenarios, but I'll have to check.

I've ended up using both npm and yarn (for reasons...).

Migrate over to yarn fully.

The map file currently exported is explicitly for the site. Whilst it contains the GeoJSON for the map, it also contains the information required to recreate the individual layers.

Add a button to export just the GeoJSON, so people can import the map into other mapping software.

This currently has to be done locally and pushed up as part of the PR, which isn't ideal.

The layers aren't being cleared before loading in the map file.

Allow the user to set the title of the map.

It's my preferred term for them, not even sure why I didn't use it initially.

Investigate whether this is smaller as Base64-encoded zipped GeoJSON data, Base64-encoded zipped custom data, or url-escaped JSON.

Leaflet-toolbar defaults to 30px wide for the toolbar.

I'm tempted to make them 60px wide for all devices, though maybe it might be worth only doing that for high DPI devices

For some reason, when saving the map, there was a period when the line coordinates was being nested inside an extra array. I have not been able to work out why that happened, but in the meantime, just check to see if there is an extra level of nesting when loading the lane.

Seems to be since adding Tailwind CSS to the project.

There's no need for this to be an instance class, it's just a list of strings.

It should just default to a general location and zoom level

They are currently being nested inside an array, when they shouldn't be.

The loading code needs to cope with this, as it's been like this since November 22.

As OneDrive links to files do not include file extensions, JSON files stored on OneDrive cannot be loaded by the site, due to browser security restrictions.

There is, however, a OneDrive API. Investigate whether using that will allow map files to be loaded from there, and possibly saved to there too.

Given the name of the class is EventTopics, the properties and values themselves do not need the word 'topic' in them.

Split it out of index.css

It's dealing with files, so it should be called FileManager

As Googe Drive links to files do not include file extensions, JSON files stored on Googe Drive cannot be loaded by the site, due to browser security restrictions.

There is, however, a Googe Drive API. Investigate whether using that will allow map files to be loaded from there, and possibly saved to there too.

Another line layer, to represent school streets.

Look at https://playwright.dev/

Might be easier to add unit tests for the classes first, rather than browser-based tests, though both would be good.

Could use this to indicate to the user when a map has not been saved to a file, and has only been updated in the browser's local storage.

Parceljs doesn't run any TypeScript type checking.

It can't be turned on currently, due to the lack of typescript definition files for the following leaflet plugins:

leaflet-draw
leaflet-toolbar
leaflet-arrowheads
leaflet-polyline
leaflet-path-drag

So, would have to look into producing typing files for those.

Unselected layers to be removed from the toolbar, legend, and layer control.

Have settings for dimensions of iframe, file location (must have the json file extension) or embed the map in the iframe (use #31 for that).

The sharing popup asks the user to set the dimensions of the embedded map, however it gives no visual indicator as to what section of the map will be displayed in that embedded map.

Add a shaded rectangle over the centre of the map that shows the area that will be displayed.

When embedding a map in a blog post, there's no need to be able to change the map.

Add a setting that removes the drawing toolbar, and makes all map elements non-editable.

Pedestrianised treets, basically. Make them green. Might need to make the modal filters look different to so they don't blend in to these too much.

To one of the more modern css processors, like sass.

Would be nice to allow the user to orient them against the road, however that could be a later feature.

Requires #105 to be implemented, as this feature will be in a group with #57.

Will need to be able to have a map layer of coloured polygons that users can draw.

Ideally, the user would be able to select the colour of each cell, though maybe initially they can just rotate through a preselected list of colours.