ngyewch / svelte-leafletjs Goto Github PK

Would love to add search field and custom buttons to the map. Any chance to implement a slot for custom menus?

Hey @ngyewch, thanks for building this awesome wrapper for leafletjs.

I'm currently trying to render multiple markers with a custom icon and came across this strange result.

So only one marker ends up with the correct icon.

Below is my code.

<script>
    import icon from '$lib/assets/icon.svg'
</script>
<LeafletMap options={mapOptions}>
    <TileLayer url={tileUrl} options={tileLayerOptions} />
    {#each markers as marker}
      <Marker latLng={marker}>
        <Icon iconUrl={icon} options={{
        iconSize: [41, 41],
        iconAnchor: [20, 41],
        popupAnchor: [1, -34],
        tooltipAnchor: [16, -28],
    }}/>
      </Marker>
    {/each}
  </LeafletMap>

The markers array is reactive and gets loaded async when the components mounts. It seems like on the first render each marker has the correct icon. But as the next marker loads, the previous one fall back to the default icon.

Let me know if I can help you debug this in any way.

The GeoJSON example is currently broken for me with

Uncaught TypeError: can't convert undefined to object.

Only the TileLayer is displayed.

Updating axios seems to fix this, I'll create a PR.

It would be nice to have a simple way to change the default icon.

Seems my PR to update Axios (#18, released in 0.9.1) might cause issues in a SvelteKit setup.

I'm getting
SyntaxError: The requested module '/node_modules/form-data/lib/browser.js?v=8c61fe2d' does not provide an export named 'default' (at FormData.js?v=8c61fe2d:1:8) in Chrome

It worked without problems when I previously installed from my branch from GitHub, so I'm not sure what changed.

In Firefox I'm getting SyntaxError: ambiguous indirect export: default

An option might be to replace axios with fetch:

$: {
        if (!geojson) {
            geojson = L.geoJSON(null, options).addTo(getMap());
            eventBridge = new EventBridge(geojson, dispatch, events);
        }
        fetch(url)
            .then((response) => response.json())
            .then(result => {
                geojson.clearLayers();
                geojson.addData(result);
            });
    }

See https://github.com/rgieseke/svelte-leaflet/tree/remove-axios

I'm not sure if there is a compatibility need to use Axios but maybe this is an option to remove another dependency?
https://caniuse.com/fetch

The <DivIcon> renders as expected when I pass hard coded values to <Marker latLng={[500,500]}>
But <DivIcon> does not render at all when I pass dynamic values from #each to <Marker latLng={[location.lat, location.lng]}>
Does anyone have any ideas why this is the case and how to fix it or possible work arounds. I have hit a wall.

Hard coded latLng works:

{#each locationArr as location, ii}
	{#if location.meta.lat && location.meta.lng && location.meta.key}
		<Marker latLng={[500,500]}>
			{console.log([location.meta.lat, location.meta.lng]+' '+ii), ''}
			<DivIcon>
				<div style='background: #ff00ff; color: #fff; font-size:20px; width: 40px; height:40px'>
					123
				</div>
			</DivIcon>
		</Marker>
	{/if}
{/each}

Dynamic latLng does not work:

{#each locationArr as location, ii}
	{#if location.meta.lat && location.meta.lng && location.meta.key}
		<Marker latLng={[Number(location.meta.lat), Number(location.meta.lng)]}>
			{console.log([location.meta.lat, location.meta.lng]+' '+ii), ''}
			<DivIcon>
				<div style='background: #ff00ff; color: #fff; font-size:20px; width: 40px; height:40px'>
					123
				</div>
			</DivIcon>
		</Marker>
	{/if}
{/each}

Hi, thanks for the great module! I am currently trying to create a map with a live updating route/track of where my device has been. Is there a way to do this currently? Also is there a way to bind a geojson object to the GeoJson component rather than giving it a url?

Alternatively is there a way to force the GeoJson component to re-render every couple of seconds to fetch the new data from the url?

could you guide me how to setup on sveltekit?

How to center the map on a group of markers?

Note that the 'load' event will never fire with this code.
But if you remove center' from mapOptions then it will fire. Note that to get center and load to work manually center the map leafletMap.getMap().setView(center)`

<script>
	import {LeafletMap, TileLayer} from 'svelte-leafletjs';
	import 'leaflet/dist/leaflet.css';

	const center           = [1.250111, 103.830933]
	const zoom             = 15
	const mapOptions       = {
		center,
		zoom
	};
	const tileUrl          = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
	const tileLayerOptions = {}

	let leafletMap;
	$: if (leafletMap) {
		leafletMap.getMap().setView(center)
	}

</script>

<div class="example" style="width: 100%; height: 100vh;">
	<LeafletMap
			bind:this={leafletMap}
			options={mapOptions}
			events={['load', 'click']}
			on:load={e => {
				console.log('load');
			}}
			on:click={e => {
				console.log('click');
			}}>
		<TileLayer url={tileUrl} options={tileLayerOptions}/>
	</LeafletMap>
</div>

#9 (comment)

I'm having difficulty integrating the library into my SvelteKit project.

Whenever I run the project and open the map page, the error appears: Windows is not defined

Tried the example but getting

Could not load https://unpkg.com/[email protected]/index.js (imported by https://unpkg.com/[email protected]/lib/adapters/http.js): Cannot find "/index.js" in [email protected]

Hey thank you for making great software !
don't forget to update the releases on github when you have a moment (it still says the latest is 0.8.0).

I am wondering if anyone has tips for using https://github.com/allartk/leaflet.offline with svelte-leaflet. Currently I can get the map object from svelte-leaflet and apply all the offline tiles to that object, but is sees to write that layer over all the svelte layers, so none of my geojson, etc components show on the map.

How do I get the popup content to automatically show?

This can be done on vanilla leaflet by

leaflet.marker(...).bindPopup(content).openPopup()

I have tried

<Popup options={{content:"stuff"}}>stuff</Popup>
///
<Marker events={['click']} on:click={(e) => markerOnClickHandler(e)} latLng={[13.27, 6.9]} options={{title:"stuff"}}>

Note these only show when they're tapped or clicked, not what I want - I want them to always show

How do I achieve the same using svelte-leaflet? 🤔

We currently have issues to use your great lib in an SPA project (all client side rendered). The situation is the following:

• A route contains a page with list entries that are clickable and lead to subroutes containing <LeafletMap> views.
• The top route and the subroutes are directly accessible via URL, thus load directly the (sub) pages views.
• When accessing the top route first and then navigating to the subpages with the maps - everything works fine, the maps are loading properly.
• Issue: A direct URL call to a subpage crashes deep inside svelte with this error:

  Uncaught (in promise) TypeError: block.l is not a function
      claim_component Component.js:38
      claim water_segments_map.svelte:710
      claim_component Component.js:38
      claim +page.svelte:707
      claim +page.svelte:123
      claim +page.svelte:2562
      claim_component Component.js:38
      claim root.svelte:268
  

Debugging the error was really cumbersome, as it happens deep within svelte with no sourcemaps. After some messing around with breakpoints and stack inspection it turned out, that svelte failed to process the main <div> of the <LeafletMap> component. So we removed all custom code and applied your test demo, which also did not work. Next we forked svelte-leafletjs and made sure to build it with the same versions as our project - [email protected] / [email protected] / [email protected]. Again this did not work.
At this point we were a bit clueless about the source of the error and had only the gut feeling left, that something with the bundling of svelte-leafletjs breaks with expectations of svelte on import side. So we checked your bundling output dist/svelte-leafletjs.js and found it containing compiled code instead of exporting .svelte files.
Suspicous of a possible "ABI" compat issue we went ahead and rebundled your package with exposing .svelte files and yep - that worked.

This is what we changed:

diff --git a/package.json b/package.json
index 2e932f8..020f1ce 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   "type": "module",
   "scripts": {
     "doDev": "vite",
-    "doBuild": "cross-env NODE_ENV=production vite build",
+    "doBuild": "svelte-package -i src",
     "doPreview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json --compiler-warnings a11y-click-events-have-key-events:ignore",
     "watch:check": "svelte-check --tsconfig ./tsconfig.json --watch --compiler-warnings a11y-click-events-have-key-events:ignore",
@@ -20,6 +20,7 @@
     "preview": "run-s build doPreview"
   },
   "devDependencies": {
+    "@sveltejs/package": "^2.3.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.2",
     "@tsconfig/svelte": "^5.0.2",
     "@types/geojson": "^7946.0.14",
@@ -39,13 +40,13 @@
     "svelte",
     "leaflet"
   ],
-  "module": "./dist/svelte-leafletjs.js",
-  "svelte": "./dist/svelte-leafletjs.js",
+  "module": "./dist/index.js",
+  "svelte": "./dist/index.js",
   "exports": {
     ".": {
-      "import": "./dist/svelte-leafletjs.js",
+      "import": "./dist/index.js",
       "types": "./src/index.d.ts",
-      "svelte": "./dist/svelte-leafletjs.js"
+      "svelte": "./dist/index.js"
     }
   }
 }

Difference:
@sveltejs/package exposes the .svelte files, so the target project does not seen precompiled output anymore, but the svelte source and can do the compiling itself. This seems to be the suggested way to create svelte libs to be used in other projects.

So question is - could you change the bundle output to expose .svelte files directly? There are no unit tests in the repo, so we are not sure how to test things. At least it works in our project with that change as expected. Currently we cannot use your bundled package because of the error above.

It should be noted that the DivIcon component works great, it is just that it seems to be missing from the types file.

If I could have instructions on how to resolve this there are some other type issues I would like to look at as well, such as event handlers.

Hello - thanks so much for creating this library. I am looking to test it out on a project I am building at work. I noticed that currently theTileLayer component only supports the L.tileLayer constructor, however, there is an additional constructor for layers using a WMS endpoint rather than the standard X,Y,Z format. I am going to create a PR to add support for this shortly.

Would appreciate thoughts and advice on whether it can be considered for merge.

Hi Thank you for this great library!

I couldn't find a way to do event handlers on markers.
Something like

  <Marker {latLng} on:click={() => {
    console.log("click")
  }}>

will not do anything.
I briefly looked through the code of the library and saw that you have an EventBridge specifically for this. This would tend to tell me event handlers would work, however, I couldn't find how. Maybe it would be good to have an event handler example in the doc ?
I'm happy to write documentation if you show me how to make it work.

I just tried (copied from the documentation) on the svelte REPL, but there was an error. The error message are the following.

Could not load https://unpkg.com/[email protected]/index.js (imported by https://unpkg.com/[email protected]/lib/adapters/http.js): Cannot find "/index.js" in [email protected]

Svelte REPL: https://svelte.dev/repl/e2b7a2f1d6614a76afd9d6687eab12a3?version=3.51.0

svelte-leaflet does make it very simple to incorporate leaflet maps in svelte. I can however not see how to load GeoJSON files. If that is not implemented yet, please consider this a feature request.

Thank you for your effort!
jandot

Not an issue. But no place to ask. If I have a custom raster map to use. Can I use with leaflet-rastercoords? Or is it just works on the fly?

Any chance for an implementation of markercluster?

Help, i have error:
Uncaught SyntaxError: The requested module '/node_modules/leaflet/dist/leaflet-src.js?v=8128ddc4' does not provide an export named 'default'

Migrating to sveltekit 2.0 will show warning message below

WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition

I'm trying to achieve the same result as shown below:

onEachFeature: (feature, layer)=> {
layer.bindPopup(
  `${feature.geometry.type}, ${feature.properties.id}<br/>
  <a href="" onClick=someFunction(feature)>Click</a>`,
  {closeButton:false, maxWidth:100}
);

Could you please provide an example? I tried in a several ways but I stuck.

Thanks in advance

How to add/use OSRM for draw tracking?

leaflet-routing-machine

• svelte-leaflet is also on npm: https://www.npmjs.com/package/svelte-leaflet, which slightly confusing
• GitHub will redirect any traffic to the current URL to the new one.

@ngyewch any chance LayerGroup could be added?
I tried creating it myself but haven't been successful. Here's a base

<script>
    import {createEventDispatcher, getContext, onDestroy, setContext} from 'svelte';
    import L from 'leaflet';

    import EventBridge from '../lib/EventBridge';

    const {getMap} = getContext(L);

    export let options = {};
    export let events = [];

    let layerGroup;

    setContext(L.LayerGroup, {
        getLayerGroup: () => layerGroup,
    });

    const dispatch = createEventDispatcher();
    let eventBridge;

    $: {
        if (!layerGroup) {
            layerGroup = L.layerGroup([], options).addTo(getMap());
            eventBridge = new EventBridge(layerGroup, dispatch, events);
        }
    }

    onDestroy(() => {
        eventBridge.unregister();
        layerGroup.removeFrom(getMap());
    });

    export function getLayerGroup() {
        return layerGroup;
    }
</script>

<div>
    {#if layerGroup}
        <slot/>
    {/if}
</div>

I propose having it be a wrapper to . Marker would have to check if there is a LayerGroup context wrapping it, and then using addLayer(marker) if it does.
Let me know if there's any way I can help

Right now, we cannot define and pass an options object in the Tooltip component.
So, this does not set permanent: true and direction: "top" internally.

      <Tooltip
        options={{
          permanent: true,
          direction: "top",
        }}>{details.route}</Tooltip
      >