beyonk-group / svelte-mapbox

MapBox Map and Autocomplete components for Svelte (or Vanilla JS)
MIT License
343 stars 61 forks source link

HTML(Links) in labels #54

Closed ryanrussell closed 3 years ago

ryanrussell commented 3 years ago

Hello,

Thanks for contributing this package(and your awesome google analytics package!).

Is there a built-in way to use html/links in a label?

Something like:

<Map ...>
  <Marker lat={center.lat} lng={center.lng} label="Coordinate: {center.lat}, {center.lng} <br /><a href='https://detail.page' target='_blank'>See more</a>">
  </Marker>
</Map>

It looks like the label function uses setText.

There is also a setHTML function an the official mapbox demo, but I could not find an analogous way in your wrapper.

Is there a simple way to do this with your package? Or should you go the DOM route?

Thanks in advance for any advice on best way to implement.

ryanrussell commented 3 years ago

Sorry, I should have read better.

Works like this, if anyone else reads this:

<Map ...>
    <Marker lat={center.lat} lng={center.lng}>
        <div class="content" slot="popup">
            <h3>Coordinate: {center.lat}, {center.lng}</h3>
            <a href="https://detail.page">It's a link in a popup!</a>
        </div> 
    </Marker>
</Map>