add plugins

[irmanator]

i'm wondering how to add new leafle plugin in here. Somekind of sample tutorial. Thank you.

[peopledrivemecrazy]

Which plugin do you want to use?

[irmanator]

I think your leaflet svelte code is closer and better to understand for leafletJS users like me.
May be you can help to give us more clues, in joining plugins from leaflet to your leaflet-svelte, like Vector Grid.

[peopledrivemecrazy]

@irmanator So sorry for such a late reply, I might have to change the way the leafletjs is added, I did not need the npm version of leafletjs.

But I was able to modify this file https://github.com/anoram/leaflet-svelte/blob/master/src/LoadSdk.svelte#L19 like this inside the loader, not really a very pretty solution.

I am working on a better solution

        {
            type: "script",
            url: `https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js`,
          },

[irmanator]

It's Ok broh, your codes are inspiring me to do it myself already.
i'm using this leaflet vectorgrid sample code at https://leaflet.github.io/Leaflet.VectorGrid/demo-geojson.html

LoadSDK.svelte:
put this into beyonk async loader:

      loader([
              {
                 type: "script",
                 url: `https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.min.js`,
              },

Datasource:
checkout this:
https://leaflet.github.io/Leaflet.VectorGrid/eu-countries.js
and change the begining JS from:
var euCountries = {"type":"FeatureCollection","features":[...
to:
export let euCountries = {"type":"FeatureCollection","features":[...

App.svelte:
For App.svelte is inspired from your updateMarkers:
https://leaflet.anoram.com/examples/dynamicmarker

<script>
import Map from '@anoram/leaflet-svelte';
import * as datavg from './eu-countries'; // import datasource
  // default map
  let options={
  center: [-8.5,117],
  zoom: 2,
  markers: [
  {
    lat: -8.5,
    lng: 117
  }
  ],
  mapID: "map"
  }
  
  let MAP_EL;
  async function init() {
        MAP_EL.addVectorGrid(datavg.euCountries);
  }
  </script>
  
  <style>
      .map {
        height: 600px;
        width: auto;
        will-change: auto;
      }
  </style>
<div class="map">
      <Map {options} bind:this={MAP_EL} on:ready={init} />
</div>

Leaflet.svelte:
The last one is add addVectorGrid to your Leaflet.svelte

 var vectorGrid;
 var highlight;
 var clearHighlight = function() {
   		if (highlight) {
   			vectorGrid.resetFeatureStyle(highlight);
   		}
   		highlight = null;
   	};

// add vectorgrid Geojson-VT
 export const addVectorGrid = (obj) => {
   //console.log(obj)
     vectorGrid = new L.vectorGrid.slicer( obj, {
   		rendererFactory: L.svg.tile,
   		vectorTileLayerStyles: {
   			sliced: function(properties, zoom) {
   				var p = properties.mapcolor7 % 5;
   				return {
   					fillColor: p === 0 ? '#800026' :
   							p === 1 ? '#E31A1C' :
   							p === 2 ? '#FEB24C' :
   							p === 3 ? '#B2FE4C' : '#FFEDA0',
   					fillOpacity: 0.5,
   					stroke: true,
   					fill: true,
   					color: 'black',
							//opacity: 0.2,
   					weight: 0,
   				}
   			}
   		},
   		interactive: true,
   		getFeatureId: function(f) {
   			return f.properties.mapcolor7;
   		}
   	})
   .on('click', function(e) {
   		var properties = e.layer.properties;
     L.popup()
   				.setContent(properties.name_long)
   				.setLatLng(e.latlng)
   				.openOn(map);
   })
   .on('mouseover', function(e) {
   		var properties = e.layer.properties;
   		highlight = properties.mapcolor7;
   		var p = properties.mapcolor7;
   		var style = {
   			fillColor: p === 0 ? '#800026' :
   					p === 1 ? '#E31A1C' :
   					p === 2 ? '#FEB24C' :
   					p === 3 ? '#B2FE4C' : '#FFEDA0',
   			fillOpacity: 0.5,
   			fillOpacity: 1,
   			stroke: true,
   			fill: true,
   			color: 'red',
   			opacity: 1,
   			weight: 2,
   		};

   		vectorGrid.setFeatureStyle(p, style);
   	})
   .on('mouseout', function(e) {
     clearHighlight();
   })
   	.addTo(map);
 };

Checkout this sample on:
(https://vectorgrid-svelte-anoramtest.netlify.app/)

Eventhough actually i need to make it all offline totally a static web, (without any network, no fetching bla bla...) but beyonk async is good enough to start with. May be you can have any idea?