{"id":13723613,"url":"https://github.com/beyonk-group/svelte-mapbox","last_synced_at":"2025-05-07T17:30:42.930Z","repository":{"id":40367875,"uuid":"197826411","full_name":"beyonk-group/svelte-mapbox","owner":"beyonk-group","description":"MapBox Map and Autocomplete components for Svelte (or Vanilla JS)","archived":false,"fork":false,"pushed_at":"2024-02-23T21:50:54.000Z","size":1192,"stargazers_count":333,"open_issues_count":22,"forks_count":61,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-04-13T18:11:44.657Z","etag":null,"topics":["autocomplete","geocode","geocoding","google-maps","location","mapbox","mapping","maps","svelte"],"latest_commit_sha":null,"homepage":null,"language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beyonk-group.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-19T18:49:31.000Z","updated_at":"2024-05-10T02:45:31.025Z","dependencies_parsed_at":"2023-07-12T16:31:29.329Z","dependency_job_id":"eaf0ba43-ef33-4ff6-abbd-ddfa37939924","html_url":"https://github.com/beyonk-group/svelte-mapbox","commit_stats":null,"previous_names":["beyonk-group/svelte-mapbox","beyonk-adventures/svelte-mapbox"],"tags_count":73,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-mapbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-mapbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-mapbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyonk-group%2Fsvelte-mapbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beyonk-group","download_url":"https://codeload.github.com/beyonk-group/svelte-mapbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252926518,"owners_count":21826326,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","geocode","geocoding","google-maps","location","mapbox","mapping","maps","svelte"],"created_at":"2024-08-03T01:01:43.355Z","updated_at":"2025-05-07T17:30:42.624Z","avatar_url":"https://github.com/beyonk-group.png","language":"Svelte","funding_links":[],"categories":["components and libraries"],"sub_categories":["maps"],"readme":"\u003ca href=\"https://beyonk.com\"\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/218949/144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png\" width=\"198\" /\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n\u003c/a\u003e\n\n## Svelte MapBox\n\n[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) [![svelte-v3](https://img.shields.io/badge/svelte-v3-blueviolet.svg)](https://svelte.dev) ![publish](https://github.com/beyonk-adventures/svelte-mapbox/workflows/publish/badge.svg)\n\nMaps and Geocoding (Autocomplete) [MapBox](https://www.mapbox.com/) components in Vanilla JS (or Svelte)\n\n* SvelteKit Ready\n* SSR Ready\n* Lightweight\n* No clientside dependencies (Map)\n* Allow creation of custom Svelte components on the map\n\n* 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.\n\n## Installing\n\n```\nnpm install --save-dev @beyonk/svelte-mapbox\n```\n\n### Basic Usage (Map)\n\nThe container component is the map, and there are a variety of components which go on the map.\n\n```jsx\n\u003cMap\n  accessToken=\"\u003cyour api key\u003e\" // add your api key here\n  bind:this={mapComponent} // Get reference to your map component to use methods\n  on:recentre={e =\u003e console.log(e.detail.center.lat, e.detail.center.lng) } // recentre events\n  options={{ scrollZoom: false }} // // add arbitrary options to the map from the mapbox api\n\u003e\n  \u003cEarthquakes /\u003e // Any custom component you create or want here - see marker example\n  \u003cMarker lat={someLat} lng={someLng} color=\"rgb(255,255,255)\" label=\"some marker label\" popupClassName=\"class-name\" /\u003e // built in Marker component\n  \u003cNavigationControl /\u003e\n  \u003cGeolocateControl options={{ some: 'control-option' }} on:eventname={eventHandler} /\u003e\n  \u003cScaleControl /\u003e\n\u003c/Map\u003e\n\n\u003cscript\u003e\n  import { Map, Geocoder, Marker, controls } from '@beyonk/svelte-mapbox'\n\timport Earthquakes from './Earthquakes.svelte' // custom component\n  \n  const { GeolocateControl, NavigationControl, ScaleControl } = controls\n\n  // Usage of methods like setCenter and flyto\n  mapComponent.setCenter([lng,lat],zoom) // zoom is optional\n  mapComponent.flyTo({center:[lng,lat]}) // documentation (https://docs.mapbox.com/mapbox-gl-js/example/flyto)\n\n  // Define this to handle `eventname` events - see [GeoLocate Events](https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol-events)\n  function eventHandler (e) {\n    const data = e.detail\n    // do something with `data`, it's the result returned from the mapbox event\n  }\n\u003c/script\u003e\n\n\u003cstyle\u003e\n    :global(.mapboxgl-map) {\n        height: 200px;\n        // sometimes mapbox objects don't render as expected; troubleshoot by changing the height/width to px\n    }\n\u003c/style\u003e\n```\n\n### Markers\n\nBy default, markers are typical map pins to which you can pass a color property.\n\n```jsx\n\u003cMarker color={brandColour} /\u003e\n```\n\nYou may also create a custom pin with the default slot.\n\n```jsx\n\u003cMarker\nlat={waypoint.geo.lat}\nlng={waypoint.geo.lng}\n\u003e \n  \u003ca href={waypoint.slug}\u003e\n    \u003cdiv class='myMarker {($mapData.activeMarker == waypoint.id) ? 'active' : ''}' \n    style=\"\n    color:{mainPoint.color};\n    background-image: url('{(waypoint.images != undefined) ? waypoint.images[0].thumb.url : ''}');\n    \"\u003e\n    \u003c/div\u003e\n  \u003c/a\u003e\n\u003c/Marker\u003e\n```\n\n### Marker Popups\nBy default a popup is revealed when you click a pin.  It is populated with text provided in the label property.\n\n```jsx\n\u003cMarker label={markerText} /\u003e\n```\n\nTo indicate interactivity, you may target the marker with some custom CSS:\n\n```jsx\n\u003cstyle\u003e\n    :global(.mapboxgl-marker){\n      cursor: pointer;\n    }   \n\u003c/style\u003e\n```\n\nOptionally, disable the popup with the `popup={false}` property:\n\n```jsx\n\u003cMarker popup={false} /\u003e\n```\n\nYou may alternatively pass a custom DOM element to the marker to use as a popup. \n\n```jsx\n\u003cMarker lat={pin.coordinates.latitude} lng={pin.coordinates.longitude}\u003e\n    \u003cdiv class=\"content\" slot=\"popup\"\u003e\n      \u003ch3\u003e{pin.name}\u003c/h3\u003e\n        \u003cMarkdown source={pin.description} /\u003e\n      \u003c/div\u003e\n      \u003cimg src=\"{pin.images.length \u003e 0 ? pin.images[0].url : \"\"}\" alt=\"{pin.name}\"/\u003e\n    \u003c/div\u003e \n\u003c/Marker\u003e\n```\n\n### Reactive Properties\n\nThe map has reactive properties for `center` and `zoom`. This means that if you set these properties, or modify them whilst the map is displayed, the map will react accordingly.\n\nThis also means that if you bind these properties to a variable, that variable will automatically be updated with the current `center` and `zoom` of the map if the user moves or zooms the map.\n\nThis is often easier than waiting for events such as `recentre` or `zoom` to be fired, to update markers and similar:\n\n```jsx\n\u003cMap accessToken=\"\u003cyour api key\u003e\" bind:center bind:zoom\u003e\n  \u003cMarker bind:lat bind:lng /\u003e\n\u003c/Map\u003e\n\n\u003cscript\u003e\n  let center\n  let zoom\n\n  $: lng = center[0]\n  $: lat = center[1]\n\u003c/script\u003e\n```\n\n### Methods\n\nThe map has a variety of methods which delegate to a queue. The reason for this is that MapBox is quite a heavy library, and rendering a map is a pretty heavy operation. It's hard to guarantee\nwhen everything is ready in your browser, and when you can start doing things with it.\n\nIn case you want raw map access to interact directly with the map, you can call `getMap` on the map and interact with it that way. However we don't recommend it, as you have no guarantees that the\nmap is ready in your browser when you call it this way.\n\n## Basic Usage (Geocoder)\n\nThe Geocoder is an autocompleting place lookup, which returns a lat and lng for a place.\n\n```jsx\n\u003cGeocoder accessToken=\"\u003cyour api key\u003e\" on:result={somePlaceChangeFunction} /\u003e\n\n\u003cscript\u003e\n  import { Geocoder } from '@beyonk/svelte-mapbox'\n\u003c/script\u003e\n```\n\nThe 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)\n\nThe most important event is `on:result` which is fired when a user selects an autocomplete result.\n\nThere 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.\n\n## Custom CSS\n\nYou can add additional css to override mapbox provided CSS by passing the `customStylesheetUrl` property to either the `Map` or `Geocoder` components.\n\n## Demo\n\nTo see the earthquakes demo:\n\nMake sure you copy the `.env` file to `.env.local` and then populate it with your mapbox key.\n\n`\nnpm run dev\n`\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyonk-group%2Fsvelte-mapbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeyonk-group%2Fsvelte-mapbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyonk-group%2Fsvelte-mapbox/lists"}