Add Bing Aerial Imagery

[tordans]

Now that maxar is gone, the app lacks a good secondary aerial image provider.

I tried adding Bing today but failed. The main issue is, that the app uses Leaflet and Bing has some crude special format that does not work out of the box.

Maybe someone with more knowledge of Leaflet and TypeScript can solve this…

Here are some pointers

• Official guide on how to add Bing for OSM projects https://github.com/openstreetmap/iD/issues/9153#issuecomment-1814220682
• This guide does not commend on which key to use. I started by copying the one from iD https://github.com/openstreetmap/iD/blob/develop/modules/renderer/background_source.js#L278 and also copy the utilAesDecrypt helper method. That part worked fine.
• We can also copy the Metadata fetch from iD … which all work fine until the QuadKey stuff comes into play (the {u} param). This requires the current map coordinates to calculate the right tile URL which we do not have in a regular L.tileLayer call.
  • https://github.com/shramov/leaflet-plugins/blob/master/layer/tile/Bing.md is supposed to be a solution but I was not able to get this working. Note that in our case we need{ imagerySet: 'AerialOSM' }
  • https://github.com/digidem/leaflet-bing-layer is supposed to work but I was not able to get it running
  • It would be nice if we could just do it like https://github.com/NelsonMinar/multimap/blob/master/basemaps.js#L203C1-L217C2 but that is not supported by Leaflet, we need something custom
  • https://stackoverflow.com/a/64608760 looks promising but I was not able to figure out how to get the new layer selectable in the map
  • Some of the solutions are for older Leaflet versions which will not work anymore…

My code is at https://github.com/tordans/parking-lanes/commits/try-adding-bing2/ but that is just WIP commits trying to get anything going … so don't expect anything useful.