Leaflet - dynamic map - Wordpress

Question

I am a french web dev student. I need to implement a map with the leaflet.js library, with layers from IGN api (france mapping), and custom markers . This part is quite easy and works fine.

My struggle here is about the markers, which have to be dynamic (the coordinates must be specified by the client in Wordpress backoffice)

How do I do that ? I just need some indications for possible methods or tools I should use. Maybe there is a wordpress plugin you can recommand ?

The map and his different layers and custom markers work great with the following code.

const map = L.map("map").setView([47.4989788, 0.5783512], 15);

L.tileLayer(
  "https://wxs.ign.fr/{ignApiKey}/geoportail/wmts?" +
    "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&TILEMATRIXSET=PM" +
    "&LAYER={ignLayer}&STYLE={style}&FORMAT={format}" +
    "&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}",
  {
    ignApiKey: "pratique",
    ignLayer: "ORTHOIMAGERY.ORTHOPHOTOS",
    style: "normal",
    format: "image/jpeg",
    service: "WMTS",
  }
).addTo(map);

// Next layer is IGN layer from another mapping api. Works fine.

const HydroIGN = L.tileLayer(
  "https://wxs.ign.fr/{ignApiKey}/geoportail/wmts?" +
    "&REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&TILEMATRIXSET=PM" +
    "&LAYER={ignLayer}&STYLE={style}&FORMAT={format}" +
    "&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}",
  {
    ignApiKey: "agriculture",
    ignLayer: "HYDROGRAPHY.BCAE.2022",
    style: "normal",
    format: "image/png",
    service: "WMTS",
  }
).addTo(map);

// Testing custom markers with leaflet doc. Works fine too. But I need to make these dynamic with Wordpress backoffice.

const plannedEco = L.icon({
  iconUrl: "../assets/planned-eco.svg",
  iconSize: [50, 60], 
  iconAnchor: [22, 94],
  popupAnchor: [-3, -76],
});
    
L.marker([47.4989788, 0.4183512], { icon: plannedEco })
  .addTo(map)
  .bindPopup("<b>Travaux programmés</b><br>Continuité écologique");