Set offline map URL as external environment variable

[masoudr]

I'm trying to set the offline map URL as an external environment variable in leaflet_options.js:

...
var streets = L.tileLayer('https://api.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoibXNsZWUiLCJhIjoiclpiTWV5SSJ9.P_h8r37vD8jpIH1A6i1VRg', {
    attribution: '<a href="https://www.mapbox.com/about/maps">© Mapbox</a> <a href="https://openstreetmap.org/copyright">© OpenStreetMap</a> | <a href="https://mapbox.com/map-feedback/">Improve this map</a>'
  }),
  ...
  // osm_offline = L.tileLayer('http://localhost:8080/tile/{z}/{x}/{y}.png'),
  osm_offline = L.tileLayer(process.env.OSM_MAP_URL),
  ...
  layer: [{
    'Mapbox Streets': streets,
    'Mapbox Outdoors': outdoors,
    'Mapbox Streets Satellite': satellite,
    'openstreetmap.org': osm,
    'openstreetmap.de.org': osm_de,
    'osm-offline': osm_offline,
  }],
...

And in my compose file I have:

version: '3.7'

services:
  osrm-frontend:
    image: osrm/osrm-frontend
    ports:
      - 9966:9966
    environment:
      - OSM_MAP_URL='http://localhost:8080/tile/{z}/{x}/{y}.png'

The problem is it can't read the map URL from the environment variable and I get an undefined value for osm_offline. I'm not sure how replace.js file works but I think it somehow overwrites the environments of this file.