show static map image instead of mapbox

[rcst]

Hi,

just as the title says: I got an image of our route network that I simply want to display. I managed to insert a simple image tag (overview.pug):

     if config.showMap
      .map.ml-4.h-full.w-full(id="system_map")
        img(src='/img/map.png')

      //- Use #{variable} format to inject values from pug to client side js
      // script.
      //   (function() {
      //     var geojson = !{JSON.stringify(geojson) || '\'\''};
      //     createSystemMap('system_map', geojson);
      //   })();

Of course img/map.png does not yet reside inside the output folder. Is there a way to have PUG copy this file into the respective output location? I mount-binding a folder into the docker container, so that the location of the image is correct, from within the docker container.

Any hint much appreciated.

[brendannee]

Good question. There are a few ways to make this work

• Host the map image at some other URL (maybe your website already has a CMS like Wordpress) and just put the full URL in the img src tag

• Update this function

  gtfs-to-html/lib/file-utils.js

  Line 104 in 21471aa

  export function copyStaticAssets(exportPath) {

  to copy images from a specific folder into the output folder. You could put images in public/images or you could put them in your custom template folder.

• You could base64 encode the image and include it directly in the pug template like https://elmah.io/tools/base64-image-encoder/

Let me know if any of these options would work well.

[rcst]

Thanks for you suggestions. We now opted for simply copying the image into the resulting output (html) folder and putting the image's file path into overview.pug.

However, I now see that on the timetable pages, each table get's to show a route-specific map as well. We also have route specific schematic maps and I'd like to insert them as well. For this purpose I could add another column into the timetables.txt - say column map_path. Is it possible to access the content of this field so I can dynamically set varying image paths for each table? Or would you suggest another way?

The reason why I think it's necessary to have this done by pug (as opposed to hard coding the filepath) is that some of the routes are shown collectively on the same schematic map because their are sharing a larger part and individually branch off.

[brendannee]

I'd suggest naming your map images to exactly match the route_short_name of each route (or route_id if you prefer). So like 292.jpg for route 292. Then in your custom template you can just have it load an image. You'll still need to copy in the images to your output folder, or host them somewhere else.

Because each timetable page can have multiple timetables and each timetable could be for multiple routes, you'd need to do something like

each route in _.uniqBy(_.flatMap(timetablePage.consolidatedTimetables, timetable => timetable.routes), 'route_id')
  img(src=`${config.assetPath}images/${route.route_short_name}.jpg`)

This would load two maps if it is a multi-route timetable. Instead of you could name images based on timetable_page_id if you have combined images for multi-route timetables.

img(src=${config.assetPath}images/${timetablePage.timetable_page_id}.jpg)

You can set your timetable_page_id to be anything you'd like, so it could exactly match the route_short_name to make it easy to manage map images.