Possible refactoring ideas?

[pmackay]

I've been looking a bit at the demo site code and would appreciate your feedback on a few thoughts:

1. Could this site benefit from using a system like DocPad or Jekyll? Each of the maps has a bunch of repeated code so I was wondering being able to factor that out into separate header/footer files could be useful.
2. It might help to organise more of the files into sub-directories. There seems to be a lot of image and JS files in the root which makes it a little hard to distinguish file types. Doing (1) might help with this.
3. As I think I suggested on one Discourse post, it could be cool to separate out the overpass config outside of other HTML/JS code.

I'd be interested in exploring some of this if that would be helpful. And if there are reasons why these ideas are not worth taking further, thats totally fine!

[pmackay]

And some of this would hopefully make creating new maps simpler, which could help with #27, #38, #56?

[species]

Thanks for your ideas!

At first, I'm no professional JS programmer, I haven't dug into sophisticated template engines or something else yet. My programming style is 90's JS, and I am only slowly getting used to new concepts like using callback functions and objects everywhere.
But the code is already getting a mess, and more structure would be nice!

1. Indeed, there is a lot of shared code in each map. A template engine would be nice. Currently i'm running diff/patch if I have to change something in the API that affects all map files ;-)
2. I'm open to suggestions here! The directory structure is simply grown without much structure :-)
3. Generating overpass queries out of some config should be a library itself, I agree. There are other parts that should be split into reusable libraries too, like the popup and the BBOX download handler for checking if the POIs in the area is already in cache.

But I have to admit I have no clue how to write or encapsulate JS functions into libraries or classes according to today's standards. Simply put all functions in a .js file, pack them into a object or even build a npm package?

If you have suggestions how to do this or pointing me to a tutorial how to create reusable libs nowadays I would be thankful!
Maybe we can work together in bringing some more structure into this code?

[pmackay]

Cool :)

For a template engine would you consider Jekyll or DocPad? I know Jekyll pretty well. Not used DocPad other than to try installing the http://transformap.co/ site but can see its pretty flexible and of course already used in TransforMap! Given the strong JS bias on this project it might make more sense?

If DocPad was used, 2 would be handled as it has lots of plugins for processing CSS and JS, plus places for vendor scripts, etc.

Perhaps doing 1 and 2 would be a good first step then could refactor the JS code in more detail? Happy to explore some ideas on this.