@beyonk/svelte-mapbox 11.0.0 → 12.1.0

package/.github/workflows/publish.yml

@@ -2,16 +2,8 @@ name: publish
 
 on:
   push:
-    branches:
-      - '*'
     tags:
       - 'v*'
-  pull_request:
-    branches:
-      - '*'
-
-env:
-  NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
 
 jobs:
   publish-npm:
@@ -24,7 +16,7 @@ jobs:
       - name: set up node and pnpm
         run: |
           corepack enable
-          pnpm config set '//registry.npmjs.org/:_authToken' "${NODE_AUTH_TOKEN}"
+          pnpm config set '//registry.npmjs.org/:_authToken' "${{secrets.NPM_TOKEN}}"
           pnpm i
 
       - name: publish

package/README.md

@@ -30,17 +30,17 @@ npm install --save-dev @beyonk/svelte-mapbox
 
 The container component is the map, and there are a variety of components which go on the map.
 
-```jsx
+```svelte
 <Map
   accessToken="<your api key>" // add your api key here
   bind:this={mapComponent} // Get reference to your map component to use methods
-  on:recentre={e => console.log(e.detail.center.lat, e.detail.center.lng) } // recentre events
+  onrecentre={e => console.log(e.detail.center.lat, e.detail.center.lng) } // recentre events
   options={{ scrollZoom: false }} // // add arbitrary options to the map from the mapbox api
 >
   <Earthquakes /> // Any custom component you create or want here - see marker example
   <Marker lat={someLat} lng={someLng} color="rgb(255,255,255)" label="some marker label" popupClassName="class-name" /> // built in Marker component
   <NavigationControl />
-  <GeolocateControl options={{ some: 'control-option' }} on:eventname={eventHandler} />
+  <GeolocateControl options={{ some: 'control-option' }} oneventname={eventHandler} />
   <ScaleControl />
 </Map>
 
@@ -73,13 +73,13 @@ The container component is the map, and there are a variety of components which
 
 By default, markers are typical map pins to which you can pass a color property.
 
-```jsx
+```svelte
 <Marker color={brandColour} />
 ```
 
 You may also create a custom pin with the default slot.
 
-```jsx
+```svelte
 <Marker
 lat={waypoint.geo.lat}
 lng={waypoint.geo.lng}
@@ -98,13 +98,13 @@ lng={waypoint.geo.lng}
 ### Marker Popups
 By default a popup is revealed when you click a pin.  It is populated with text provided in the label property.
 
-```jsx
+```svelte
 <Marker label={markerText} />
 ```
 
 To indicate interactivity, you may target the marker with some custom CSS:
 
-```jsx
+```svelte
 <style>
     :global(.mapboxgl-marker){
       cursor: pointer;
@@ -114,13 +114,13 @@ To indicate interactivity, you may target the marker with some custom CSS:
 
 Optionally, disable the popup with the `popup={false}` property:
 
-```jsx
+```svelte
 <Marker popup={false} />
 ```
 
 You may alternatively pass a custom DOM element to the marker to use as a popup. 
 
-```jsx
+```svelte
 <Marker lat={pin.coordinates.latitude} lng={pin.coordinates.longitude}>
     <div class="content" slot="popup">
       <h3>{pin.name}</h3>
@@ -139,7 +139,7 @@ This also means that if you bind these properties to a variable, that variable w
 
 This is often easier than waiting for events such as `recentre` or `zoom` to be fired, to update markers and similar:
 
-```jsx
+```svelte
 <Map accessToken="<your api key>" bind:center bind:zoom>
   <Marker bind:lat bind:lng />
 </Map>
@@ -165,19 +165,19 @@ map is ready in your browser when you call it this way.
 
 The Geocoder is an autocompleting place lookup, which returns a lat and lng for a place.
 
-```jsx
-<Geocoder accessToken="<your api key>" on:result={somePlaceChangeFunction} />
+```svelte
+<Geocoder accessToken="<your api key>" onresult={somePlaceChangeFunction} />
 
 <script>
   import { Geocoder } from '@beyonk/svelte-mapbox'
 </script>
 ```
 
-The geocoder has five events you can subscribe to: `on:loading`, `on:result`, `on:results`, `on:clear`, and `on:error` which are [documented here](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#on)
+The geocoder has five events you can subscribe to: `onloading`, `onresult`, `onresults`, `onclear`, and `onerror` which are [documented here](https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#on)
 
-The most important event is `on:result` which is fired when a user selects an autocomplete result.
+The most important event is `onresult` which is fired when a user selects an autocomplete result.
 
-There is a sixth event specific to this library, which is `on:ready`, which is fired when the component is ready for use. You can likely ignore it.
+There is a sixth event specific to this library, which is `onready`, which is fired when the component is ready for use. You can likely ignore it.
 
 ## Custom CSS
 

package/jsconfig.json

@@ -1,11 +1,4 @@
 {
   "extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"baseUrl": ".",
-		"paths": {
-			"$lib": ["src/lib"],
-			"$lib/*": ["src/lib/*"]
-		}
-	},
 	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
 }

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@beyonk/svelte-mapbox",
-  "version": "11.0.0",
+  "version": "12.1.0",
   "devDependencies": {
     "@beyonk/eslint-config": "^8.0.2",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.14.0",
-    "@sveltejs/kit": "^2.8.0",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/kit": "^2.55.0",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
     "eslint": "^9.14.0",
     "eslint-plugin-svelte": "^2.46.0",
-    "svelte": "^5.1.14",
+    "svelte": "^5.55.0",
     "svelte2tsx": "^0.7.23",
     "typescript": "^5.6.3",
-    "vite": "^5.4.11"
+    "vite": "^8.0.2"
   },
   "peerDependencies": {
     "svelte": ">=4.0.0"
@@ -22,7 +22,6 @@
   },
   "types": "./components.d.ts",
   "type": "module",
-  "packageManager": "pnpm@8.15.7",
   "scripts": {
     "dev": "vite dev --port 3030",
     "build": "vite build",

package/src/lib/geocoder/Geocoder.svelte

@@ -1,48 +1,49 @@
-<div
-  id={fieldId}
-  use:action={optionsWithDefaults}
-  on:ready={init}
-  on:results
-  on:result
-  on:loading
-  on:error
-  on:clear
-  on:load
-></div>
-
 <script>
-  import { createEventDispatcher } from 'svelte'
-  import action from './geocoder-action.js'
+  import geocoderAttachment from './geocoder-attachment.js'
 
-  export let accessToken
-  export let options = {}
-  export let version = 'v5.0.3'
-  export let types = [ 'country', 'region', 'postcode', 'district', 'place', 'locality', 'neighborhood', 'address' ]
-  export let placeholder = 'Search'
-  export let value = null
-  export let customStylesheetUrl = false
-  export let geocoder
+  let {
+    accessToken,
+    options = {},
+    version = 'v5.1.0',
+    types = [ 'country', 'region', 'postcode', 'district', 'place', 'locality', 'neighborhood', 'address' ],
+    placeholder = 'Search',
+    value = null,
+    customStylesheetUrl = false,
+    geocoder = $bindable(),
+    onresults,
+    onresult,
+    onloading,
+    onerror,
+    onclear,
+    onload,
+    ...rest
+  } = $props()
 
-  const dispatch = createEventDispatcher()
   const fieldId = 'bsm-' + Math.random().toString(36).substring(6)
 
-  const optionsWithDefaults = Object.assign({
+  const optionsWithDefaults = $derived.by(() => Object.assign({
     version,
     accessToken,
     types: types.join(','),
     placeholder,
     customStylesheetUrl,
     value
-  }, options)
+  }, options))
 
-  function init ({ detail }) {
+  function init (detail) {
     geocoder = detail.geocoder
-    dispatch('ready')
   }
 </script>
 
+<div
+  id={fieldId}
+  {@attach geocoderAttachment(optionsWithDefaults, { onresults, onresult, onloading, onerror, onclear, onload })}
+  onready={init}
+  {...rest}
+></div>
+
 <style>
   div {
     padding: 0;
   }
-</style>
+</style>

package/src/lib/geocoder/geocoder-attachment.js

@@ -0,0 +1,50 @@
+import { load } from '../asset-loader.js'
+
+export default function geocoderAttachment (options, { onresults, onresult, onloading, onerror, onclear, onready }) {
+  return (element) => {
+    let geocoderInstance
+
+    const resources = [
+      { type: 'script', value: `//api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/${options.version}/mapbox-gl-geocoder.min.js`, id: 'byk-gc-js' }
+    ]
+
+    const customStylesheetUrl = options.customStylesheetUrl
+    if (customStylesheetUrl) {
+      resources.push({ type: 'link', value: customStylesheetUrl, id: 'byk-gcsu-css' })
+    } else {
+      resources.push({ type: 'link', value: `//api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/${options.version}/mapbox-gl-geocoder.css`, id: 'byk-gc-css' })
+    }
+
+    load(resources, () => {
+      geocoderInstance = new window.MapboxGeocoder(options)
+      geocoderInstance.addTo(`#${element.id}`)
+      if (options.value) {
+        geocoderInstance.setInput(options.value)
+      }
+
+      geocoderInstance.on('results', (ev) => {
+        onresults?.(ev)
+      })
+      geocoderInstance.on('result', (ev) => {
+        console.log('result', onresult, ev)
+        onresult?.(ev)
+      })
+      geocoderInstance.on('loading', (ev) => {
+        onloading?.(ev)
+      })
+      geocoderInstance.on('error', (ev) => {
+        onerror?.(ev)
+      })
+      geocoderInstance.on('clear', (ev) => {
+        onclear?.(ev)
+      })
+      geocoderInstance.on('load', (ev) => {
+        onready?.({ ...ev, geocoder: geocoderInstance })
+      })
+    })
+
+    return () => {
+      geocoderInstance && geocoderInstance.remove && geocoderInstance.remove()
+    }
+  }
+}

package/src/lib/map/Map.svelte

@@ -1,60 +1,40 @@
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-  use:action={optionsWithDefaults}
-  on:ready={init}
-  on:recentre
-  on:dragend
-  on:click
-  on:zoomstart
-  on:zoom
-  on:zoomend
-  on:drag
-  on:keydown
-  on:keyup
-  role="application"
-  >
-  {#if map}
-  <slot></slot>
-  {/if}
-</div>
-
-<style>
-  div {
-    width: 100%;
-    height: 100%;
-  }
-</style>
-
 <script>
-  import { setContext, onDestroy, createEventDispatcher } from 'svelte'
+  import { setContext, untrack } from 'svelte'
   import { contextKey } from '../mapbox.js'
-  import action from './map-action.js'
-  import { EventQueue } from '../queue.js'
-
-  export let map = null
-  export let version = 'v3.7.0'
-  export let center = [ 0, 0 ]
-  export let zoom = 9
-  export let zoomRate = 1
-  export let wheelZoomRate = 1
-  export let options = {}
-  export let accessToken
-  export let customStylesheetUrl = false
-  export let style = 'mapbox://styles/mapbox/streets-v11'
-
-  const dispatch = createEventDispatcher()
+  import mapAttachment from './map-attachment.js'
+  import { EventQueue } from '../queue.svelte.js'
+
+  let {
+    version = 'v3.20.0',
+    center = [ 0, 0 ],
+    zoom = $bindable(9),
+    zoomRate = 1,
+    wheelZoomRate = 1,
+    options = {},
+    accessToken,
+    customStylesheetUrl = false,
+    style = 'mapbox://styles/mapbox/streets-v11',
+    children,
+    onready,
+    ondragend,
+    ondrag,
+    onmoveend,
+    onzoomstart,
+    onzoom,
+    onzoomend,
+    ...rest
+  } = $props()
+
+  let map = $state()
+  let mapbox = $state()
 
   setContext(contextKey, {
     getMap: () => map,
     getMapbox: () => mapbox
   })
 
-  let container
-  let mapbox
-
-  const optionsWithDefaults = Object.assign({
+  const optionsWithDefaults = $derived.by(() => Object.assign({
     accessToken,
-    container,
     style,
     center,
     zoom,
@@ -62,21 +42,32 @@
     wheelZoomRate,
     version,
     customStylesheetUrl,
-    map
-  }, options)
+    ...options
+  }))
 
   const queue = new EventQueue()
 
-  function init ({ detail }) {
+  function init (detail) {
     map = detail.map
     mapbox = detail.mapbox
     queue.start(map)
-    dispatch('ready')
+
+    map.on('zoomend', (e) => {
+      zoom = map.getZoom()
+    })
+
+    onready?.({ map, mapbox })
   }
 
-  onDestroy(() => {
-    queue.stop()
-    map = undefined
+  $effect(() => {
+    return () => {
+      queue.stop()
+      map = undefined
+    }
+  })
+
+  $effect(() => {
+    zoom && setZoom(zoom)
   })
 
   export function fitBounds (bbox, data = {}) {
@@ -110,6 +101,24 @@
   export function getMapbox () {
     return mapbox
   }
-
-  $: zoom && setZoom(zoom)
 </script>
+
+<div
+  {@attach mapAttachment(
+      optionsWithDefaults,
+      { onready: init, ondragend, ondrag, onmoveend, onzoomstart, onzoom, onzoomend }
+    )}
+  {...rest}
+  role="presentation"
+>
+  {#if map}
+    {@render children?.()}
+  {/if}
+</div>
+
+<style>
+  div {
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/src/lib/map/Marker.svelte

@@ -10,36 +10,40 @@
     return Math.round(Math.random() * 255)
   }
 
+  let {
+    lat,
+    lng,
+    label = 'Marker',
+    popupClassName = 'beyonk-mapbox-popup',
+    markerOffset = [ 0, 0 ],
+    popupOffset = 10,
+    color = randomColour(),
+    popup = true,
+    popupOptions = {},
+    markerOptions = {},
+    children,
+    popupContent
+  } = $props()
+
+  let marker = $state()
+  let element = $state()
+  let elementPopup = $state()
+
   function move (lng, lat) {
     marker.setLngLat({ lng, lat })
   }
 
-  export let lat
-  export let lng
-  export let label = 'Marker'
-  export let popupClassName = 'beyonk-mapbox-popup'
-  export let markerOffset = [ 0, 0 ]
-  export let popupOffset = 10
-  export let color = randomColour()
-  export let popup = true
-  export let popupOptions = {}
-  export let markerOptions = {}
-
-  let marker
-  let element
-  let elementPopup
-
-  $: marker && move(lng, lat)
+  $effect(() => {
+    if (marker) move(lng, lat)
+  })
 
   onMount(() => {
     const namedParams = Object.assign(
-      {
-        offset: markerOffset
-      },
+      { offset: markerOffset },
       element.hasChildNodes() ? { element } : { color }
     )
     marker = new mapbox.Marker(Object.assign(namedParams, markerOptions))
-  
+
     if (popup) {
       const namedPopupParams = { offset: popupOffset, className: popupClassName }
       const popupEl = new mapbox.Popup(Object.assign(namedPopupParams, popupOptions))
@@ -48,7 +52,6 @@
       } else {
         popupEl.setText(label)
       }
-
       marker.setPopup(popupEl)
     }
 
@@ -67,9 +70,9 @@
 </script>
 
 <div bind:this={element}>
-<slot></slot>
+  {@render children?.()}
 </div>
 
 <div class='popup' bind:this={elementPopup}>
-  <slot name="popup"></slot>
+  {@render popupContent?.()}
 </div>

package/src/lib/map/controls/GeolocateControl.svelte

@@ -1,56 +1,33 @@
-<div
-	bind:this={dispatcher}
-	on:error
-	on:geolocate
-	on:outofmaxbounds
-	on:trackuserlocationend
-	on:trackuserlocationstart
-/>
-
 <script>
-	import { getContext, onMount } from 'svelte'
-	import { contextKey } from '../../mapbox.js'
-	import { bindEvents } from '../../event-bindings.js'
-
-	const { getMap, getMapbox } = getContext(contextKey)
-	const map = getMap()
-	const mapbox = getMapbox()
-
-	export let position = 'top-left'
-	export let options = {}
-
-	let dispatcher
-
-	const handlers = {
-	  error: (el, ev) => {
-	    return [ 'error', ev ]
-	  },
-	  geolocate: (el, ev) => {
-	    return [ 'geolocate', ev ]
-	  },
-	  outofmaxbounds: (el, ev) => {
-	    return [ 'outofmaxbounds', ev ]
-	  },
-	  trackuserlocationend: (el, ev) => {
-	    return [ 'trackuserlocationend', ev ]
-	  },
-	  trackuserlocationstart: (el, ev) => {
-	    return [ 'trackuserlocationstart', ev ]
-	  }
-	}
-
-	const geolocate = new mapbox.GeolocateControl(options)
-	map.addControl(geolocate, position)
-
-	onMount(() => {
-	  return bindEvents(geolocate, handlers, mapbox, dispatcher)
-	})
-
-	export function trigger () {
-	  geolocate.trigger()
-	}
+  import { getContext, onMount, untrack } from 'svelte'
+  import { contextKey } from '../../mapbox.js'
+
+  const { getMap, getMapbox } = getContext(contextKey)
+  const map = getMap()
+  const mapbox = getMapbox()
+
+  let { position = 'top-left', options = {}, onerror, ongeolocate, onoutofmaxbounds, ontrackuserlocationend, ontrackuserlocationstart, ...rest } = $props()
+
+  let dispatcher = $state()
+
+  const geolocate = new mapbox.GeolocateControl(untrack(() => options))
+  map.addControl(geolocate, untrack(() => position))
+
+  onMount(() => {
+    geolocate.on('error', onerror)
+    geolocate.on('geolocate', ongeolocate)
+    geolocate.on('outofmaxbounds', onoutofmaxbounds)
+    geolocate.on('trackuserlocationend', ontrackuserlocationend)
+    geolocate.on('trackuserlocationstart', ontrackuserlocationstart)
+  })
+
+  export function trigger () {
+    geolocate.trigger()
+  }
 </script>
 
+<div bind:this={dispatcher} {...rest}></div>
+
 <style>
-	div { display: none; }
+  div { display: none; }
 </style>

package/src/lib/map/controls/NavigationControl.svelte

@@ -1,14 +1,13 @@
 <script>
-	import { getContext } from 'svelte'
-	import { contextKey } from '../../mapbox.js'
+  import { getContext, untrack } from 'svelte'
+  import { contextKey } from '../../mapbox.js'
 
-	const { getMap, getMapbox } = getContext(contextKey)
-	const map = getMap()
-	const mapbox = getMapbox()
+  const { getMap, getMapbox } = getContext(contextKey)
+  const map = getMap()
+  const mapbox = getMapbox()
 
-	export let position = 'top-right'
-	export let options = {}
+  let { position = 'top-right', options = {} } = $props()
 
-	const nav = new mapbox.NavigationControl(options)
-	map.addControl(nav, position)
-</script>
+  const nav = new mapbox.NavigationControl(untrack(() => options))
+  map.addControl(nav, untrack(() => position))
+</script>

package/src/lib/map/controls/ScaleControl.svelte

@@ -1,19 +1,18 @@
 <script>
-	import { getContext } from 'svelte'
-	import { contextKey } from '../../mapbox.js'
+  import { getContext, untrack } from 'svelte'
+  import { contextKey } from '../../mapbox.js'
 
-	const { getMap, getMapbox } = getContext(contextKey)
-	const map = getMap()
-	const mapbox = getMapbox()
+  const { getMap, getMapbox } = getContext(contextKey)
+  const map = getMap()
+  const mapbox = getMapbox()
 
-	export let position = 'bottom-right'
-	export let options = {}
+  let { position = 'bottom-right', options = {} } = $props()
 
-	const optionsWithDefaults = Object.assign({
-	  maxWidth: 80,
-	  unit: 'metric'
-	}, options)
+  const optionsWithDefaults = untrack(() => Object.assign({
+    maxWidth: 80,
+    unit: 'metric'
+  }, options))
 
-	const scale = new mapbox.ScaleControl(optionsWithDefaults)
-	map.addControl(scale, position)
-</script>
+  const scale = new mapbox.ScaleControl(optionsWithDefaults)
+  map.addControl(scale, untrack(() => position))
+</script>

package/src/lib/map/map-attachment.js

@@ -0,0 +1,56 @@
+import { load } from '../asset-loader.js'
+
+export default function mapAttachment (options = {}, { ondragend, ondrag, onmoveend, onzoomstart, onzoom, onzoomend, onready }) {
+  return (element) => {
+    let map
+
+    function init (options) {
+      window.mapboxgl.accessToken = options.accessToken
+      const el = new window.mapboxgl.Map(options)
+
+      el.on('dragend', () => {
+        ondragend?.({ center: el.getCenter() })
+      })
+      el.on('drag', () => {
+        ondrag?.({ center: el.getCenter() })
+      })
+      el.on('moveend', () => {
+        onmoveend?.({ center: el.getCenter() })
+      })
+      el.on('zoomstart', () => {
+        onzoomstart?.({ zoom: el.getZoom() })
+      })
+      el.on('zoom', () => {
+        onzoom?.({ zoom: el.getZoom() })
+      })
+      el.on('zoomend', () => {
+        onzoomend?.({ zoom: el.getZoom() })
+      })
+      el.on('load', () => {
+        onready?.({ map: el, mapbox: window.mapboxgl })
+      })
+    }
+
+    const resources = [
+      { type: 'script', attr: 'src', value: `//api.mapbox.com/mapbox-gl-js/${options.version}/mapbox-gl.js`, id: 'byk-gl-js' },
+      { type: 'link', attr: 'href', value: `//api.mapbox.com/mapbox-gl-js/${options.version}/mapbox-gl.css`, id: 'byk-gl-css' }
+    ]
+
+    const customStylesheetUrl = options.customStylesheetUrl
+    if (customStylesheetUrl) {
+      resources.push({ type: 'link', attr: 'href', value: customStylesheetUrl, id: 'byk-mcsu-css' })
+    }
+
+    let unbind = () => {}
+    load(resources, () => {
+      unbind = init({ ...options, container: element })
+    })
+
+    return {
+      destroy () {
+        unbind()
+        map && map.remove && map.remove()
+      }
+    }
+  }
+}

package/src/lib/queue.svelte.js

@@ -0,0 +1,31 @@
+export class EventQueue {
+  queue = []
+  started = false
+  map = null
+
+  send (command, params = []) {
+    if (!command) { return }
+    this.queue.push([ command, params ])
+    this.#process()
+  }
+
+  start (map) {
+    this.started = true
+    this.map = map
+  }
+
+  #process () {
+    if (!this.started) { return }
+    while (this.queue.length) {
+      const [ command, params ] = this.queue.shift()
+      this.map[command].apply(this.map, params)
+    }
+  }
+
+  stop () {
+    if (!this.started) { return }
+    this.queue = []
+    this.map = null
+    this.started = false
+  }
+}

package/src/routes/+page.svelte

@@ -1,3 +1,47 @@
+<script>
+  import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public'
+  import { Map, Geocoder, Marker, controls } from '$lib/components.js'
+  import Earthquakes from './_Earthquakes.svelte'
+  import { untrack } from 'svelte'
+
+  const { GeolocateControl, NavigationControl } = controls
+
+  let place = $state()
+  let placeName = $derived(untrack(() => place?.place_name || '(Near London)'))
+  let page = $state('about')
+  let center = $state({ lat: 53.3358627, lng: -2.8572362 })
+  let marker = $derived(center)
+  let zoom = $state(11.15)
+  let mapComponent = $state()
+
+  function navigate (next) {
+    page = next
+  }
+
+  function randomLng () {
+    return 77 + (Math.random() - 0.5) * 30
+  }
+
+  function randomLat () {
+    return 13 + (Math.random() - 0.5) * 30
+  }
+
+  function flyToRandomPlace () {
+    mapComponent.flyTo({
+      center: [ randomLng(), randomLat() ],
+      essential: true
+    })
+  }
+
+  function recentre (result) {
+    center = result.center
+  }
+
+  function drag (result) {
+    marker = result.center
+  }
+</script>
+
 <header>
   <div class="container">
     <div class="row">
@@ -31,7 +75,7 @@
         </div>
       </div>
       <div class="col-lg-2 col-md-3 col-xs-12 right">
-        <a class="btn" href="http://www.github.com/beyonk-adventures/svelte-mapbox">Github</a>
+        <a class="btn" href="http://www.github.com/beyonk/svelte-mapbox">Github</a>
       </div>
     </div>
   </div>
@@ -42,39 +86,43 @@
       <div class="row">
         <aside>
           <div class="menu-box">
-            <h4>Navigation</h4>  
+            <h4>Navigation</h4>
             <nav>
               <ul>
-                <li><a href="#geocoder" on:click={() => { navigate('geocoder') } } class:current={page === 'geocoder'}>Geocoder</a></li>
-                <li><a href="#map" on:click={() => { navigate('map') }} class:current={page === 'map'}>Map</a></li>
-              </ul>          
+                <li><a href="#geocoder" onclick={() => navigate('geocoder')} class:current={page === 'geocoder'}>Geocoder</a></li>
+                <li><a href="#map" onclick={() => navigate('map')} class:current={page === 'map'}>Map</a></li>
+              </ul>
             </nav>
           </div>
         </aside>
         <div class="content-info">
           <div class="action-buttons">
-            <button id="fly-to" on:click={flyToRandomPlace}
-              >Fly to random location</button
-            >
-      
-            <button
-              id="change-zoom"
-              on:click={() => (zoom = Math.floor(Math.random() * 10))}
-              >Change Zoom Level</button
-            >
-            </div>
+            <button id="fly-to" onclick={flyToRandomPlace}>Fly to random location</button>
+            <button id="change-zoom" onclick={() => (zoom = Math.floor(Math.random() * 10))}>Change Zoom Level</button>
+          </div>
 
           <div class="section-txt" id="geocoder">
             <form>
-            <Geocoder value="(Near London)" accessToken={PUBLIC_MAPBOX_TOKEN} on:result={placeChanged} on:clear={() => mapComponent.setCenter({ lng: 0, lat: 0 })} />
-            {#if place}
-              <dl>
-                <dt>Name:</dt>
-                <dd>{place.label}</dd>
-                <dt>Geolocation:</dt>
-                <dd>lat: {place.geometry.lat}, lng: {place.geometry.lng}</dd>
-              </dl>
-            {/if}
+              <Geocoder
+                bind:value={placeName}
+                accessToken={PUBLIC_MAPBOX_TOKEN}
+                onresult={({ result }) => {
+                  console.log('sets center', result.center)
+                  mapComponent.setCenter(result.center, 14)
+                  place = result
+                }}
+                onclear={() => {
+                  mapComponent.setCenter({ lng: 0, lat: 0 })
+                }}
+              />
+              {#if place}
+                <dl>
+                  <dt>Name:</dt>
+                  <dd>{place.place_name}</dd>
+                  <dt>Geolocation:</dt>
+                  <dd>lat: {place.geometry.coordinates[1]}, lng: {place.geometry.coordinates[0]}</dd>
+                </dl>
+              {/if}
             </form>
           </div>
           <div class="section-txt" id="map">
@@ -82,14 +130,14 @@
               <Map
                 bind:this={mapComponent}
                 accessToken={PUBLIC_MAPBOX_TOKEN}
-                on:recentre={recentre}
-                on:drag={drag}
+                onrecentre={recentre}
+                ondrag={drag}
                 {center}
                 bind:zoom
               >
                 <Earthquakes />
                 <NavigationControl />
-                <GeolocateControl on:geolocate={e => console.log('geolocated', e.detail)} />
+                <GeolocateControl ongeolocate={({ result }) => console.log('geolocated', result)} />
                 <Marker lat={marker.lat} lng={marker.lng} />
               </Map>
             </div>
@@ -117,7 +165,7 @@
   <div class="container">
     <div class="row">
       <div class="col-lg-12 center">
-        © 2019 Beyonk. All rights reserved.
+        © 2026 Beyonk. All rights reserved.
       </div>
     </div>
   </div>
@@ -157,55 +205,4 @@
     color: #fff;
     background: #ee8a65;
   }
-
 </style>
-
-<script>
-  import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public'
-  import { Map, Geocoder, Marker, controls } from '$lib/components.js'
-  import Earthquakes from './_Earthquakes.svelte'
-
-  const { GeolocateControl, NavigationControl } = controls
-  const place = null
-
-  let page = 'about'
-  let center = { lat: 53.3358627, lng: -2.8572362 }
-  let marker = center
-  let zoom = 11.15
-  let mapComponent
-
-  function navigate (next) {
-    page = next
-  }
-
-  function placeChanged (e) {
-    const { result } = e.detail
-    mapComponent.setCenter(result.center, 14)
-  }
-  
-  function randomLng () {
-    return 77 + (Math.random() - 0.5) * 30
-  }
-
-  function randomLat () {
-    return 13 + (Math.random() - 0.5) * 30
-  }
-
-  function flyToRandomPlace () {
-    mapComponent.flyTo({
-      center: [
-        randomLng(),
-        randomLat()
-      ],
-      essential: true
-    })
-  }
-
-  function recentre ({ detail }) {
-    center = detail.center
-  }
-
-  function drag ({ detail }) {
-    marker = detail.center
-  }
-</script>

package/svelte.config.js

@@ -1,5 +1,9 @@
 
 /** @type {import('@sveltejs/kit').Config} */
-const config = {}
+const config = {
+  vitePlugin: {
+    inspector: true
+  }
+}
 
 export default config

package/eslint.config.mjs.disabled

@@ -1,21 +0,0 @@
-import path from "node:path";
-import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const compat = new FlatCompat({
-    baseDirectory: __dirname,
-    recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all
-});
-
-export default [{
-    ignores: ["**/package", "**/.svelte-kit"],
-}, ...compat.extends("@beyonk/eslint-config/svelte"), {
-    languageOptions: {
-        ecmaVersion: 2020,
-        sourceType: "module",
-    },
-}];

package/src/lib/event-bindings.js

@@ -1,24 +0,0 @@
-function bindEvents (el, handlers, mapbox, node) {
-  const unbindings = []
-
-  for (const [ handler, fn ] of Object.entries(handlers)) {
-    const cmd = ev => {
-      const [ eventName, detail ] = fn(el, ev, mapbox)
-      node.dispatchEvent(
-        new CustomEvent(eventName, { detail })
-      )
-    }
-    el.on(handler, cmd)
-    unbindings.push([ handler, cmd ])
-  }
-
-  return () => {
-    for (const [ handler, cmd ] of unbindings) {
-      el.off(handler, cmd)
-    }
-  }
-}
-
-export {
-  bindEvents
-}

package/src/lib/geocoder/geocoder-action.js

@@ -1,60 +0,0 @@
-import { load } from '../asset-loader.js'
-import { bindEvents } from '../event-bindings.js'
-
-export default function action (node, options = {}) {
-  let map
-
-  const resources = [
-    { type: 'script', value: `//api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/${options.version}/mapbox-gl-geocoder.min.js`, id: 'byk-gc-js' }
-  ]
-
-  const customStylesheetUrl = options.customStylesheetUrl
-  if (customStylesheetUrl) {
-    resources.push({ type: 'link', value: customStylesheetUrl, id: 'byk-gcsu-css' })
-  } else {
-    resources.push({ type: 'link', value: `//api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/${options.version}/mapbox-gl-geocoder.css`, id: 'byk-gc-css' })
-  }
-
-  let unbind = () => {}
-  load(resources, () => {
-    unbind = init(options, node)
-  })
-
-  return {
-    destroy () {
-      unbind()
-      map && map.remove && map.remove()
-    }
-  }
-}
-
-function init (options, node) {
-  const geocoder = new window.MapboxGeocoder(options)
-  geocoder.addTo(`#${node.id}`)
-  if (options.value) {
-    geocoder.setInput(options.value)
-  }
-
-  return bindEvents(geocoder, handlers, false, node)
-}
-
-const handlers = {
-  results: (el, ev) => {
-    return [ 'results', ev ]
-  },
-  result: (el, ev) => {
-    return [ 'result', ev ]
-  },
-  loading: (el, ev) => {
-    return [ 'loading', ev ]
-  },
-  error: (el, ev) => {
-    return [ 'error', ev ]
-  },
-  clear: (el, ev) => {
-    return [ 'clear', ev ]
-  },
-  load: el => {
-    return [ 'ready', { geocoder: el } ]
-  }
-}

package/src/lib/map/map-action.js

@@ -1,62 +0,0 @@
-import { load } from '../asset-loader.js'
-import { bindEvents } from '../event-bindings.js'
-
-export default function action (node, options = {}) {
-  let map
-
-  const resources = [
-    { type: 'script', attr: 'src', value: `//api.mapbox.com/mapbox-gl-js/${options.version}/mapbox-gl.js`, id: 'byk-gl-js' },
-    { type: 'link', attr: 'href', value: `//api.mapbox.com/mapbox-gl-js/${options.version}/mapbox-gl.css`, id: 'byk-gl-css' }
-  ]
-
-  const customStylesheetUrl = options.customStylesheetUrl
-  if (customStylesheetUrl) {
-    resources.push({ type: 'link', attr: 'href', value: customStylesheetUrl, id: 'byk-mcsu-css' })
-  }
-
-  let unbind = () => {}
-  load(resources, () => {
-    unbind = init({ ...options, container: node }, node)
-  })
-
-  return {
-    destroy () {
-      unbind()
-      map && map.remove && map.remove()
-    }
-  }
-}
-
-function init (options, node) {
-  window.mapboxgl.accessToken = options.accessToken
-  const el = new window.mapboxgl.Map(options)
-
-  return bindEvents(el, handlers, window.mapboxgl, node)
-}
-
-const handlers = {
-  dragend: el => {
-    return [ 'dragend', { center: el.getCenter() } ]
-  },
-  drag: el => {
-    return [ 'drag', { center: el.getCenter() } ]
-  },
-  moveend: el => {
-    return [ 'recentre', { center: el.getCenter() } ]
-  },
-  click: (el, { lngLat }) => {
-    return [ 'click', { lng: lngLat.lng, lat: lngLat.lat } ]
-  },
-  zoomstart: el => {
-    return [ 'zoomstart', { zoom: el.getZoom() } ]
-  },
-  zoom: el => {
-    return [ 'zoom', { zoom: el.getZoom() } ]
-  },
-  zoomend: el => {
-    return [ 'zoomend', { zoom: el.getZoom() } ]
-  },
-  load: (el, ev, mapbox) => {
-    return [ 'ready', { map: el, mapbox } ]
-  }
-}

package/src/lib/queue.js

@@ -1,31 +0,0 @@
-import { writable } from 'svelte/store'
-
-export class EventQueue {
-  constructor () {
-    this.queue = writable([])
-    this.unsubscribe = null
-    this.started = false
-  }
-
-  send (command, params = []) {
-    if (!command) { return }
-    this.queue.update(q => ([ ...q, [ command, params ] ]))
-  }
-
-  start (map) {
-    this.unsubscribe = this.queue.subscribe(queue => {
-      while (queue.length) {
-        const [ command, params ] = queue.shift()
-        map[command].apply(map, params)
-      }
-    })
-    this.started = true
-  }
-
-  stop () {
-    if (!this.started) { return }
-    this.unsubscribe()
-    this.queue = writable([])
-    this.started = false
-  }
-}