saltcorn / leaflet-map

It is what it is
MIT License
2 stars 2 forks source link

can't redo mockup in SC #7

Open j2l opened 1 year ago

j2l commented 1 year ago

OK, this one is tricky, don't read it if you're not fully focused.

I'd like to change (add layers to) a map generated by the leaflet-map module. To make sure of the script order and calls, I copy SC source of the rendered page to make a local html with it, then I adapt it (files locations) to make it work locally. I get it working locally with scripts above and below the generated map.

Above code:

... (calling leaflet.js and stuff)
<script>
var mapsPlaceholder = [];
L.Map.addInitHook(function () {
  mapsPlaceholder.push(this);
});
</script>

then we have the SC generated map like:

<div id="map57573" style="height:1000px;"></div>
<script>
(function (f) {
  if (document.readyState === "complete") f();
  else
    document.addEventListener('DOMContentLoaded', () => setTimeout(f), false)
})(function () {
  var points = [
    [
      [34, 34], null, null
    ]
  ];
  var map = L.map('map57573').setView([34, 34], 11);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
  map.fitBounds(points.map(pt => pt[0]));
  points.forEach(pt => {
    L.marker(pt[0], pt[2] ? {
      icon: L.icon({
        iconUrl: '/files/serve/' + pt[2],
        iconSize: [56, 60],
        iconAnchor: [40, 59],
        popupAnchor: [0, 0]
      })
    } : {}).addTo(map);
  });
});
</script>

then I add the script below to tweak the map (change provider here, but not only):

<script>
    (function(f){if (document.readyState === "complete") f(); else document.addEventListener('DOMContentLoaded',()=>setTimeout(f),false)})(function(){

    var L = window.L;
    var map = mapsPlaceholder.pop();
    console.log(map);
    var velocityLayer,OpenSeaMap;

    var waterco = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
        attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy;',
        subdomains: 'abcd',
        minZoom: 1,
        maxZoom: 16,
        ext: 'jpg'
      }).addTo(map);

      map.setView([32, 34.5], 9);
      // map.setView([0,0], 16);

    });
</script>

the console.log(map); is returning an object locally, but it returns undefined (so error about addTo(map)) when I have the same code blocks in Saltcorn.

Any idea @glutamate ?