Comments (15)
from svelte-maplibre.
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
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!
from svelte-maplibre.
from svelte-maplibre.
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.
from svelte-maplibre.
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.
from svelte-maplibre.
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!
from svelte-maplibre.
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!
from svelte-maplibre.
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
from svelte-maplibre.
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.
from svelte-maplibre.
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?
from svelte-maplibre.
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?
from svelte-maplibre.
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
from svelte-maplibre.
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.
from svelte-maplibre.
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!
from svelte-maplibre.
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.
from svelte-maplibre.
Related Issues (20)
- Filter not working unless I run a function HOT 4
- Upgrade to maplibre-gl 4 HOT 1
- Migrate from `eslint-plugin-svelte3` to `eslint-plugin-svelte`
- Look at using style transform function to restore added styles when switching base style HOT 1
- Updating sourceLayer after Layer creation doesn't take effect HOT 2
- Bug: Cursor does not turn into pointer when hovering over a popup/marker. HOT 1
- diffStyleUpdates does not reload layers HOT 3
- Example Github Project - Internal Error 500 HOT 1
- Allow developer to define how the map should react to updated props HOT 7
- `Unknown file extension ".svelte"` error in SvelteKit project HOT 3
- Including examples for overlaying D3 svg objects HOT 1
- Removing Markers and LineLayer HOT 1
- Upport for Svelte 5? HOT 1
- add marker on click HOT 4
- Add 3D Terrain components
- flyTo doesn't properly center to the LngLat value of the marker HOT 4
- Certain reactive properties in layer paint property do not update the map when changed
- Combine zoom and center handling into a single call to map.easeTo
- Programmatically trigger GeolocateControl HOT 3
- Warning when using history.replaceState with SvelteKit HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-maplibre.