Single marker in a map

[waclaw66]

Single marker in a map

[dimfeld]

Can you give me the actual code you’re using then? With all the ellipses in your sample xoden not sure what you’re actually doing edit; oh ok didn’t see the edited part in the email. Yeah I can look into it next week

…

On Sat Dec 16, 2023, 07:21 PM GMT, waclaw66 ***@***.***> wrote: Actually it's not working, the marker is not shown. I thought, there have to be some additional attributes to show the marker. — Reply to this email directly, view it on GitHub <#108 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKOLVTQVZQ645DHFQI5E3TYJXYCDAVCNFSM6AAAAABAWSATRGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNJYHEYTCNRSG4>. You are receiving this because you commented.Message ID: ***@***.***>

[JonahKr]

So i did some digging and the underlying reason is the following:
Since this library by default passes an element Object during creation to the Marker constructor:

svelte-maplibre/src/lib/Marker.svelte

Lines 28 to 32 in 7471b63

	$marker = new maplibre.Marker({
	element: node,
	draggable,
	offset,
	})

We never reach the default Marker state in the maplibre library.
https://github.com/maplibre/maplibre-gl-js/blob/36dc43bc5cbe5e3de6899d7b371ad9cee9fc7a78/src/ui/marker.ts#L150

I am a bit unsure on how to resolve this since For the current library design we need to hook an element, but by doing so we will never be able to reach the inner part of the conditional.

In the meantime you can use the following svg Element which i patched together following the original svg from https://github.com/maplibre/maplibre-gl-js/blob/36dc43bc5cbe5e3de6899d7b371ad9cee9fc7a78/src/ui/marker.ts#L156-L249

<Marker
    lngLat={[12.345, -12.345]}
    class="h-5 w-5"
  > 
<svg xmlns="http://www.w3.org/2000/svg" display="block" viewBox="0 0 27 41" style="transform: translateY(-14px)">
      <!-- Page 1 -->
      <g fill-rule="nonzero">
        <!-- Shadow -->
        <g transform="translate(3.0, 29.0)" fill="#000000">
          <!-- Ellipses -->
          <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="10.5" ry="5.25002273"/>
          <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="10.5" ry="5.25002273"/>
          <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="9.5" ry="4.77275007"/>
          <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="8.5" ry="4.29549936"/>
          <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="7.5" ry="3.81822308"/>
          <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="6.5" ry="3.34094679"/>
          <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="5.5" ry="2.86367051"/>
          <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="4.5" ry="2.38636864"/>
        </g>
        <!-- Background -->
        <g fill="#3FB1CE">
          <path d="M27,13.5 C27,19.074644 20.250001,27.000002 14.75,34.500002 C14.016665,35.500004 12.983335,35.500004 12.25,34.500002 C6.7499993,27.000002 0,19.222562 0,13.5 C0,6.0441559 6.0441559,0 13.5,0 C20.955844,0 27,6.0441559 27,13.5 Z"/>
        </g>
          <!-- Border -->
        <g opacity="0.25" fill="#000000">
          <path d="M13.5,0 C6.0441559,0 0,6.0441559 0,13.5 C0,19.222562 6.7499993,27 12.25,34.5 C13,35.522727 14.016664,35.500004 14.75,34.5 C20.250001,27 27,19.074644 27,13.5 C27,6.0441559 20.955844,0 13.5,0 Z M13.5,1 C20.415404,1 26,6.584596 26,13.5 C26,15.898657 24.495584,19.181431 22.220703,22.738281 C19.945823,26.295132 16.705119,30.142167 13.943359,33.908203 C13.743445,34.180814 13.612715,34.322738 13.5,34.441406 C13.387285,34.322738 13.256555,34.180814 13.056641,33.908203 C10.284481,30.127985 7.4148684,26.314159 5.015625,22.773438 C2.6163816,19.232715 1,15.953538 1,13.5 C1,6.584596 6.584596,1 13.5,1 Z"/>
        </g>

        <!-- Circle Container-->
        <g transform="translate(8.0, 8.0)">
          <circle fill="#000000" opacity="0.25" cx="5.5" cy="5.5" r="5.4999962"/>
          <circle fill="#FFFFFF" cx="5.5" cy="5.5" r="5.4999962"/>
        </g>
      </g>
    </svg>
    </Marker>

I hope this helps!

[dimfeld]

I have a pretty good idea on what to do here, using $$slots.default to detect if content has been passed into the slot. Hopefully I can find time to try it out on Monday.

…

On Sun Dec 17, 2023, 04:28 PM GMT, JonahKr ***@***.***> wrote: So i did some digging and the underlying reason is the following: Since this library by default passes an element Object during creation to the Marker constructor: https://github.com/dimfeld/svelte-maplibre/blob/7471b63c62efaaf8a3e64c29919e1268fbbc211b/src/lib/Marker.svelte#L28-L32 <https://github.com/dimfeld/svelte-maplibre/blob/7471b63c62efaaf8a3e64c29919e1268fbbc211b/src/lib/Marker.svelte#L28-L32> We never reach the default Marker state in the maplibre library. https://github.com/maplibre/maplibre-gl-js/blob/36dc43bc5cbe5e3de6899d7b371ad9cee9fc7a78/src/ui/marker.ts#L150 <https://github.com/maplibre/maplibre-gl-js/blob/36dc43bc5cbe5e3de6899d7b371ad9cee9fc7a78/src/ui/marker.ts#L150> I am a bit unsure on how to resolve this since For the current library design we need to hook an element, but by doing so we will never be able to reach the inner part of the conditional. In the meantime you can use the following svg Element which i patched together following the original svg from https://github.com/maplibre/maplibre-gl-js/blob/36dc43bc5cbe5e3de6899d7b371ad9cee9fc7a78/src/ui/marker.ts#L156-L249 <https://github.com/maplibre/maplibre-gl-js/blob/36dc43bc5cbe5e3de6899d7b371ad9cee9fc7a78/src/ui/marker.ts#L156-L249> <Marker lngLat={[12.345, -12.345]} class="h-5 w-5" > <svg xmlns="http://www.w3.org/2000/svg" display="block" viewBox="0 0 27 41" style="transform: translateY(-14px)"> <!-- Page 1 --> <g fill-rule="nonzero"> <!-- Shadow --> <g transform="translate(3.0, 29.0)" fill="#000000"> <!-- Ellipses --> <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="10.5" ry="5.25002273"/> <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="10.5" ry="5.25002273"/> <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="9.5" ry="4.77275007"/> <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="8.5" ry="4.29549936"/> <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="7.5" ry="3.81822308"/> <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="6.5" ry="3.34094679"/> <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="5.5" ry="2.86367051"/> <ellipse opacity="0.04" cx="10.5" cy="5.80029008" rx="4.5" ry="2.38636864"/> </g> <!-- Background --> <g fill="#3FB1CE"> <path d="M27,13.5 C27,19.074644 20.250001,27.000002 14.75,34.500002 C14.016665,35.500004 12.983335,35.500004 12.25,34.500002 C6.7499993,27.000002 0,19.222562 0,13.5 C0,6.0441559 6.0441559,0 13.5,0 C20.955844,0 27,6.0441559 27,13.5 Z"/> </g> <!-- Border --> <g opacity="0.25" fill="#000000"> <path d="M13.5,0 C6.0441559,0 0,6.0441559 0,13.5 C0,19.222562 6.7499993,27 12.25,34.5 C13,35.522727 14.016664,35.500004 14.75,34.5 C20.250001,27 27,19.074644 27,13.5 C27,6.0441559 20.955844,0 13.5,0 Z M13.5,1 C20.415404,1 26,6.584596 26,13.5 C26,15.898657 24.495584,19.181431 22.220703,22.738281 C19.945823,26.295132 16.705119,30.142167 13.943359,33.908203 C13.743445,34.180814 13.612715,34.322738 13.5,34.441406 C13.387285,34.322738 13.256555,34.180814 13.056641,33.908203 C10.284481,30.127985 7.4148684,26.314159 5.015625,22.773438 C2.6163816,19.232715 1,15.953538 1,13.5 C1,6.584596 6.584596,1 13.5,1 Z"/> </g> <!-- Circle Container--> <g transform="translate(8.0, 8.0)"> <circle fill="#000000" opacity="0.25" cx="5.5" cy="5.5" r="5.4999962"/> <circle fill="#FFFFFF" cx="5.5" cy="5.5" r="5.4999962"/> </g> </g> </svg> </Marker> I hope this helps! — Reply to this email directly, view it on GitHub <#108 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAKOLVTP5JG2Q3KEWI5OBHTYJ4MSBAVCNFSM6AAAAABAWSATRGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNJZGIYTMNRVGQ>. You are receiving this because you commented.Message ID: ***@***.***>

[dimfeld]

Can you clarify what you’re having trouble with? The code sample you posted should work, I think I’m not understanding what your issue is.

[waclaw66]

Actually it's not working, the marker is not shown. I thought, there have to be some additional attributes to show the marker.
Could you please add such example to https://svelte-maplibre.vercel.app?
A plain map with single marker with default look? There are custom markers only in those examples.

[JonahKr]

Hi both!
@waclaw66 Your example doesn't work because you provide the child nodes as attributes. Additionally there is no such thing as a default marker. A Marker is just a container without any visual representation.

As a working example you could try (since you seem to use tailwind):

<MapLibre
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class="relative w-full aspect-[9/16] max-h-[70vh] sm:max-h-full sm:aspect-video"
  standardControls
>
  <Marker lngLat={[20, 50]} class="w-5 h-5 bg-red-300 rounded-full" />
</MapLibre>

Presuming you mean a pin as in google maps etc, you could embed an icon or a png inside the marker element.
Refering to your original issue in the immich repository, you could achieve the vertical translation by moving the centered image upwards by 50% of the height of the marker.

Take care and stay safe!

[waclaw66]

Hi both! @waclaw66 Your example doesn't work because you provide the child nodes as attributes.

That was a typo :) missing >

Presuming you mean a pin as in google maps etc, you could embed an icon or a png inside the marker element. Refering to your original issue in the immich repository, you could achieve the vertical translation by moving the centered image upwards by 50% of the height of the marker.

I meant how to add marker like this...

using <Marker> tag, the same icon as new Marker().setLngLat([lng, lat]).addTo(map) does.

Take care and stay safe!

Thanks, you too!

[waclaw66]

Refering to your original issue in the immich repository, you could achieve the vertical translation by moving the centered image upwards by 50% of the height of the marker.

Translation works, however when asButton is set then the mouse shows hand pointer in the original area bellow as well. Not sure if this can be solved somehow.

2023-12-18.09.10.39.mp4

[dimfeld]

I added a DefaultMarker component in version 0.7.4, which should let you do what you're trying to do. Note that default markers are less capable than the normal marker in some things like mouse events, because they only support exactly what Maplibre supports on its markers.

[waclaw66]

I added a DefaultMarker component in version 0.7.4, which should let you do what you're trying to do. Note that default markers are less capable than the normal marker in some things like mouse events, because they only support exactly what Maplibre supports on its markers.

Thanks, looks promissing!
However when I add import of DefaultMarker to
https://github.com/immich-app/immich/blob/b40859551b2e792afafdfe4057de6ef1276ad47c/web/src/lib/components/shared-components/map/map.svelte and put DefaultMarker into MapLibre element,
I get ambiguous indirect export: DefaultMarker
Any clue, what could be wrong?

[dimfeld]

Can you provide a branch where you've added it and are seeing the error?

edit: and just to be sure, you did upgrade to the new version right?

[waclaw66]

Can you provide a branch where you've added it and are seeing the error?

edit: and just to be sure, you did upgrade to the new version right?

Yes, updated to 0.7.4, there is it...
immich-app/immich@main...waclaw66:immich:feat/defaultmarker

[dimfeld]

Hmm, nothing sticks out as wrong there. I also made a new SvelteKit project and created a map with a DefaultMarker to test, and it works fine for me. Sorry, I'm unsure what the cause might be.

[waclaw66]

Hmm, nothing sticks out as wrong there. I also made a new SvelteKit project and created a map with a DefaultMarker to test, and it works fine for me. Sorry, I'm unsure what the cause might be.

No problem, there has to be some issue within Immich itself. I'll try to investigate it deeply. Thanks anyway!

[waclaw66]

I'm sorry for confusion, it works now. There root cause was that I didn't run npm ci and didn't restarted Immich vite dev, thus vite cache wasn't updated with the new dependency.