Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
@beyonk/svelte-mapbox
Advanced tools
@beyonk/svelte-mapbox - npm Package Compare versions
+1
| PUBLIC_MAPBOX_TOKEN=your_mapbox_token |
| name: publish | ||
| on: | ||
| push: | ||
| branches: | ||
| - '*' | ||
| tags: | ||
| - 'v*' | ||
| pull_request: | ||
| branches: | ||
| - '*' | ||
| env: | ||
| NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} | ||
| jobs: | ||
| publish-npm: | ||
| if: startsWith(github.ref, 'refs/tags/v') | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - name: checkout | ||
| uses: actions/checkout@v4 | ||
| - name: set up node and pnpm | ||
| run: | | ||
| corepack enable | ||
| pnpm config set '//registry.npmjs.org/:_authToken' "${NODE_AUTH_TOKEN}" | ||
| pnpm i | ||
| - name: publish | ||
| run: pnpm publish --no-git-checks --access public |
Sorry, the diff of this file is not supported yet
| { | ||
| "extends": "./.svelte-kit/tsconfig.json", | ||
| "compilerOptions": { | ||
| "baseUrl": ".", | ||
| "paths": { | ||
| "$lib": ["src/lib"], | ||
| "$lib/*": ["src/lib/*"] | ||
| } | ||
| }, | ||
| "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"] | ||
| } |
+18
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Svelte Mapbox Maps | Developer Documentation</title> | ||
| <link href='https://fonts.bunny.net/css?family=Open+Sans:400,300,600,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'> | ||
| <link href="/normalize.css" rel="stylesheet" type="text/css" /> | ||
| <link href="/prettify.css" rel="stylesheet" type="text/css" /> | ||
| <link href="/style.css" rel="stylesheet" type="text/css" /> | ||
| <link rel="icon" href="%sveltekit.assets%/favicon.png" /> | ||
| <meta name="viewport" content="width=device-width" /> | ||
| %sveltekit.head% | ||
| </head> | ||
| <body data-sveltekit-preload-data="hover"> | ||
| <div style="display: contents">%sveltekit.body%</div> | ||
| </body> | ||
| </html> | ||
| /// <reference types="@sveltejs/kit" /> |
| function load (assets, cb) { | ||
| for (const { type, value, id } of assets) { | ||
| const existing = document.getElementById(id) | ||
| if (existing) { | ||
| if (type === 'script') { | ||
| cb() | ||
| } | ||
| return | ||
| } | ||
| const tag = document.createElement(type) | ||
| tag.id = id | ||
| if (type === 'script') { | ||
| tag.async = true | ||
| tag.defer = true | ||
| tag.src = value | ||
| tag.onload = () => cb() | ||
| } else { | ||
| tag.rel = 'stylesheet' | ||
| tag.href = value | ||
| } | ||
| document.body.appendChild(tag) | ||
| } | ||
| } | ||
| export { | ||
| load | ||
| } |
| 'use strict' | ||
| import Map from './map/Map.svelte' | ||
| import Marker from './map/Marker.svelte' | ||
| import Geocoder from './geocoder/Geocoder.svelte' | ||
| import { contextKey } from './mapbox.js' | ||
| import GeolocateControl from './map/controls/GeolocateControl.svelte' | ||
| import NavigationControl from './map/controls/NavigationControl.svelte' | ||
| import ScaleControl from './map/controls/ScaleControl.svelte' | ||
| const controls = { | ||
| GeolocateControl, | ||
| NavigationControl, | ||
| ScaleControl | ||
| } | ||
| export { | ||
| Map, | ||
| Marker, | ||
| Geocoder, | ||
| contextKey, | ||
| controls | ||
| } |
| 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 | ||
| } |
| 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' }, | ||
| { type: 'link', value: `//api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/${options.version}/mapbox-gl-geocoder.css`, id: 'byk-gc-css' } | ||
| ] | ||
| const customStylesheetUrl = options.customStylesheetUrl | ||
| if (customStylesheetUrl) { | ||
| resources.push({ type: 'link', value: customStylesheetUrl, id: 'byk-gcsu-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 } ] | ||
| } | ||
| } |
| <div | ||
| id={fieldId} | ||
| use:action={optionsWithDefaults} | ||
| on:ready={init} | ||
| on:results | ||
| on:result | ||
| on:loading | ||
| on:error | ||
| on:clear | ||
| on:load | ||
| /> | ||
| <script> | ||
| import { createEventDispatcher } from 'svelte' | ||
| import action from './geocoder-action.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 | ||
| const dispatch = createEventDispatcher() | ||
| const fieldId = 'bsm-' + Math.random().toString(36).substring(6) | ||
| const optionsWithDefaults = Object.assign({ | ||
| version, | ||
| accessToken, | ||
| types: types.join(','), | ||
| placeholder, | ||
| customStylesheetUrl, | ||
| value | ||
| }, options) | ||
| function init ({ detail }) { | ||
| geocoder = detail.geocoder | ||
| dispatch('ready') | ||
| } | ||
| </script> | ||
| <style> | ||
| div { | ||
| padding: 0; | ||
| } | ||
| </style> |
| <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() | ||
| } | ||
| </script> | ||
| <style> | ||
| div { display: none; } | ||
| </style> |
| <script> | ||
| import { getContext } from 'svelte' | ||
| import { contextKey } from '../../mapbox.js' | ||
| const { getMap, getMapbox } = getContext(contextKey) | ||
| const map = getMap() | ||
| const mapbox = getMapbox() | ||
| export let position = 'top-right' | ||
| export let options = {} | ||
| const nav = new mapbox.NavigationControl(options) | ||
| map.addControl(nav, position) | ||
| </script> |
| <script> | ||
| import { getContext } from 'svelte' | ||
| import { contextKey } from '../../mapbox.js' | ||
| const { getMap, getMapbox } = getContext(contextKey) | ||
| const map = getMap() | ||
| const mapbox = getMapbox() | ||
| export let position = 'bottom-right' | ||
| export let options = {} | ||
| const optionsWithDefaults = Object.assign({ | ||
| maxWidth: 80, | ||
| unit: 'metric' | ||
| }, options) | ||
| const scale = new mapbox.ScaleControl(optionsWithDefaults) | ||
| map.addControl(scale, position) | ||
| </script> |
| 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 } ] | ||
| } | ||
| } |
| <!-- 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 { 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() | ||
| setContext(contextKey, { | ||
| getMap: () => map, | ||
| getMapbox: () => mapbox | ||
| }) | ||
| let container | ||
| let mapbox | ||
| const optionsWithDefaults = Object.assign({ | ||
| accessToken, | ||
| container, | ||
| style, | ||
| center, | ||
| zoom, | ||
| zoomRate, | ||
| wheelZoomRate, | ||
| version, | ||
| customStylesheetUrl, | ||
| map | ||
| }, options) | ||
| const queue = new EventQueue() | ||
| function init ({ detail }) { | ||
| map = detail.map | ||
| mapbox = detail.mapbox | ||
| queue.start(map) | ||
| dispatch('ready') | ||
| } | ||
| onDestroy(() => { | ||
| queue.stop() | ||
| map = undefined | ||
| }) | ||
| export function fitBounds (bbox, data = {}) { | ||
| queue.send('fitBounds', [ bbox, data ]) | ||
| } | ||
| export function flyTo (destination, data = {}) { | ||
| queue.send('flyTo', [ destination, data ]) | ||
| } | ||
| export function resize () { | ||
| queue.send('resize') | ||
| } | ||
| export function setCenter (coords, data = {}) { | ||
| queue.send('setCenter', [ coords, data ]) | ||
| } | ||
| export function setZoom (value, data = {}) { | ||
| queue.send('setZoom', [ value, data ]) | ||
| } | ||
| export function addControl (control, position = 'top-right') { | ||
| queue.send('addControl', [ control, position ]) | ||
| } | ||
| export function getMap () { | ||
| return map | ||
| } | ||
| export function getMapbox () { | ||
| return mapbox | ||
| } | ||
| $: zoom && setZoom(zoom) | ||
| </script> |
| <script> | ||
| import { onMount, getContext } from 'svelte' | ||
| import { contextKey } from '../mapbox.js' | ||
| const { getMap, getMapbox } = getContext(contextKey) | ||
| const map = getMap() | ||
| const mapbox = getMapbox() | ||
| function randomColour () { | ||
| return Math.round(Math.random() * 255) | ||
| } | ||
| 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) | ||
| onMount(() => { | ||
| const namedParams = Object.assign( | ||
| { | ||
| 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)) | ||
| if (elementPopup.hasChildNodes()) { | ||
| popupEl.setDOMContent(elementPopup) | ||
| } else { | ||
| popupEl.setText(label) | ||
| } | ||
| marker.setPopup(popupEl) | ||
| } | ||
| marker | ||
| .setLngLat({ lng, lat }) | ||
| .addTo(map) | ||
| if (!element.hasChildNodes()) element.remove() | ||
| return () => marker.remove() | ||
| }) | ||
| export function getMarker () { | ||
| return marker | ||
| } | ||
| </script> | ||
| <div bind:this={element}> | ||
| <slot></slot> | ||
| </div> | ||
| <div class='popup' bind:this={elementPopup}> | ||
| <slot name="popup"></slot> | ||
| </div> |
| const contextKey = {} | ||
| export { contextKey } |
| 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 | ||
| } | ||
| } |
| <script> | ||
| import { getContext, mount } from 'svelte' | ||
| import { contextKey } from '$lib/components.js' | ||
| import MiniScroller from './_MiniScroller.svelte' | ||
| const { getMap, getMapbox } = getContext(contextKey) | ||
| const map = getMap() | ||
| const mapbox = getMapbox() | ||
| // Add a new source from our GeoJSON data and set the | ||
| // 'cluster' option to true. GL-JS will add the point_count property to your source data. | ||
| map.addSource('earthquakes', { | ||
| type: 'geojson', | ||
| // Point to GeoJSON data. This example visualizes all M1.0+ earthquakes | ||
| // from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program. | ||
| data: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson', | ||
| cluster: true, | ||
| clusterMaxZoom: 14, // Max zoom to cluster points on | ||
| clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50) | ||
| }) | ||
| map.addLayer({ | ||
| id: 'clusters', | ||
| type: 'circle', | ||
| source: 'earthquakes', | ||
| filter: [ 'has', 'point_count' ], | ||
| paint: { | ||
| // Use step expressions (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step) | ||
| // with three steps to implement three types of circles: | ||
| // * Blue, 20px circles when point count is less than 100 | ||
| // * Yellow, 30px circles when point count is between 100 and 750 | ||
| // * Pink, 40px circles when point count is greater than or equal to 750 | ||
| 'circle-color': [ | ||
| 'step', | ||
| [ 'get', 'point_count' ], | ||
| '#51bbd6', | ||
| 100, | ||
| '#f1f075', | ||
| 750, | ||
| '#f28cb1' | ||
| ], | ||
| 'circle-radius': [ | ||
| 'step', | ||
| [ 'get', 'point_count' ], | ||
| 20, | ||
| 100, | ||
| 30, | ||
| 750, | ||
| 40 | ||
| ] | ||
| } | ||
| }) | ||
| map.addLayer({ | ||
| id: 'cluster-count', | ||
| type: 'symbol', | ||
| source: 'earthquakes', | ||
| filter: [ 'has', 'point_count' ], | ||
| layout: { | ||
| 'text-field': '{point_count_abbreviated}', | ||
| 'text-font': [ 'DIN Offc Pro Medium', 'Arial Unicode MS Bold' ], | ||
| 'text-size': 12 | ||
| } | ||
| }) | ||
| map.addLayer({ | ||
| id: 'unclustered-point', | ||
| type: 'circle', | ||
| source: 'earthquakes', | ||
| filter: [ '!', [ 'has', 'point_count' ] ], | ||
| paint: { | ||
| 'circle-color': '#11b4da', | ||
| 'circle-radius': 4, | ||
| 'circle-stroke-width': 1, | ||
| 'circle-stroke-color': '#fff' | ||
| } | ||
| }) | ||
| map.on('click', 'clusters', function (e) { | ||
| const features = map.queryRenderedFeatures(e.point, { | ||
| layers: [ 'clusters' ] | ||
| }) | ||
| const clusterId = features[0].properties.cluster_id | ||
| map.getSource('earthquakes').getClusterExpansionZoom(clusterId, function (err, zoom) { | ||
| if (err) { return } | ||
| map.easeTo({ | ||
| center: features[0].geometry.coordinates, | ||
| zoom: zoom | ||
| }) | ||
| }) | ||
| }) | ||
| map.on('mouseenter', 'clusters', function () { | ||
| map.getCanvas().style.cursor = 'pointer' | ||
| }) | ||
| map.on('mouseleave', 'clusters', function () { | ||
| map.getCanvas().style.cursor = '' | ||
| }) | ||
| map.on('click', 'unclustered-point', function (e) { | ||
| const coordinates = e.features[0].geometry.coordinates.slice() | ||
| // Ensure that if the map is zoomed out such that multiple | ||
| // copies of the feature are visible, the popup appears | ||
| // over the copy being pointed to. | ||
| while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { | ||
| coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360 | ||
| } | ||
| map.setCenter(coordinates) | ||
| new mapbox.Popup({}) | ||
| .setLngLat(coordinates) | ||
| .setHTML('<div id="mini-scroller"></div>') | ||
| .addTo(map) | ||
| mount(MiniScroller, { | ||
| target: document.getElementById('mini-scroller'), | ||
| props: {} | ||
| }) | ||
| }) | ||
| map.on('mouseenter', 'unclustered-point', function () { | ||
| map.getCanvas().style.cursor = 'pointer' | ||
| }) | ||
| map.on('mouseleave', 'unclustered-point', function () { | ||
| map.getCanvas().style.cursor = '' | ||
| }) | ||
| </script> |
| <h2>hello</h2> |
| <header> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-lg-2 col-xs-12 left"> | ||
| <div id="logo"> | ||
| <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | ||
| viewBox="0 0 263.2 127" style="enable-background:new 0 0 263.2 127;" xml:space="preserve"> | ||
| <g id="Layer_2_1_"> | ||
| <g id="Layer_1-2"> | ||
| <path class="st0" d="M263.2,28.5v-5.9h-22.5V0h-5.9v22.5H28.5V0h-5.9v22.5H0v5.9h22.5v70.1H0v5.9h22.5V127h5.9v-22.5h206.4V127 | ||
| h5.9v-22.5h22.5v-5.9h-22.5V28.5H263.2z M234.8,98.5H28.5V28.5h206.4V98.5z M50.9,52.2h9.3c1.7-0.1,3.4,0.4,4.7,1.5 | ||
| c1.1,1.1,1.7,2.7,1.6,4.3c0,1-0.2,2-0.6,2.8c-0.4,0.8-1.1,1.4-1.9,1.9c0.7,0.1,1.5,0.4,2.1,0.7c0.6,0.3,1,0.7,1.4,1.2 | ||
| c0.4,0.5,0.6,1,0.8,1.6c0.2,0.6,0.2,1.3,0.2,1.9c0,1-0.2,1.9-0.6,2.8c-0.4,0.8-0.9,1.5-1.6,2.1c-0.7,0.6-1.5,1-2.4,1.2 | ||
| c-1.1,0.3-2.1,0.4-3.2,0.4H51L50.9,52.2z M56.8,61.1h1.7c1.8,0,2.8-0.7,2.8-2.2s-0.9-2.2-2.8-2.2h-1.7V61.1z M56.8,70.2h1.9 | ||
| c1.1,0.1,2.2-0.1,3.2-0.6c1-0.7,1.3-2.1,0.5-3.1c-0.1-0.2-0.3-0.4-0.5-0.5c-1-0.5-2.1-0.6-3.2-0.6h-1.9V70.2z M93,57.2h-9.9V61 | ||
| h9.6v5h-9.6v3.9H93v5H77.2V52.2H93V57.2z M108.2,65.7l-8.2-13.5h7l4.2,7.3l4.2-7.3h7L114,65.7v9h-5.8V65.7z M126,63.5 | ||
| c0-1.6,0.3-3.2,0.9-4.7c1.2-2.9,3.6-5.2,6.5-6.3c3.2-1.2,6.8-1.2,10.1,0c1.5,0.6,2.9,1.4,4,2.5c1.1,1.1,2,2.4,2.5,3.8 | ||
| c1.2,3,1.2,6.4,0,9.4c-0.6,1.4-1.5,2.7-2.6,3.8c-1.1,1.1-2.5,2-4,2.5c-3.2,1.2-6.8,1.2-10.1,0c-1.5-0.6-2.8-1.4-3.9-2.5 | ||
| c-1.1-1.1-2-2.4-2.6-3.8C126.3,66.7,126,65.1,126,63.5z M132.1,63.5c0,0.9,0.2,1.7,0.5,2.5c0.6,1.5,1.9,2.7,3.4,3.3 | ||
| c2.4,1,5.1,0.4,6.9-1.3c0.6-0.6,1.1-1.2,1.4-2c0.7-1.6,0.7-3.4,0-5c-0.3-0.8-0.8-1.4-1.4-2c-1.9-1.7-4.5-2.2-6.9-1.3 | ||
| c-1.5,0.6-2.7,1.8-3.4,3.4C132.3,61.8,132.1,62.6,132.1,63.5L132.1,63.5z M158.6,74.8V52.2h5.9L175.3,66V52.2h5.8v22.5h-5.8 | ||
| L164.5,61v13.8H158.6z M196.7,61.5l7.1-9.3h7.2l-8.9,10.7l9.8,11.9h-7.6l-7.6-9.8v9.8h-5.9V52.2h5.9V61.5z"/> | ||
| </g> | ||
| </g> | ||
| </svg> | ||
| </div> | ||
| </div> | ||
| <div class="col-lg-8 col-md-7 col-xs-12"> | ||
| <div class="slogan"> | ||
| Svelte MapBox Developer Documentation | ||
| </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> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </header> | ||
| <section class="content"> | ||
| <div class="container"> | ||
| <div class="content-wrap"> | ||
| <div class="row"> | ||
| <aside> | ||
| <div class="menu-box"> | ||
| <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> | ||
| </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> | ||
| <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} | ||
| </form> | ||
| </div> | ||
| <div class="section-txt" id="map"> | ||
| <div class="map-wrap"> | ||
| <Map | ||
| bind:this={mapComponent} | ||
| accessToken={PUBLIC_MAPBOX_TOKEN} | ||
| on:recentre={recentre} | ||
| on:drag={drag} | ||
| {center} | ||
| bind:zoom | ||
| > | ||
| <Earthquakes /> | ||
| <NavigationControl /> | ||
| <GeolocateControl on:geolocate={e => console.log('geolocated', e.detail)} /> | ||
| <Marker lat={marker.lat} lng={marker.lng} /> | ||
| </Map> | ||
| </div> | ||
| {#if center} | ||
| <dt>Geolocation:</dt> | ||
| <dd>lat: {center.lat}, lng: {center.lng}</dd> | ||
| <dd>zoom: {zoom}</dd> | ||
| {/if} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <div class="footer-area"> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-lg-12 center"> | ||
| Powered by Beyonk Open Source | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <footer> | ||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-lg-12 center"> | ||
| © 2019 Beyonk. All rights reserved. | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| <style> | ||
| :global(#logo svg) { | ||
| fill: white; | ||
| height: 60px; | ||
| } | ||
| .slogan { | ||
| margin-top: 14px; | ||
| } | ||
| .map-wrap { | ||
| width: 100%; | ||
| height: 300px; | ||
| } | ||
| .action-buttons { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
| #fly-to, | ||
| #change-zoom { | ||
| display: block; | ||
| position: relative; | ||
| margin: 0px auto; | ||
| height: 40px; | ||
| padding: 10px; | ||
| border: none; | ||
| border-radius: 3px; | ||
| font-size: 12px; | ||
| text-align: center; | ||
| 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> |
Sorry, the diff of this file is not supported yet
| html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;} | ||
| body{margin:0;} | ||
| article, | ||
| aside, | ||
| details, | ||
| figcaption, | ||
| figure, | ||
| footer, | ||
| header, | ||
| hgroup, | ||
| main, | ||
| menu, | ||
| nav, | ||
| section, | ||
| summary{display:block;} | ||
| audio, | ||
| canvas, | ||
| progress, | ||
| video{display:inline-block;vertical-align:baseline;} | ||
| audio:not([controls]){display:none;height:0;} | ||
| [hidden], | ||
| template{display:none;} | ||
| a{background-color:transparent;} | ||
| a:active, | ||
| a:hover{outline:0;} | ||
| abbr[title]{border-bottom:1px dotted;} | ||
| b, | ||
| strong{font-weight:bold;} | ||
| dfn{font-style:italic;} | ||
| h1{font-size:2em;margin:0.67em 0;} | ||
| mark{background:#ff0;color:#000;} | ||
| small{font-size:80%;} | ||
| sub, | ||
| sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} | ||
| sup{top:-0.5em;} | ||
| sub{bottom:-0.25em;} | ||
| img{border:0;} | ||
| svg:not(:root){overflow:hidden;} | ||
| figure{margin:1em 40px;} | ||
| hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;} | ||
| pre{overflow:auto;} | ||
| code, | ||
| kbd, | ||
| pre, | ||
| samp{font-family:monospace, monospace;font-size:1em;} | ||
| button, | ||
| input, | ||
| optgroup, | ||
| select, | ||
| textarea{color:inherit;font:inherit;margin:0;} | ||
| button{overflow:visible;} | ||
| button, | ||
| select{text-transform:none;} | ||
| button, | ||
| html input[type="button"], | ||
| input[type="reset"], | ||
| input[type="submit"]{-webkit-appearance:button;cursor:pointer;} | ||
| button[disabled], | ||
| html input[disabled]{cursor:default;} | ||
| button::-moz-focus-inner, | ||
| input::-moz-focus-inner{border:0;padding:0;} | ||
| input{line-height:normal;} | ||
| input[type="checkbox"], | ||
| input[type="radio"]{box-sizing:border-box;padding:0;} | ||
| input[type="number"]::-webkit-inner-spin-button, | ||
| input[type="number"]::-webkit-outer-spin-button{height:auto;} | ||
| input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;} | ||
| input[type="search"]::-webkit-search-cancel-button, | ||
| input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} | ||
| fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;} | ||
| legend{border:0;padding:0;} | ||
| textarea{overflow:auto;} | ||
| optgroup{font-weight:bold;} | ||
| table{border-collapse:collapse;border-spacing:0;} | ||
| td, | ||
| th{padding:0;} |
| /** | ||
| * @license | ||
| * Copyright (C) 2015 Google Inc. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
| /* Pretty printing styles. Used with prettify.js. */ | ||
| /* SPAN elements with the classes below are added by prettyprint. */ | ||
| .pln { color: #000 } /* plain text */ | ||
| @media screen { | ||
| .str { color: #080 } /* string content */ | ||
| .kwd { color: #008 } /* a keyword */ | ||
| .com { color: #800 } /* a comment */ | ||
| .typ { color: #606 } /* a type name */ | ||
| .lit { color: #066 } /* a literal value */ | ||
| /* punctuation, lisp open bracket, lisp close bracket */ | ||
| .pun, .opn, .clo { color: #660 } | ||
| .tag { color: #008 } /* a markup tag name */ | ||
| .atn { color: #606 } /* a markup attribute name */ | ||
| .atv { color: #080 } /* a markup attribute value */ | ||
| .dec, .var { color: #606 } /* a declaration; a variable name */ | ||
| .fun { color: red } /* a function name */ | ||
| } | ||
| /* Use higher contrast and text-weight for printable form. */ | ||
| @media print, projection { | ||
| .str { color: #060 } | ||
| .kwd { color: #006; font-weight: bold } | ||
| .com { color: #600; font-style: italic } | ||
| .typ { color: #404; font-weight: bold } | ||
| .lit { color: #044 } | ||
| .pun, .opn, .clo { color: #440 } | ||
| .tag { color: #006; font-weight: bold } | ||
| .atn { color: #404 } | ||
| .atv { color: #060 } | ||
| } | ||
| /* Put a border around prettyprinted code snippets. */ | ||
| pre.prettyprint { padding: 20px; border: 0!important; background: #f5f5f5!important;margin-bottom:14px; } | ||
| /* Specify class=linenums on a pre to get line numbering */ | ||
| ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */ | ||
| li.L0, | ||
| li.L1, | ||
| li.L2, | ||
| li.L3, | ||
| li.L5, | ||
| li.L6, | ||
| li.L7, | ||
| li.L8 { list-style-type: decimal !important } | ||
| /* Alternate shading for lines */ | ||
| li.L1, | ||
| li.L3, | ||
| li.L5, | ||
| li.L7, | ||
| li.L9 { background: #f5f5f5!important } |
+534
| body { | ||
| font-family: 'Open Sans', sans-serif; | ||
| background:#eaedf2; | ||
| color:#666; | ||
| font-size:14px; | ||
| } | ||
| * { | ||
| -webkit-box-sizing: border-box; | ||
| -moz-box-sizing: border-box; | ||
| box-sizing: border-box; | ||
| } | ||
| a{ | ||
| -webkit-transition: all .3s ease; | ||
| -moz-transition: all .3s ease; | ||
| -o-transition: all .3s ease; | ||
| transition: all .3s ease; | ||
| text-decoration:none; | ||
| } | ||
| .content-info a{ | ||
| color:#22A7F0 | ||
| } | ||
| .content-info a:hover{ | ||
| color:#000; | ||
| } | ||
| a img { | ||
| border:0; | ||
| } | ||
| section img{ | ||
| display:block; | ||
| max-width:100%; | ||
| height:auto; | ||
| margin:15px 0 15px 0; | ||
| } | ||
| article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { | ||
| display: block; | ||
| } | ||
| section{ | ||
| position:relative; | ||
| } | ||
| h1, h2, h3, h4, h5, h6{ | ||
| font-weight:400; | ||
| } | ||
| h1{ | ||
| font-size:36px; | ||
| margin:0 0 30px 0; | ||
| } | ||
| h2{ | ||
| font-size:30px; | ||
| margin:0 0 30px 0; | ||
| } | ||
| h3{ | ||
| font-size:24px; | ||
| margin:0 0 30px 0; | ||
| } | ||
| h4{ | ||
| font-size:20px; | ||
| margin:0 0 20px 0; | ||
| } | ||
| h5{ | ||
| font-size:18px; | ||
| margin:0 0 15px 0; | ||
| } | ||
| h6{ | ||
| font-size:16px; | ||
| margin:0 0 10px 0; | ||
| } | ||
| .container { | ||
| padding-right: 15px; | ||
| padding-left: 15px; | ||
| margin-right: auto; | ||
| margin-left: auto; | ||
| width: 1200px; | ||
| } | ||
| .container:before, .container:after, .clearfix:before, .row:before, .clearfix:after, .row:after { | ||
| display: table; | ||
| content: " "; | ||
| } | ||
| .container:after, .clearfix:after, .row:after { | ||
| clear: both; | ||
| } | ||
| .row { | ||
| margin-right: -15px; | ||
| margin-left: -15px; | ||
| } | ||
| .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11 { | ||
| float: left; | ||
| } | ||
| .col-xs-1, | ||
| .col-sm-1, | ||
| .col-md-1, | ||
| .col-lg-1, | ||
| .col-xs-2, | ||
| .col-sm-2, | ||
| .col-md-2, | ||
| .col-lg-2, | ||
| .col-xs-3, | ||
| .col-sm-3, | ||
| .col-md-3, | ||
| .col-lg-3, | ||
| .col-xs-4, | ||
| .col-sm-4, | ||
| .col-md-4, | ||
| .col-lg-4, | ||
| .col-xs-5, | ||
| .col-sm-5, | ||
| .col-md-5, | ||
| .col-lg-5, | ||
| .col-xs-6, | ||
| .col-sm-6, | ||
| .col-md-6, | ||
| .col-lg-6, | ||
| .col-xs-7, | ||
| .col-sm-7, | ||
| .col-md-7, | ||
| .col-lg-7, | ||
| .col-xs-8, | ||
| .col-sm-8, | ||
| .col-md-8, | ||
| .col-lg-8, | ||
| .col-xs-9, | ||
| .col-sm-9, | ||
| .col-md-9, | ||
| .col-lg-9, | ||
| .col-xs-10, | ||
| .col-sm-10, | ||
| .col-md-10, | ||
| .col-lg-10, | ||
| .col-xs-11, | ||
| .col-sm-11, | ||
| .col-md-11, | ||
| .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { | ||
| position: relative; | ||
| min-height: 1px; | ||
| padding-right: 15px; | ||
| padding-left: 15px; | ||
| } | ||
| .col-lg-12 { | ||
| width: 100%; | ||
| } | ||
| .col-lg-11 { | ||
| width: 91.66666667%; | ||
| } | ||
| .col-lg-10 { | ||
| width: 83.33333333%; | ||
| } | ||
| .col-lg-9 { | ||
| width: 75%; | ||
| } | ||
| .col-lg-8 { | ||
| width: 66.66666667%; | ||
| } | ||
| .col-lg-7 { | ||
| width: 58.33333333%; | ||
| } | ||
| .col-lg-6 { | ||
| width: 50%; | ||
| } | ||
| .col-lg-5 { | ||
| width: 41.66666667%; | ||
| } | ||
| .col-lg-4 { | ||
| width: 33.33333333%; | ||
| } | ||
| .col-lg-3 { | ||
| width: 25%; | ||
| } | ||
| .col-lg-2 { | ||
| width: 16.66666667%; | ||
| } | ||
| .col-lg-1 { | ||
| width: 8.33333333%; | ||
| } | ||
| .center{ | ||
| text-align:center; | ||
| } | ||
| .left{ | ||
| text-align:left; | ||
| } | ||
| .right{ | ||
| text-align:right; | ||
| } | ||
| .btn{ | ||
| display:inline-block; | ||
| width:160px; | ||
| height:40px; | ||
| line-height:38px; | ||
| background:#3498db; | ||
| color:#fff; | ||
| font-weight:400; | ||
| text-align:center; | ||
| text-transform:uppercase; | ||
| font-size:14px; | ||
| border-bottom:2px solid #2a8bcc; | ||
| } | ||
| .btn:hover{ | ||
| background:#2a8bcc | ||
| } | ||
| header{ | ||
| margin:0 0 50px 0; | ||
| padding:20px 0; | ||
| background:#22A7F0 | ||
| } | ||
| .slogan{ | ||
| color:#fff; | ||
| font-weight:300; | ||
| font-size:20px; | ||
| line-height:34px; | ||
| } | ||
| #logo img{ | ||
| display:block; | ||
| height:34px; | ||
| } | ||
| section .container{ | ||
| background:#fff; | ||
| } | ||
| .content-wrap{ | ||
| padding:50px 0 | ||
| } | ||
| aside{ | ||
| color:#fff; | ||
| float:left; | ||
| padding-left:15px; | ||
| width:285px; | ||
| } | ||
| .fixed{ | ||
| position:fixed; | ||
| top:15px; | ||
| } | ||
| aside h4{ | ||
| font-size:20px; | ||
| font-weight:400; | ||
| margin:0 0 30px 0; | ||
| } | ||
| .menu-box{ | ||
| padding:20px; | ||
| background:#34495e; | ||
| } | ||
| .menu-box ul{ | ||
| margin:0; | ||
| padding:0; | ||
| } | ||
| .menu-box li{ | ||
| display:block; | ||
| } | ||
| .menu-box li a{ | ||
| display:block; | ||
| padding:15px 20px; | ||
| margin-left: -20px; | ||
| margin-right: -20px; | ||
| color:#fff; | ||
| border-bottom:1px solid #314559; | ||
| } | ||
| .menu-box li a:hover, .menu-box li a.current{ | ||
| background:#2c3e50; | ||
| } | ||
| .menu-box li:last-child a{ | ||
| border-bottom:0; | ||
| } | ||
| .content-info{ | ||
| padding-right:15px; | ||
| padding-left:315px; | ||
| } | ||
| .section-txt{ | ||
| padding-bottom:15px; | ||
| margin-bottom:30px; | ||
| border-bottom:1px solid #dcdcdc; | ||
| } | ||
| .section-txt:last-child{ | ||
| margin-bottom:0; | ||
| padding-bottom:0; | ||
| border-bottom:0; | ||
| } | ||
| .content-info h3{ | ||
| font-size:24px; | ||
| font-weight:400; | ||
| color:#444; | ||
| margin:0 0 30px 0; | ||
| } | ||
| .content-info p{ | ||
| color:#666; | ||
| line-height:24px; | ||
| font-size:16px; | ||
| font-weight:300; | ||
| } | ||
| .content-info ul{ | ||
| margin:0 0 14px 0; | ||
| } | ||
| .content-info ul li{ | ||
| line-height:24px; | ||
| font-size:16px; | ||
| font-weight:300; | ||
| } | ||
| .content-info iframe { | ||
| width: 100%!important; | ||
| height: 350px; | ||
| border: 0!important; | ||
| } | ||
| .footer-area{ | ||
| margin-top:50px; | ||
| padding:60px 0; | ||
| background:#222; | ||
| font-size:16px; | ||
| line-height:24px; | ||
| color:#fff; | ||
| font-weight:300; | ||
| } | ||
| .footer-area a{ | ||
| color:#999; | ||
| } | ||
| .footer-area a:hover{ | ||
| color:#eee | ||
| } | ||
| footer{ | ||
| background:#111; | ||
| padding:20px 0; | ||
| font-weight:300; | ||
| font-size:12px; | ||
| } | ||
| @media only screen and (max-width: 1200px) { | ||
| .container{ | ||
| width:970px; | ||
| } | ||
| .hidden-md{ | ||
| display:none; | ||
| } | ||
| .col-md-12 { | ||
| width: 100%; | ||
| } | ||
| .col-md-11 { | ||
| width: 91.66666667%; | ||
| } | ||
| .col-md-10 { | ||
| width: 83.33333333%; | ||
| } | ||
| .col-md-9 { | ||
| width: 75%; | ||
| } | ||
| .col-md-8 { | ||
| width: 66.66666667%; | ||
| } | ||
| .col-md-7 { | ||
| width: 58.33333333%; | ||
| } | ||
| .col-md-6 { | ||
| width: 50%; | ||
| } | ||
| .col-md-5 { | ||
| width: 41.66666667%; | ||
| } | ||
| .col-md-4 { | ||
| width: 33.33333333%; | ||
| } | ||
| .col-md-3 { | ||
| width: 25%; | ||
| } | ||
| .col-md-2 { | ||
| width: 16.66666667%; | ||
| } | ||
| .col-md-1 { | ||
| width: 8.33333333%; | ||
| } | ||
| } | ||
| @media only screen and (max-width: 992px){ | ||
| .container{ | ||
| width:750px; | ||
| } | ||
| .hidden-sm{ | ||
| display:none; | ||
| } | ||
| .col-sm-12 { | ||
| width: 100%; | ||
| } | ||
| .col-sm-11 { | ||
| width: 91.66666667%; | ||
| } | ||
| .col-sm-10 { | ||
| width: 83.33333333%; | ||
| } | ||
| .col-sm-9 { | ||
| width: 75%; | ||
| } | ||
| .col-sm-8 { | ||
| width: 66.66666667%; | ||
| } | ||
| .col-sm-7 { | ||
| width: 58.33333333%; | ||
| } | ||
| .col-sm-6 { | ||
| width: 50%; | ||
| } | ||
| .col-sm-5 { | ||
| width: 41.66666667%; | ||
| } | ||
| .col-sm-4 { | ||
| width: 33.33333333%; | ||
| } | ||
| .col-sm-3 { | ||
| width: 25%; | ||
| } | ||
| .col-sm-2 { | ||
| width: 16.66666667%; | ||
| } | ||
| .col-sm-1 { | ||
| width: 8.33333333%; | ||
| } | ||
| .slogan { | ||
| font-size: 16px; | ||
| } | ||
| } | ||
| @media only screen and (max-width: 768px){ | ||
| .container{ | ||
| width:100%; | ||
| } | ||
| .hidden-xs{ | ||
| display:none; | ||
| } | ||
| .col-xs-12 { | ||
| width: 100%; | ||
| } | ||
| .col-xs-11 { | ||
| width: 91.66666667%; | ||
| } | ||
| .col-xs-10 { | ||
| width: 83.33333333%; | ||
| } | ||
| .col-xs-9 { | ||
| width: 75%; | ||
| } | ||
| .col-xs-8 { | ||
| width: 66.66666667%; | ||
| } | ||
| .col-xs-7 { | ||
| width: 58.33333333%; | ||
| } | ||
| .col-xs-6 { | ||
| width: 50%; | ||
| } | ||
| .col-xs-5 { | ||
| width: 41.66666667%; | ||
| } | ||
| .col-xs-4 { | ||
| width: 33.33333333%; | ||
| } | ||
| .col-xs-3 { | ||
| width: 25%; | ||
| } | ||
| .col-xs-2 { | ||
| width: 16.66666667%; | ||
| } | ||
| .col-xs-1 { | ||
| width: 8.33333333%; | ||
| } | ||
| header{ | ||
| margin-bottom:30px; | ||
| } | ||
| .content-wrap { | ||
| padding: 30px 0; | ||
| } | ||
| .slogan{ | ||
| text-align:center; | ||
| line-height:22px; | ||
| margin-bottom:15px; | ||
| } | ||
| #logo { | ||
| text-align:center; | ||
| margin-bottom:15px; | ||
| } | ||
| #logo img{ | ||
| margin:0 auto; | ||
| } | ||
| .btn{ | ||
| display:block; | ||
| margin:0 auto; | ||
| } | ||
| aside{ | ||
| width:100%; | ||
| float:none; | ||
| padding:0 15px; | ||
| margin-bottom:30px; | ||
| } | ||
| .content-info { | ||
| padding-right: 15px; | ||
| padding-left: 15px; | ||
| } | ||
| .content-info p, .content-info ul li{ | ||
| font-size:14px; | ||
| line-height:22px; | ||
| } | ||
| .content-info h3 { | ||
| font-size: 20px; | ||
| } | ||
| h1{ | ||
| font-size:32px; | ||
| } | ||
| h2{ | ||
| font-size:26px; | ||
| } | ||
| h3{ | ||
| font-size:20px; | ||
| } | ||
| h4{ | ||
| font-size:18px; | ||
| } | ||
| h5{ | ||
| font-size:16px; | ||
| } | ||
| h6{ | ||
| font-size:14px; | ||
| } | ||
| .footer-area { | ||
| margin-top: 30px; | ||
| padding: 50px 0; | ||
| font-size:14px; | ||
| } | ||
| } |
| /** @type {import('@sveltejs/kit').Config} */ | ||
| const config = {} | ||
| export default config |
| import { sveltekit } from '@sveltejs/kit/vite' | ||
| /** @type {import('vite').UserConfig} */ | ||
| const config = { | ||
| plugins: [ sveltekit() ] | ||
| } | ||
| export default config |
+21
-30
| { | ||
| "name": "@beyonk/svelte-mapbox", | ||
| "version": "9.1.1", | ||
| "version": "10.0.1", | ||
| "devDependencies": { | ||
| "@beyonk/eslint-config": "^6.0.0", | ||
| "@sveltejs/kit": "^1.2.9", | ||
| "@sveltejs/package": "^1.0.2", | ||
| "eslint": "^7.31.0", | ||
| "eslint-plugin-svelte3": "^3.2.0", | ||
| "svelte": "^3.55.1", | ||
| "svelte2tsx": "^0.6.0", | ||
| "typescript": "^4.9.4", | ||
| "vite": "^4.0.4" | ||
| "@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", | ||
| "eslint": "^9.14.0", | ||
| "eslint-plugin-svelte": "^2.46.0", | ||
| "svelte": "^5.1.14", | ||
| "svelte2tsx": "^0.7.23", | ||
| "typescript": "^5.6.3", | ||
| "vite": "^5.4.11" | ||
| }, | ||
| "peerDependencies": { | ||
| "svelte": ">=3.0.0" | ||
| "svelte": ">=4.0.0" | ||
| }, | ||
| "exports": { | ||
| "./package.json": "./package.json", | ||
| ".": "./components.js", | ||
| "./asset-loader": "./asset-loader.js", | ||
| "./components": "./components.js", | ||
| "./event-bindings": "./event-bindings.js", | ||
| "./geocoder/Geocoder.svelte": "./geocoder/Geocoder.svelte", | ||
| "./geocoder/geocoder-action": "./geocoder/geocoder-action.js", | ||
| "./map/Map.svelte": "./map/Map.svelte", | ||
| "./map/Marker.svelte": "./map/Marker.svelte", | ||
| "./map/controls/GeolocateControl.svelte": "./map/controls/GeolocateControl.svelte", | ||
| "./map/controls/NavigationControl.svelte": "./map/controls/NavigationControl.svelte", | ||
| "./map/controls/ScaleControl.svelte": "./map/controls/ScaleControl.svelte", | ||
| "./map/map-action": "./map/map-action.js", | ||
| "./mapbox": "./mapbox.js", | ||
| "./queue": "./queue.js" | ||
| ".": "./components.js" | ||
| }, | ||
| "types": "./components.d.ts", | ||
| "type": "module", | ||
| "volta": { | ||
| "node": "20.11.1" | ||
| }, | ||
| "svelte": "./components.js" | ||
| "packageManager": "pnpm@8.15.7", | ||
| "scripts": { | ||
| "dev": "vite dev --port 3030", | ||
| "build": "vite build", | ||
| "preview": "vite preview", | ||
| "lint": "eslint ." | ||
| } | ||
| } |
| export function load(assets: any, cb: any): void; |
| function load (assets, cb) { | ||
| for (const { type, value, id } of assets) { | ||
| const existing = document.getElementById(id) | ||
| if (existing) { | ||
| if (type === 'script') { | ||
| cb() | ||
| } | ||
| return | ||
| } | ||
| const tag = document.createElement(type) | ||
| tag.id = id | ||
| if (type === 'script') { | ||
| tag.async = true | ||
| tag.defer = true | ||
| tag.src = value | ||
| tag.onload = () => cb() | ||
| } else { | ||
| tag.rel = 'stylesheet' | ||
| tag.href = value | ||
| } | ||
| document.body.appendChild(tag) | ||
| } | ||
| } | ||
| export { | ||
| load | ||
| } |
| import Map from "./map/Map.svelte"; | ||
| import Marker from "./map/Marker.svelte"; | ||
| import Geocoder from "./geocoder/Geocoder.svelte"; | ||
| import { contextKey } from "./mapbox.js"; | ||
| export namespace controls { | ||
| export { GeolocateControl }; | ||
| export { NavigationControl }; | ||
| export { ScaleControl }; | ||
| } | ||
| import GeolocateControl from "./map/controls/GeolocateControl.svelte"; | ||
| import NavigationControl from "./map/controls/NavigationControl.svelte"; | ||
| import ScaleControl from "./map/controls/ScaleControl.svelte"; | ||
| export { Map, Marker, Geocoder, contextKey }; |
| 'use strict' | ||
| import Map from './map/Map.svelte' | ||
| import Marker from './map/Marker.svelte' | ||
| import Geocoder from './geocoder/Geocoder.svelte' | ||
| import { contextKey } from './mapbox.js' | ||
| import GeolocateControl from './map/controls/GeolocateControl.svelte' | ||
| import NavigationControl from './map/controls/NavigationControl.svelte' | ||
| import ScaleControl from './map/controls/ScaleControl.svelte' | ||
| const controls = { | ||
| GeolocateControl, | ||
| NavigationControl, | ||
| ScaleControl | ||
| } | ||
| export { | ||
| Map, | ||
| Marker, | ||
| Geocoder, | ||
| contextKey, | ||
| controls | ||
| } |
| export function bindEvents(el: any, handlers: any, mapbox: any, node: any): () => void; |
| 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 | ||
| } |
| export default function action(node: any, options?: {}): { | ||
| destroy(): void; | ||
| }; |
| 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' }, | ||
| { type: 'link', value: `//api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/${options.version}/mapbox-gl-geocoder.css`, id: 'byk-gc-css' } | ||
| ] | ||
| const customStylesheetUrl = options.customStylesheetUrl | ||
| if (customStylesheetUrl) { | ||
| resources.push({ type: 'link', value: customStylesheetUrl, id: 'byk-gcsu-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 } ] | ||
| } | ||
| } |
| <div | ||
| id={fieldId} | ||
| use:action={optionsWithDefaults} | ||
| on:ready={init} | ||
| on:results | ||
| on:result | ||
| on:loading | ||
| on:error | ||
| on:clear | ||
| on:load | ||
| /> | ||
| <script> | ||
| import { createEventDispatcher } from 'svelte' | ||
| import action from './geocoder-action.js' | ||
| export let accessToken | ||
| export let options = {} | ||
| export let version = 'v4.5.1' | ||
| 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 | ||
| const dispatch = createEventDispatcher() | ||
| const fieldId = 'bsm-' + Math.random().toString(36).substring(6) | ||
| const optionsWithDefaults = Object.assign({ | ||
| version, | ||
| accessToken, | ||
| types: types.join(','), | ||
| placeholder, | ||
| customStylesheetUrl, | ||
| value | ||
| }, options) | ||
| function init ({ detail }) { | ||
| geocoder = detail.geocoder | ||
| dispatch('ready') | ||
| } | ||
| </script> | ||
| <style> | ||
| div { | ||
| padding: 0; | ||
| } | ||
| </style> |
| /** @typedef {typeof __propDef.props} GeocoderProps */ | ||
| /** @typedef {typeof __propDef.events} GeocoderEvents */ | ||
| /** @typedef {typeof __propDef.slots} GeocoderSlots */ | ||
| export default class Geocoder extends SvelteComponentTyped<{ | ||
| accessToken: any; | ||
| geocoder: any; | ||
| value?: any; | ||
| version?: string; | ||
| customStylesheetUrl?: boolean; | ||
| options?: {}; | ||
| types?: string[]; | ||
| placeholder?: string; | ||
| }, { | ||
| results: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| result: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| loading: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| error: ErrorEvent; | ||
| clear: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| load: Event; | ||
| ready: CustomEvent<any>; | ||
| } & { | ||
| [evt: string]: CustomEvent<any>; | ||
| }, {}> { | ||
| } | ||
| export type GeocoderProps = typeof __propDef.props; | ||
| export type GeocoderEvents = typeof __propDef.events; | ||
| export type GeocoderSlots = typeof __propDef.slots; | ||
| import { SvelteComponentTyped } from "svelte"; | ||
| declare const __propDef: { | ||
| props: { | ||
| accessToken: any; | ||
| geocoder: any; | ||
| value?: any; | ||
| version?: string; | ||
| customStylesheetUrl?: boolean; | ||
| options?: {}; | ||
| types?: string[]; | ||
| placeholder?: string; | ||
| }; | ||
| events: { | ||
| results: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| result: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| loading: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| error: ErrorEvent; | ||
| clear: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| load: Event; | ||
| ready: CustomEvent<any>; | ||
| } & { | ||
| [evt: string]: CustomEvent<any>; | ||
| }; | ||
| slots: {}; | ||
| }; | ||
| export {}; |
| <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() | ||
| } | ||
| </script> | ||
| <style> | ||
| div { display: none; } | ||
| </style> |
| /** @typedef {typeof __propDef.props} GeolocateControlProps */ | ||
| /** @typedef {typeof __propDef.events} GeolocateControlEvents */ | ||
| /** @typedef {typeof __propDef.slots} GeolocateControlSlots */ | ||
| export default class GeolocateControl extends SvelteComponentTyped<{ | ||
| options?: {}; | ||
| position?: string; | ||
| trigger?: () => void; | ||
| }, { | ||
| error: ErrorEvent; | ||
| geolocate: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| outofmaxbounds: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| trackuserlocationend: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| trackuserlocationstart: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| } & { | ||
| [evt: string]: CustomEvent<any>; | ||
| }, {}> { | ||
| get trigger(): () => void; | ||
| } | ||
| export type GeolocateControlProps = typeof __propDef.props; | ||
| export type GeolocateControlEvents = typeof __propDef.events; | ||
| export type GeolocateControlSlots = typeof __propDef.slots; | ||
| import { SvelteComponentTyped } from "svelte"; | ||
| declare const __propDef: { | ||
| props: { | ||
| options?: {}; | ||
| position?: string; | ||
| trigger?: () => void; | ||
| }; | ||
| events: { | ||
| error: ErrorEvent; | ||
| geolocate: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| outofmaxbounds: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| trackuserlocationend: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| trackuserlocationstart: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| } & { | ||
| [evt: string]: CustomEvent<any>; | ||
| }; | ||
| slots: {}; | ||
| }; | ||
| export {}; |
| <script> | ||
| import { getContext } from 'svelte' | ||
| import { contextKey } from '../../mapbox.js' | ||
| const { getMap, getMapbox } = getContext(contextKey) | ||
| const map = getMap() | ||
| const mapbox = getMapbox() | ||
| export let position = 'top-right' | ||
| export let options = {} | ||
| const nav = new mapbox.NavigationControl(options) | ||
| map.addControl(nav, position) | ||
| </script> |
| /** @typedef {typeof __propDef.props} NavigationControlProps */ | ||
| /** @typedef {typeof __propDef.events} NavigationControlEvents */ | ||
| /** @typedef {typeof __propDef.slots} NavigationControlSlots */ | ||
| export default class NavigationControl extends SvelteComponentTyped<{ | ||
| options?: {}; | ||
| position?: string; | ||
| }, { | ||
| [evt: string]: CustomEvent<any>; | ||
| }, {}> { | ||
| } | ||
| export type NavigationControlProps = typeof __propDef.props; | ||
| export type NavigationControlEvents = typeof __propDef.events; | ||
| export type NavigationControlSlots = typeof __propDef.slots; | ||
| import { SvelteComponentTyped } from "svelte"; | ||
| declare const __propDef: { | ||
| props: { | ||
| options?: {}; | ||
| position?: string; | ||
| }; | ||
| events: { | ||
| [evt: string]: CustomEvent<any>; | ||
| }; | ||
| slots: {}; | ||
| }; | ||
| export {}; |
| <script> | ||
| import { getContext } from 'svelte' | ||
| import { contextKey } from '../../mapbox.js' | ||
| const { getMap, getMapbox } = getContext(contextKey) | ||
| const map = getMap() | ||
| const mapbox = getMapbox() | ||
| export let position = 'bottom-right' | ||
| export let options = {} | ||
| const optionsWithDefaults = Object.assign({ | ||
| maxWidth: 80, | ||
| unit: 'metric' | ||
| }, options) | ||
| const scale = new mapbox.ScaleControl(optionsWithDefaults) | ||
| map.addControl(scale, position) | ||
| </script> |
| /** @typedef {typeof __propDef.props} ScaleControlProps */ | ||
| /** @typedef {typeof __propDef.events} ScaleControlEvents */ | ||
| /** @typedef {typeof __propDef.slots} ScaleControlSlots */ | ||
| export default class ScaleControl extends SvelteComponentTyped<{ | ||
| options?: {}; | ||
| position?: string; | ||
| }, { | ||
| [evt: string]: CustomEvent<any>; | ||
| }, {}> { | ||
| } | ||
| export type ScaleControlProps = typeof __propDef.props; | ||
| export type ScaleControlEvents = typeof __propDef.events; | ||
| export type ScaleControlSlots = typeof __propDef.slots; | ||
| import { SvelteComponentTyped } from "svelte"; | ||
| declare const __propDef: { | ||
| props: { | ||
| options?: {}; | ||
| position?: string; | ||
| }; | ||
| events: { | ||
| [evt: string]: CustomEvent<any>; | ||
| }; | ||
| slots: {}; | ||
| }; | ||
| export {}; |
| export default function action(node: any, options?: {}): { | ||
| destroy(): void; | ||
| }; |
| 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 } ] | ||
| } | ||
| } |
-112
| <div | ||
| use:action={optionsWithDefaults} | ||
| on:ready={init} | ||
| on:recentre | ||
| on:dragend | ||
| on:click | ||
| on:zoomstart | ||
| on:zoom | ||
| on:zoomend | ||
| on:drag | ||
| on:keydown | ||
| > | ||
| {#if map} | ||
| <slot></slot> | ||
| {/if} | ||
| </div> | ||
| <style> | ||
| div { | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| </style> | ||
| <script> | ||
| import { setContext, onDestroy, createEventDispatcher } 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 = 'v2.12.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() | ||
| setContext(contextKey, { | ||
| getMap: () => map, | ||
| getMapbox: () => mapbox | ||
| }) | ||
| let container | ||
| let mapbox | ||
| const optionsWithDefaults = Object.assign({ | ||
| accessToken, | ||
| container, | ||
| style, | ||
| center, | ||
| zoom, | ||
| zoomRate, | ||
| wheelZoomRate, | ||
| version, | ||
| customStylesheetUrl, | ||
| map | ||
| }, options) | ||
| const queue = new EventQueue() | ||
| function init ({ detail }) { | ||
| map = detail.map | ||
| mapbox = detail.mapbox | ||
| queue.start(map) | ||
| dispatch('ready') | ||
| } | ||
| onDestroy(() => { | ||
| queue.stop() | ||
| map = undefined | ||
| }) | ||
| export function fitBounds (bbox, data = {}) { | ||
| queue.send('fitBounds', [ bbox, data ]) | ||
| } | ||
| export function flyTo (destination, data = {}) { | ||
| queue.send('flyTo', [ destination, data ]) | ||
| } | ||
| export function resize () { | ||
| queue.send('resize') | ||
| } | ||
| export function setCenter (coords, data = {}) { | ||
| queue.send('setCenter', [ coords, data ]) | ||
| } | ||
| export function setZoom (value, data = {}) { | ||
| queue.send('setZoom', [ value, data ]) | ||
| } | ||
| export function addControl (control, position = 'top-right') { | ||
| queue.send('addControl', [ control, position ]) | ||
| } | ||
| export function getMap () { | ||
| return map | ||
| } | ||
| export function getMapbox () { | ||
| return mapbox | ||
| } | ||
| $: zoom && setZoom(zoom) | ||
| </script> |
| /** @typedef {typeof __propDef.props} MapProps */ | ||
| /** @typedef {typeof __propDef.events} MapEvents */ | ||
| /** @typedef {typeof __propDef.slots} MapSlots */ | ||
| export default class Map extends SvelteComponentTyped<{ | ||
| accessToken: any; | ||
| map?: any; | ||
| style?: string; | ||
| version?: string; | ||
| customStylesheetUrl?: boolean; | ||
| zoom?: number; | ||
| getMap?: () => any; | ||
| getMapbox?: () => any; | ||
| center?: number[]; | ||
| zoomRate?: number; | ||
| wheelZoomRate?: number; | ||
| fitBounds?: (bbox: any, data?: {}) => void; | ||
| flyTo?: (destination: any, data?: {}) => void; | ||
| resize?: () => void; | ||
| setCenter?: (coords: any, data?: {}) => void; | ||
| setZoom?: (value: any, data?: {}) => void; | ||
| addControl?: (control: any, position?: string) => void; | ||
| options?: {}; | ||
| }, { | ||
| recentre: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| dragend: DragEvent; | ||
| click: MouseEvent; | ||
| zoomstart: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| zoom: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| zoomend: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| drag: DragEvent; | ||
| keydown: KeyboardEvent; | ||
| ready: CustomEvent<any>; | ||
| } & { | ||
| [evt: string]: CustomEvent<any>; | ||
| }, { | ||
| default: {}; | ||
| }> { | ||
| get fitBounds(): (bbox: any, data?: {}) => void; | ||
| get flyTo(): (destination: any, data?: {}) => void; | ||
| get resize(): () => void; | ||
| get setCenter(): (coords: any, data?: {}) => void; | ||
| get setZoom(): (value: any, data?: {}) => void; | ||
| get addControl(): (control: any, position?: string) => void; | ||
| get getMap(): () => any; | ||
| get getMapbox(): () => any; | ||
| } | ||
| export type MapProps = typeof __propDef.props; | ||
| export type MapEvents = typeof __propDef.events; | ||
| export type MapSlots = typeof __propDef.slots; | ||
| import { SvelteComponentTyped } from "svelte"; | ||
| declare const __propDef: { | ||
| props: { | ||
| accessToken: any; | ||
| map?: any; | ||
| style?: string; | ||
| version?: string; | ||
| customStylesheetUrl?: boolean; | ||
| zoom?: number; | ||
| getMap?: () => any; | ||
| getMapbox?: () => any; | ||
| center?: number[]; | ||
| zoomRate?: number; | ||
| wheelZoomRate?: number; | ||
| fitBounds?: (bbox: any, data?: {}) => void; | ||
| flyTo?: (destination: any, data?: {}) => void; | ||
| resize?: () => void; | ||
| setCenter?: (coords: any, data?: {}) => void; | ||
| setZoom?: (value: any, data?: {}) => void; | ||
| addControl?: (control: any, position?: string) => void; | ||
| options?: {}; | ||
| }; | ||
| events: { | ||
| recentre: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| dragend: DragEvent; | ||
| click: MouseEvent; | ||
| zoomstart: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| zoom: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| zoomend: Event | ProgressEvent<EventTarget> | DragEvent | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | CompositionEvent | ErrorEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | SubmitEvent | TouchEvent | TransitionEvent | WheelEvent; | ||
| drag: DragEvent; | ||
| keydown: KeyboardEvent; | ||
| ready: CustomEvent<any>; | ||
| } & { | ||
| [evt: string]: CustomEvent<any>; | ||
| }; | ||
| slots: { | ||
| default: {}; | ||
| }; | ||
| }; | ||
| export {}; |
| <script> | ||
| import { onMount, getContext } from 'svelte' | ||
| import { contextKey } from '../mapbox.js' | ||
| const { getMap, getMapbox } = getContext(contextKey) | ||
| const map = getMap() | ||
| const mapbox = getMapbox() | ||
| function randomColour () { | ||
| return Math.round(Math.random() * 255) | ||
| } | ||
| 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) | ||
| onMount(() => { | ||
| const namedParams = Object.assign( | ||
| { | ||
| 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)) | ||
| if (elementPopup.hasChildNodes()) { | ||
| popupEl.setDOMContent(elementPopup) | ||
| } else { | ||
| popupEl.setText(label) | ||
| } | ||
| marker.setPopup(popupEl) | ||
| } | ||
| marker | ||
| .setLngLat({ lng, lat }) | ||
| .addTo(map) | ||
| if (!element.hasChildNodes()) element.remove() | ||
| return () => marker.remove() | ||
| }) | ||
| export function getMarker () { | ||
| return marker | ||
| } | ||
| </script> | ||
| <div bind:this={element}> | ||
| <slot></slot> | ||
| </div> | ||
| <div class='popup' bind:this={elementPopup}> | ||
| <slot name="popup"></slot> | ||
| </div> |
| /** @typedef {typeof __propDef.props} MarkerProps */ | ||
| /** @typedef {typeof __propDef.events} MarkerEvents */ | ||
| /** @typedef {typeof __propDef.slots} MarkerSlots */ | ||
| export default class Marker extends SvelteComponentTyped<{ | ||
| lat: any; | ||
| lng: any; | ||
| label?: string; | ||
| popupClassName?: string; | ||
| markerOffset?: number[]; | ||
| popupOffset?: number; | ||
| color?: number; | ||
| popup?: boolean; | ||
| popupOptions?: {}; | ||
| markerOptions?: {}; | ||
| getMarker?: () => any; | ||
| }, { | ||
| [evt: string]: CustomEvent<any>; | ||
| }, { | ||
| default: {}; | ||
| popup: {}; | ||
| }> { | ||
| get getMarker(): () => any; | ||
| } | ||
| export type MarkerProps = typeof __propDef.props; | ||
| export type MarkerEvents = typeof __propDef.events; | ||
| export type MarkerSlots = typeof __propDef.slots; | ||
| import { SvelteComponentTyped } from "svelte"; | ||
| declare const __propDef: { | ||
| props: { | ||
| lat: any; | ||
| lng: any; | ||
| label?: string; | ||
| popupClassName?: string; | ||
| markerOffset?: number[]; | ||
| popupOffset?: number; | ||
| color?: number; | ||
| popup?: boolean; | ||
| popupOptions?: {}; | ||
| markerOptions?: {}; | ||
| getMarker?: () => any; | ||
| }; | ||
| events: { | ||
| [evt: string]: CustomEvent<any>; | ||
| }; | ||
| slots: { | ||
| default: {}; | ||
| popup: {}; | ||
| }; | ||
| }; | ||
| export {}; |
| export const contextKey: {}; |
| const contextKey = {} | ||
| export { contextKey } |
| export class EventQueue { | ||
| queue: import("svelte/store").Writable<any[]>; | ||
| unsubscribe: import("svelte/store").Unsubscriber; | ||
| started: boolean; | ||
| send(command: any, params?: any[]): void; | ||
| start(map: any): void; | ||
| stop(): void; | ||
| } |
-31
| 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 | ||
| } | ||
| } |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Mixed license
LicensePackage contains multiple licenses.
Found 1 instance in 1 package
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
Fixed alerts
URL strings
Supply chain riskPackage contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
47662
24.37%- Number of package files
32
6.67%- Lines of code
873
62.57%Worsened metrics
- Dev dependency count
11
22.22%- Number of low license alerts
1
Infinity%- Number of medium supply chain risk alerts
1
Infinity%No dependency changes