Add named Slot for Popup html

[Amerlander]

This adds up on https://github.com/beyonk-adventures/svelte-mapbox/pull/34 and adds the functionality of https://github.com/beyonk-adventures/svelte-mapbox/pull/26 per named slot.

Should enable to use

<Marker
   popup={true}
   lat={waypoint.geo.lat}
   lng={waypoint.geo.lng}
   > 

      <a href={waypoint.slug}>
         <p>MyMarker HTML</p>
       </a>

      <span slot="popup">
         <p>My Popup HTML</p>
      </span>

</Marker>

as well as

<Marker
   popup={true}
   lat={waypoint.geo.lat}
   lng={waypoint.geo.lng}
   > 

      <span slot="popup">
         <p>My Popup HTML</p>
      </span>

</Marker>

as well as the default behaviour with label as marker text.

[CraigChamberlain]

This is good. I have it all working locally.

One point however, the <Nav/> element from svelte routing just comes back as an <a> without any even listeners. This might end up happening for other html that has javascript included. An event listener probably needs to be added in manually to maintain routing and avoid page reloads.

First I made a function available globally using the window object. (If anyone knows how to namespace into a svelte function even better). Then type an oldschool onclick handler in plain text into the link.

  window.handleNavigation = (e) => {
        e.preventDefault()
        navigate(e.target.getAttribute('href'))
    }

...

<a href='/' onclick="handleNavigation(event)">Allonby</a>

Just mentioning if there might be a more general approach vs .innerHtml?

[Amerlander]

.setHTML() is only for Strings, but the Popup has .setDOMContent(), which supports DOM elements to be passed in. See my latest changes in this PR https://github.com/beyonk-adventures/svelte-mapbox/pull/38/commits/033f4ed34d156b494fa6ff46c567176abe0934ab

Could you try if this work with your <Nav/>?

[CraigChamberlain]

Yes that's working a dream much better than work around. Looks like it works on the other slot for the pin too. I just noticed there is no pointer event when hovering over a pin to help let you know it's interactive. I remember doing something like this in javascript for an open layers map.

It should be straight forward to sort when you manage your own marker but I found I had to add the following css to target the default marker.

:global().mapboxgl-marker{
      cursor: pointer;
    }