Problem with custom marker / popup

[szulcus]

I want to create a custom marker. I have:

const mapboxMarker = ref<HTMLElement | null>(null);
onMounted(() => {
    const marker = defineMapboxMarker('mapboxMarker', {}, mapboxMarker, (marker) => {
        marker.setLngLat([props.origin.coordinates.lng, props.origin.coordinates.lat]);
    });
    console.log({ marker });
});

<img ref="mapboxMarker" style="width: 50px" :src="getImage('signet-light.svg')" />
<div id="mapId" class="preview__map">
    <MapboxMap
        map-id="mapId"
        :options="{
            style: 'mapbox://styles/mapbox/satellite-v9',
            center: [props.origin.coordinates.lng, props.origin.coordinates.lat],
            zoom: 11
        }"
    >
</div>

I can see the marker variable, but it doesn't write a pin on the map. What am I doing wrong?

[AlexLavoie42]

If you are creating the marker on your base page/component you will need to pass the mapID as the last parameter to defineMapboxMarker

I recommend putting the marker code in its own component, and nesting it inside the map component like the rest of the controls. The mapID will then be auto-injected.

[szulcus]

@AlexLavoie42 thanks! How can I change second translatate(-50%, -50%) to translatate(-50%, -100%)? Temporary I have:

width: var(--marker-size);
padding-bottom: var(--marker-size);

I also have a question about layer. Could you explain to me if I'm doing something wrong here? All the types match, but I still don't see the layer 🤔

[AlexLavoie42]

Your source inside layer needs to be the same as your source-id and I recommend changing it to be different from the map id.

Read through the mapbox gl docs thoroughly, as most of this module should function in the same way.

[szulcus]

I changed the source-id to "maine", but it didn't help anything. I'm trying to figure out what the module does in relation to the mapbox documentation (https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/), but I feel like I'm doing it a bit in the dark. Could you help me? I also tried this. Unfortunately with the same result:

[AlexLavoie42]

Make sure your geojson is correct. I don't see anything wrong here at first glance so chances are it's an issue with your input data. There are plenty of online tools I have used to validate and render geojson so you can make sure it works outside of the module.

[szulcus]

Yes! It was a problem with the data I get for the field outline. On the data from the documentation everything works fine. Thank you very much!

[AlexLavoie42]

This tool has saved me many hours trying to figure out geojson data issues, I highly recommend putting your geojson data here to find any issues.