@beyonk/svelte-mapbox 12.0.0 → 12.1.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beyonk/svelte-mapbox",
-  "version": "12.0.0",
+  "version": "12.1.0",
   "devDependencies": {
     "@beyonk/eslint-config": "^8.0.2",
     "@eslint/eslintrc": "^3.1.0",

package/src/lib/geocoder/Geocoder.svelte

@@ -10,6 +10,12 @@
     value = null,
     customStylesheetUrl = false,
     geocoder = $bindable(),
+    onresults,
+    onresult,
+    onloading,
+    onerror,
+    onclear,
+    onload,
     ...rest
   } = $props()
 
@@ -24,15 +30,14 @@
     value
   }, options))
 
-  function init (e) {
-    geocoder = e.detail.geocoder
-    onready?.()
+  function init (detail) {
+    geocoder = detail.geocoder
   }
 </script>
 
 <div
   id={fieldId}
-  {@attach geocoderAttachment(optionsWithDefaults)}
+  {@attach geocoderAttachment(optionsWithDefaults, { onresults, onresult, onloading, onerror, onclear, onload })}
   onready={init}
   {...rest}
 ></div>

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

@@ -1,10 +1,8 @@
 import { load } from '../asset-loader.js'
-import { bindEvents } from '../event-bindings.js'
 
-export default function geocoderAttachment (options) {
+export default function geocoderAttachment (options, { onresults, onresult, onloading, onerror, onclear, onready }) {
   return (element) => {
     let geocoderInstance
-    let unbind = () => {}
 
     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' }
@@ -23,33 +21,30 @@ export default function geocoderAttachment (options) {
       if (options.value) {
         geocoderInstance.setInput(options.value)
       }
-      unbind = bindEvents(geocoderInstance, handlers, false, element)
+
+      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 () => {
-      unbind()
       geocoderInstance && geocoderInstance.remove && geocoderInstance.remove()
     }
   }
 }
-
-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.svelte

@@ -5,7 +5,6 @@
   import { EventQueue } from '../queue.svelte.js'
 
   let {
-    map = $bindable(null),
     version = 'v3.20.0',
     center = [ 0, 0 ],
     zoom = $bindable(9),
@@ -17,13 +16,24 @@
     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
+  })
 
-  const optionsWithDefaults = {
+  const optionsWithDefaults = $derived.by(() => Object.assign({
     accessToken,
     style,
     center,
@@ -32,26 +42,21 @@
     wheelZoomRate,
     version,
     customStylesheetUrl,
-    map,
     ...options
-  }
-
-  setContext(contextKey, {
-    getMap: () => map,
-    getMapbox: () => mapbox
-  })
+  }))
 
   const queue = new EventQueue()
 
-  function init (e) {
-    map = e.detail.map
-    mapbox = e.detail.mapbox
+  function init (detail) {
+    map = detail.map
+    mapbox = detail.mapbox
     queue.start(map)
-    onready?.()
 
     map.on('zoomend', (e) => {
       zoom = map.getZoom()
     })
+
+    onready?.({ map, mapbox })
   }
 
   $effect(() => {
@@ -99,8 +104,10 @@
 </script>
 
 <div
-  {@attach mapAttachment(optionsWithDefaults)}
-  onready={init}
+  {@attach mapAttachment(
+      optionsWithDefaults,
+      { onready: init, ondragend, ondrag, onmoveend, onzoomstart, onzoom, onzoomend }
+    )}
   {...rest}
   role="presentation"
 >

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

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

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

@@ -1,16 +1,34 @@
 import { load } from '../asset-loader.js'
-import { bindEvents } from '../event-bindings.js'
 
-export default function mapAttachment (options = {}) {
+export default function mapAttachment (options = {}, { ondragend, ondrag, onmoveend, onzoomstart, onzoom, onzoomend, onready }) {
   return (element) => {
-    console.log('attach', element, options)
     let map
 
     function init (options) {
       window.mapboxgl.accessToken = options.accessToken
       const el = new window.mapboxgl.Map(options)
 
-      return bindEvents(el, handlers, window.mapboxgl, element)
+      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 = [
@@ -36,30 +54,3 @@ export default function mapAttachment (options = {}) {
     }
   }
 }
-
-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/routes/+page.svelte

@@ -2,10 +2,12 @@
   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(null)
+  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)
@@ -16,12 +18,6 @@
     page = next
   }
 
-  function placeChanged (e) {
-    const { result } = e.detail
-    mapComponent.setCenter(result.center, 14)
-    place = result
-  }
-
   function randomLng () {
     return 77 + (Math.random() - 0.5) * 30
   }
@@ -37,12 +33,12 @@
     })
   }
 
-  function recentre (e) {
-    center = e.detail.center
+  function recentre (result) {
+    center = result.center
   }
 
-  function drag (e) {
-    marker = e.detail.center
+  function drag (result) {
+    marker = result.center
   }
 </script>
 
@@ -79,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>
@@ -107,7 +103,18 @@
 
           <div class="section-txt" id="geocoder">
             <form>
-              <Geocoder value="(Near London)" accessToken={PUBLIC_MAPBOX_TOKEN} onresult={placeChanged} onclear={() => mapComponent.setCenter({ lng: 0, lat: 0 })} />
+              <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>
@@ -130,7 +137,7 @@
               >
                 <Earthquakes />
                 <NavigationControl />
-                <GeolocateControl ongeolocate={e => console.log('geolocated', e.detail)} />
+                <GeolocateControl ongeolocate={({ result }) => console.log('geolocated', result)} />
                 <Marker lat={marker.lat} lng={marker.lng} />
               </Map>
             </div>
@@ -158,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>

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
-}