{"repo":"beyonk/svelte-mapbox","free":true,"listed":false,"github":"https://github.com/beyonk/svelte-mapbox","clone":"git clone https://github.com/beyonk/svelte-mapbox.git","description":"MapBox Map and Autocomplete components for Svelte (or Vanilla JS)","language":"Svelte","stars":367,"topics":["mapbox","svelte","google-maps","maps","autocomplete","geocoding","geocode","location","mapping"],"license":"MIT","category":"deployment-docker-iac","readme_excerpt":"Svelte MapBox Maps and Geocoding (Autocomplete) MapBox components in Vanilla JS (or Svelte) SvelteKit Ready 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 Basic Usage (Map) The container component is the map, and there are a variety of components which go on the map. Markers By default, markers are typical map pins to which you can pass a color property. You may also create a custom pin with the default slot. Marker Popups By default a popup is revealed when you click a pin. It is populated with text provided in the label property. To indicate interactivity, you may target the marker with some custom CSS: Optionally, disable the popup with the popup={false} property: You may alternatively pass a custom DOM element to the marker to use as a popup. Reactive Properties The 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. This 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. This is often easier than waiting for events such as recentre or zoom to be fired, to update markers and similar: Methods The map has a v","default_branch":null,"files":null,"tree":[],"storefront":"/r/beyonk","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/beyonk/svelte-mapbox/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}