Hyphen in map div id prevents display of tiles

[jeremycherfas]

While trying to do this:

See a map after a checkin. This URL for example https://stream.jeremycherfas.net/2023/checked-into-lombra-del-leone

I encountered this error:

The map does not display

Some other notes:

I looked in the console, and saw an error: "Uncaught SyntaxError: Unexpected token '-'", filename: 'https://stream.jeremycherfas.net/2023/checked-into-lombra-del-leone', lineno: 301, colno: 28, …}

That line contains var map6fe9a186-a0ed-4660-b8c3-e7e0b52d723c = L.map('map_6fe9a186-a0ed-4660-b8c3-e7e0b52d723c', {

If I simplify the map div's id, from <div id="map_6fe9a186-a0ed-4660-b8c3-e7e0b52d723c" to <div id="map_ and make the same changes in the script the map does then display.

It still gives an error with regard to the use of Stamen tiles, but that is a different issue, which it will be much easier to try and solve when I can be sure that the map will display.

I suppose the function that creates the map div's id needs to be tweaked, but I do not know how to do that.

Give us some context:

• It'd also be really handy if you could tell us the contents of your version.known file
  version = '1.6'
  build = 2023102301

• What database are you using? (e.g. mongo, mysql, postgres)
  mysql

• Any warnings or errors in your admin/diagnostics page?
  See above

• If this is a programming bug, can you include examples of any Micropub / API calls / webhook pings you make? Otherwise please don't worry about what this means!

• Bonus points - are you able to illustrate the issue with a unit test? If so, submit it as a pull request!

[jeremycherfas]

Further information. The last checkin that did display a map is this one https://stream.jeremycherfas.net/2022/checked-into-roasting-plant-coffee

I note that the source for that includes <div id="map_c8f9be4574522381f79f4ee0a7da6ba2" style="height: 250px"></div>

I'm guessing that sometime between 2022-05-30 and 2022-06-15, when I checked in at https://stream.jeremycherfas.net/2022/checked-into-caff%C3%A8-ciampini something must have changed in the generation of the IDs, which are now 40 characters in total, instead of 36.

[cdn]

Further information. The last checkin that did display a map is this one https://stream.jeremycherfas.net/2022/checked-into-roasting-plant-coffee

I note that the source for that includes <div id="map_c8f9be4574522381f79f4ee0a7da6ba2" style="height: 250px"></div>

I'm guessing that sometime between 2022-05-30 and 2022-06-15, when I checked in at https://stream.jeremycherfas.net/2022/checked-into-caff%C3%A8-ciampini something must have changed in the generation of the IDs, which are now 40 characters in total, instead of 36.

My guess would be something changed with the uuid library ramsey/uuid

The code that creates the html for the map div:

IdnoPlugins/Checkin/templates/default/entity/Checkin.tpl.php#L25

[sknebel]

I'd even blame the introduction of the uuid library vs the previous method to generate UUIDs - I'm unclear when this was released, when you deployed it, ... so the 2 years delay might be possible? 9d1fe1b

Anyways, the best fix is probably changing the template so instead of directly putting the UUID in it uses the UUID with - replaced by _ or something along those lines.