search

osm-americana / openstreetmap-americana

A quintessentially American map style
https://americanamap.org
Creative Commons Zero v1.0 Universal
183 stars 59 forks source link

Break up `LegendControl` #782

Open 1ec5 opened 1 year ago

1ec5 commented 1 year ago

The legend feature is currently implemented as a monolithic LegendControl class responsible for generating its entire contents. This includes two separate code paths, one for statically configured sections and another for the more dynamic “Route markers” section: https://github.com/ZeLonewolf/openstreetmap-americana/pull/773#discussion_r1101911490. legend_control.js is terribly difficult to follow due to its length. We should make it more modular and break it up into multiple classes.

The only reason this class wound up being monolithic in #632, other than laziness on my part, is that various parts of it require interacting with the Map object for feature querying and style introspection. It seemed risky performance-wise to keep redundant references to it from multiple objects with potentially different lifetimes. But I’m open to ideas about how to better structure this code. It would be pretty silly to keep it all as one class if we manage to factor it out as a plugin down the line.

quincylvania commented 1 month ago

Adding a legend to OpenTrailMap has become a priority for us. I'd be interested in helping to generalize the Americana legend if it looks like it would work for us. Could someone point me in the right direction?

1ec5 commented 1 month ago

The control is primarily implemented in https://github.com/osm-americana/openstreetmap-americana/blob/f9a8682ea7f24e4ec604b8a2199c17f0fec0832d/src/js/legend_control.js and configured in https://github.com/osm-americana/openstreetmap-americana/blob/f9a8682ea7f24e4ec604b8a2199c17f0fec0832d/src/js/legend_config.js. The legend rows are styled in this stylesheet:

https://github.com/osm-americana/openstreetmap-americana/blob/f9a8682ea7f24e4ec604b8a2199c17f0fec0832d/src/index.html#L37-L90

and structured according to this template:

https://github.com/osm-americana/openstreetmap-americana/blob/f9a8682ea7f24e4ec604b8a2199c17f0fec0832d/src/index.html#L119-L161

I took a pure HTML+CSS+JS approach so that it would have as few external dependencies as possible, so that any future plugin would be more versatile.