/svelte-mapbox

MapBox Map and Autocomplete components for Svelte (or Vanilla JS)

Primary LanguageHTML

Beyonk

Svelte MapBox

js-standard-style CircleCI svelte-v2 svelte-v3

Maps and Geocoding (Autocomplete) components in Vanilla JS (or Svelte)

  • SSR Ready

  • Lightweight

  • No clientside dependencies (Map)

  • Allow creation of custom Svelte components on the map

  • Note that the GeoCoder has a clientside dependency, since it adds about 0.5mb to the bundle size, and significant time to the build time if bundled.

Installing

It is PARAMOUNT that you install this as a development dependency, not a runtime dependency. It won't work otherwise. Svelte bundles everything, so you should need any runtime dependencies at all

npm install --save-dev @beyonk/svelte-mapbox

Basic Usage (Map)

The container component is the map, and there are a variety of components which go on the map.

<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
>
  <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' }} />
  <ScalingControl />
</Map>

<script>
  import { Map, Geocoder, Marker, controls } from '@beyonk/svelte-mapbox'
	import Earthquakes from './Earthquakes.svelte' // custom component
  
  const { GeolocateControl, NavigationControl, ScalingControl } = controls

  // Usage of methods like setCenter and flyto
  mapComponent.setCenter([lng,lat],zoom) // zoom is optional
  mapComponent.flyTo({center:[lng,lat]}) // documentation (https://docs.mapbox.com/mapbox-gl-js/example/flyto)
</script>

Basic Usage (Geocoder)

The Geocoder is an autocompleting place lookup, which returns a lat and lng for a place.

<Geocoder accessToken="<your api key>" on:result={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

The most important event is on:result 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.

Demo

To see the earthquakes demo:

npm run dev