Using Custom Marker

[Lubratzel]

Hi,
sorry for this question but how can I use custom marker, I have only install svelte-maplibre shout I install other things?

Code:

<script lang="ts">
    import { MapLibre } from 'svelte-maplibre';

    function addMarker(e: CustomEvent<MouseEvent>) {
      markers = [...markers, { lngLat: e.detail.lngLat }];
}
  </script>
  
  <MapLibre 
    center={[7.706,49.2168]}
    zoom={14.7}
    class="map"
    standardControls
    style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json" >

    <!-- svelte-ignore missing-declaration -->
    <MapEvents on:click={addMarker} />

  {#each marker as marker}
    <DefaultMarker lngLat={marker.lngLat} />
  {/each}

</MapLibre>
  
  <style>
    :global(.map) {
      height: 500px;
    }
  </style>

I've got this Error Messages:

Cannot find name 'MapEvents'.
Cannot find name 'markers'.
Property 'lngLat' does not exist on type 'MouseEvent'
'DefaultMarker' is not definedsvelte(missing-declaration)
Cannot find name 'DefaultMarker'.

[dimfeld]

You have to import components to use them.