├── .editorconfig
├── .env.example
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── .storybook
    ├── main.js
    ├── manager.js
    ├── preview-head.html
    └── theme.js
├── README.md
├── package.json
├── src
    ├── BoxSelect.svelte
    ├── Layer.svelte
    ├── Map.svelte
    ├── Marker.svelte
    ├── Popup.svelte
    ├── context.js
    ├── controls
    │   ├── AttributionControl.svelte
    │   ├── FullscreenControl.svelte
    │   ├── GeolocateControl.svelte
    │   ├── NavigationControl.svelte
    │   ├── ScaleControl.svelte
    │   └── SvelteControl.svelte
    ├── index.js
    ├── sources
    │   ├── GeoJSONSource.svelte
    │   └── VectorSource.svelte
    └── utils.js
└── stories
    ├── a_general.stories.js
    ├── config.js
    ├── controls.stories.js
    ├── data.js
    ├── markers.stories.js
    ├── popups.stories.js
    ├── sources.stories.js
    └── views
        ├── BindLoadProps.svelte
        ├── BindPositionalProps.svelte
        ├── ChangeStyle.svelte
        ├── EaseTo.svelte
        ├── Layout.svelte
        ├── MapWithAllControls.svelte
        ├── MapWithAttributionControl.svelte
        ├── MapWithFullscreenControl.svelte
        ├── MapWithGeolocateControl.svelte
        ├── MapWithNavigationControl.svelte
        ├── MapWithScaleControl.svelte
        ├── MapWithSvelteControl.svelte
        ├── markers
            ├── ManyMarkersView.svelte
            ├── MarkerAttachPopupView.svelte
            ├── MarkerBindOpenOfAttachedPopupView.svelte
            ├── MarkerMountAttachedPopupView.svelte
            ├── MarkerMountView.svelte
            ├── MarkerUpdateCoordinatesView.svelte
            └── MarkerView.svelte
        ├── popups
            ├── PopupBindOpenView.svelte
            ├── PopupMountView.svelte
            ├── PopupUpdateContentView.svelte
            ├── PopupUpdateCoordinatesView.svelte
            └── PopupView.svelte
        └── sources
            ├── GeoJSONClusterView.svelte
            ├── GeoJSONFilterView.svelte
            ├── GeoJSONSourceMountView.svelte
            ├── GeoJSONSourceUpdateData.svelte
            ├── GeoJSONSourceUpdateLayout.svelte
            ├── GeoJSONSourceVisibilityView.svelte
            ├── GeoJSONSourceWithSymbolLayerView.svelte
            └── VectorSourceWithCircleLayerView.svelte


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | end_of_line = lf
 6 | insert_final_newline = true
 7 | trim_trailing_whitespace = true
 8 | 
 9 | [*.{js,json,md,svelte}]
10 | indent_style = space
11 | indent_size = 2
12 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | # From https://docs.mapbox.com/mapbox-gl-js/example/simple-map/
2 | # Replace it with a real token for the application, cf https://docs.mapbox.com/help/glossary/access-token/
3 | MAPBOX_ACCESS_TOKEN=pk.eyJ1IjoiY2JlbnoiLCJhIjoiY2p0M2FnN2M3MHNuMTQ1cDNod2N4YXFhdSJ9.pGJLTkAD8lBnDVrxlRO_yg
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "es6": true
 5 |   },
 6 |   "extends": "eslint:recommended",
 7 |   "globals": {
 8 |     "Atomics": "readonly",
 9 |     "SharedArrayBuffer": "readonly"
10 |   },
11 |   "parser": "babel-eslint",
12 |   "parserOptions": {
13 |     "ecmaVersion": 2018,
14 |     "sourceType": "module"
15 |   },
16 |   "plugins": ['svelte3'],
17 |   "overrides": [
18 |     {
19 |       "files": ['**/*.svelte'],
20 |       "processor": 'svelte3/svelte3'
21 |     }
22 |   ],
23 |   "rules": {
24 |   },
25 | };
26 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /.vscode
2 | /node_modules/
3 | /storybook-static/
4 | .env
5 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | stories
2 | 


--------------------------------------------------------------------------------
/.storybook/main.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | const projectPath = path.resolve(__dirname, '..');
 4 | 
 5 | module.exports = {
 6 |   stories: ['../stories/**/*.stories.js'],
 7 |   addons: [],
 8 |   webpackFinal: async (config) => {
 9 |     config.resolve.alias = {
10 |       ...config.resolve.alias,
11 |       _src: path.resolve(projectPath, "src"),
12 |       _stories: path.resolve(projectPath, "stories"),
13 |     };
14 |     return config;
15 |   },
16 | };
17 | 


--------------------------------------------------------------------------------
/.storybook/manager.js:
--------------------------------------------------------------------------------
1 | import { addons } from '@storybook/addons';
2 | import theme from './theme.js';
3 | 
4 | addons.setConfig({ theme });
5 | 


--------------------------------------------------------------------------------
/.storybook/preview-head.html:
--------------------------------------------------------------------------------
 1 | <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
 2 | <style>
 3 |     html,
 4 |     body,
 5 |     #root {
 6 |         height: 100%;
 7 |     }
 8 | 
 9 |     body {
10 |         margin: 0;
11 |         padding: 0;
12 |     }
13 | </style>
14 | 


--------------------------------------------------------------------------------
/.storybook/theme.js:
--------------------------------------------------------------------------------
 1 | import { create } from '@storybook/theming/create';
 2 | import packageJson from "../package.json";
 3 | 
 4 | export default create({
 5 |   base: 'light',
 6 | 
 7 |   brandTitle: `${packageJson.name} demos`,
 8 |   brandUrl: packageJson.homepage,
 9 | });
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # svelte-mapbox-gl
 2 | 
 3 | Svelte 3 components for Mapbox GL.
 4 | 
 5 | This work is built on top of [Jailbreak's Gitlab Repo](https://gitlab.com/jailbreak/svelte-mapbox-gl). This fork will add bug fixes and further add functionality useful for working with maps. It is notable that deck.gl Mapbox Layer integration is fully possible.
 6 | 
 7 | [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles.
 8 | 
 9 | [Svelte](https://svelte.dev/) is a JavaScript compiler used to build user interfaces similar to React or Vue, but lighter because components are compiled.
10 | 
11 | The provided components follow Svelte idioms as much as possible (declarative props, etc.), while keeping the same namings used by Mapbox GL JS (for objects, options and events).
12 | 
13 | ## Usage
14 | 
15 | See Storybook: https://jailbreak.gitlab.io/svelte-mapbox-gl
16 | 
17 | Basic usage:
18 | 
19 | ```javascript
20 | <script>
21 |   import {
22 |     Map,
23 |     Marker,
24 |     NavigationControl,
25 |     Popup
26 |   } from "svelte-mapbox-gl";
27 |   const coordinates = { lat: 48, lng: 3 };
28 | </script>
29 | 
30 | <Map
31 |   accessToken="xxx"
32 |   style="mapbox://styles/mapbox/streets-v11"
33 |   center={coordinates}
34 |   zoom={10}>
35 |   <NavigationControl />
36 |   <Marker {coordinates}>
37 |     <Popup>I'm a popup attached to a marker!</Popup>
38 |   </Marker>
39 | </Map>
40 | ```
41 | 
42 | ### Mapbox GL Javascript and CSS
43 | 
44 | This package defines [mapbox-gl](https://www.npmjs.com/package/mapbox-gl) as a peer dependency.
45 | It needs it, but it's the responsibility of the application using it to provide the `mapbox-gl` module.
46 | 
47 | About JavaScript two scenarios are possible:
48 | 
49 | - source Mapbox GL script in the DOM via a `<script src="">` tag targeting the CDN URL, and configure your module bundler (e.g. [Rollup](https://rollupjs.org/), [Webpack](https://webpack.js.org/), etc.) to consider the `mapbox-gl` module as external (see below).
50 | - install the `mapbox-gl` from npm in your application
51 | 
52 | About CSS two scenarios are possible:
53 | 
54 | - source Mapbox GL stylesheet in the DOM via a `<link>` tag targeting the CDN URL
55 | - import `mapbox-gl/dist/mapbox-gl.css` from your JavaScript code and setup your module bundler to manage CSS
56 | 
57 | See also: https://docs.mapbox.com/mapbox-gl-js/overview/
58 | 
59 | If you choose to include the script via a `<script>` DOM element, you must configure your module bundler to let it "redirect" the `mapbox-gl` module to the global variable `window.mapboxgl` which is provided by the sourced `<script>`. For example, see [Webpack externals](https://webpack.js.org/configuration/externals/) or [Rollup globals + externals](https://rollupjs.org/guide/en/#outputglobals).
60 | 
61 | ### Access token
62 | 
63 | To avoid hard-coding your `accessToken`, you may load it from your environment (e.g. with [dotenv](https://www.npmjs.com/package/dotenv)). The Storybook uses the access token of all Mapbox GL JS demos (e.g. [Display a map](https://docs.mapbox.com/mapbox-gl-js/example/simple-map/)).
64 | 
65 | ## Documentation
66 | 
67 | TODO
68 | 
69 | Meanwhile, read the source code and look at the [Storybook](https://jailbreak.gitlab.io/svelte-mapbox-gl) to know about components, their properies and events.
70 | 
71 | ## Similar projects
72 | 
73 | - https://github.com/beyonk-adventures/svelte-mapbox
74 | - https://soal.github.io/vue-mapbox/
75 | - http://alex3165.github.io/react-mapbox-gl/
76 | - https://uber.github.io/react-map-gl/
77 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-mapbox-gl",
 3 |   "version": "0.2.1",
 4 |   "description": "Mapbox GL components for Svelte",
 5 |   "main": "src/index.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git+https://github.com/saravanabalagi/svelte-mapbox-gl.git"
 9 |   },
10 |   "keywords": [
11 |     "mapbox",
12 |     "svelte",
13 |     "components",
14 |     "mapboxgl"
15 |   ],
16 |   "scripts": {
17 |     "storybook": "node -r dotenv/config ./node_modules/.bin/start-storybook -p 6006",
18 |     "build-storybook": "node -r dotenv/config ./node_modules/.bin/build-storybook",
19 |     "lint": "eslint --ext .js,.svelte src"
20 |   },
21 |   "author": "Saravanabalagi Ramachandran",
22 |   "license": "MIT",
23 |   "homepage": "https://github.com/saravanabalagi/svelte-mapbox-gl#readme",
24 |   "bugs": {
25 |     "url": "https://github.com/saravanabalagi/svelte-mapbox-gl/issues"
26 |   },
27 |   "peerDependencies": {
28 |     "mapbox-gl": "^1.8.1 <2.0.0"
29 |   },
30 |   "devDependencies": {
31 |     "@babel/core": "^7.9.0",
32 |     "@storybook/svelte": "^6.0.22",
33 |     "@turf/random": "^6.0.2",
34 |     "babel-eslint": "^10.1.0",
35 |     "babel-loader": "^8.1.0",
36 |     "dotenv": "^8.2.0",
37 |     "eslint": "^6.8.0",
38 |     "eslint-plugin-svelte3": "^2.7.3",
39 |     "mapbox-gl": "^1.10.1",
40 |     "svelte": "^3.20.1",
41 |     "svelte-loader": "^2.13.6"
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/BoxSelect.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import mapboxgl from 'mapbox-gl';
  3 |   import { getContext, onDestroy } from 'svelte';
  4 |   import { mapKey } from './context.js';
  5 | 
  6 |   const mapContext = getContext(mapKey);
  7 |   const map = mapContext.getMap();
  8 |   const loadedStore = mapContext.getLoadedStore();
  9 | 
 10 |   let canvas, container;
 11 | 
 12 |   $: if ($loadedStore) {
 13 |     try {
 14 |       canvas = map._canvas;
 15 |       container = map._container;
 16 |       canvas.addEventListener('mousedown', onMouseDown, true);
 17 |     } catch (e) {
 18 |       console.error('could not add event listeners for box select', e);
 19 |     }
 20 |   }
 21 | 
 22 |   let startPos;
 23 |   let box;
 24 | 
 25 |   const mousePos = (e) => {
 26 |     var rect = canvas.getBoundingClientRect();
 27 |     return new mapboxgl.Point(
 28 |       e.clientX - rect.left - canvas.clientLeft,
 29 |       e.clientY - rect.top - canvas.clientTop
 30 |     );
 31 |   };
 32 | 
 33 |   const onMouseDown = (e) => {
 34 |     // Continue the rest of the function if the shiftkey is pressed.
 35 |     if (!(e.shiftKey && e.button === 0)) return;
 36 | 
 37 |     // Disable default drag zooming when the shift key is held down.
 38 |     map.dragPan.disable();
 39 | 
 40 |     // Call functions for the following events
 41 |     document.addEventListener('mousemove', onMouseMove);
 42 |     document.addEventListener('mouseup', onMouseUp);
 43 |     document.addEventListener('keydown', onKeyDown);
 44 | 
 45 |     // Capture the first xy coordinates
 46 |     startPos = mousePos(e);
 47 |     map.fire('boxselectstart', { originalEvent: e });
 48 |   };
 49 | 
 50 |   const onMouseMove = (e) => {
 51 |     var p0 = startPos,
 52 |       p1 = mousePos(e);
 53 | 
 54 |     if (!box) {
 55 |       box = document.createElement('div');
 56 |       box.classList.add('mapboxgl-boxzoom');
 57 |       container.appendChild(box);
 58 |       container.classList.add('mapboxgl-crosshair');
 59 |     }
 60 | 
 61 |     var minX = Math.min(p0.x, p1.x),
 62 |       maxX = Math.max(p0.x, p1.x),
 63 |       minY = Math.min(p0.y, p1.y),
 64 |       maxY = Math.max(p0.y, p1.y);
 65 | 
 66 |     // Adjust width and xy position of the box element ongoing
 67 |     var pos = 'translate(' + minX + 'px,' + minY + 'px)';
 68 |     box.style.transform = pos;
 69 |     box.style.WebkitTransform = pos;
 70 | 
 71 |     box.style.width = maxX - minX + 'px';
 72 |     box.style.height = maxY - minY + 'px';
 73 |   };
 74 | 
 75 |   const onMouseUp = (e) => {
 76 |     finish();
 77 |     map.fire('boxselectend', { originalEvent: e });
 78 |   };
 79 | 
 80 |   const onKeyDown = (e) => {
 81 |     if (e.keyCode === 27) {
 82 |       finish();
 83 |       map.fire('boxselectcancel', { originalEvent: e });
 84 |     }
 85 |   };
 86 | 
 87 |   const finish = () => {
 88 |     if (!box) return;
 89 | 
 90 |     document.removeEventListener('mousemove', onMouseMove, false);
 91 |     document.removeEventListener('keydown', onKeyDown, false);
 92 |     document.removeEventListener('mouseup', onMouseUp, false);
 93 | 
 94 |     container.classList.remove('mapboxgl-crosshair');
 95 | 
 96 |     box.parentNode.removeChild(box);
 97 |     box = null;
 98 | 
 99 |     map.dragPan.enable();
100 |   };
101 | 
102 |   onDestroy(() => {
103 |     if (canvas) canvas.removeEventListener('mousedown', onMouseDown);
104 |   });
105 |   </script>
106 | 


--------------------------------------------------------------------------------
/src/Layer.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import { createEventDispatcher, getContext, onDestroy } from "svelte";
  3 | import { mapKey, sourceKey } from "./context.js";
  4 | import { omitUndefinedValues } from "./utils.js";
  5 | 
  6 | const mapContext = getContext(mapKey);
  7 | const map = mapContext.getMap();
  8 | const loadedStore = mapContext.getLoadedStore();
  9 | 
 10 | const sourceContext = getContext(sourceKey);
 11 | const sourceId = (sourceContext) ? sourceContext.getSourceId() : undefined;
 12 | 
 13 | export let filter = undefined;
 14 | export let id = sourceId;
 15 | export let layout = undefined;
 16 | export let maxzoom = undefined;
 17 | export let metadata = undefined;
 18 | export let minzoom = undefined;
 19 | export let paint = undefined;
 20 | export let sourceLayer = undefined;
 21 | export let source = undefined;
 22 | export let type;
 23 | 
 24 | const dispatch = createEventDispatcher();
 25 | 
 26 | // Cf https://docs.mapbox.com/mapbox-gl-js/api/#map#on
 27 | const eventNames = [
 28 |   "mousedown",
 29 |   "mouseup",
 30 |   "click",
 31 |   "dblclick",
 32 |   "mousemove",
 33 |   "mouseenter",
 34 |   "mouseleave",
 35 |   "mouseover",
 36 |   "mouseout",
 37 |   "contextmenu",
 38 |   "touchstart",
 39 |   "touchend",
 40 |   "touchcancel"
 41 | ];
 42 | 
 43 | function addLayer() {
 44 |   const options = omitUndefinedValues({
 45 |     id,
 46 |     layout,
 47 |     filter: filter || undefined, // `null` is not accepted as an option
 48 |     maxzoom,
 49 |     metadata,
 50 |     minzoom,
 51 |     paint,
 52 |     source: source || sourceId,
 53 |     "source-layer": sourceLayer,
 54 |     type
 55 |   });
 56 |   map.addLayer(options);
 57 | }
 58 | 
 59 | function handleStyledata() {
 60 |   // Check that source is defined, because many "styledata" events are triggered,
 61 |   // and source is not defined when the first one occurs.
 62 |   if (!map.getLayer(id) && sourceId && map.getSource(sourceId)) {
 63 |     addLayer();
 64 |   }
 65 | }
 66 | 
 67 | const eventHandlers = {};
 68 | 
 69 | $: if ($loadedStore) {
 70 |   const layer = map.getLayer(id);
 71 |   if (layer) {
 72 |     map.setFilter(id, filter);
 73 |     map.setLayerZoomRange(id, minzoom || 0, maxzoom || 24);
 74 |     for (const [name, value] of Object.entries(layout || {})) {
 75 |       map.setLayoutProperty(id, name, value);
 76 |     }
 77 |     for (const [name, value] of Object.entries(paint || {})) {
 78 |       map.setPaintProperty(id, name, value);
 79 |     }
 80 |   } else {
 81 |     addLayer();
 82 |     // Listen to "styledata" event to re-create the layer if the style changes.
 83 |     map.on("styledata", handleStyledata);
 84 | 
 85 |     // Forward events related to this layer.
 86 |     for (const eventName of eventNames) {
 87 |       const eventHandler = event => {
 88 |         dispatch(eventName, event);
 89 |       };
 90 |       map.on(eventName, id, eventHandler);
 91 |       eventHandlers[eventName] = eventHandler;
 92 |     }
 93 | 
 94 |     if (sourceContext) sourceContext.addChildLayer(id);
 95 |   }
 96 | }
 97 | 
 98 | onDestroy(() => {
 99 |   // Unregister events registered by this layer to avoid multiplicating callbacks.
100 |   map.off("styledata", handleStyledata);
101 |   for (const eventName of eventNames) {
102 |     map.off(eventName, id, eventHandlers[eventName]);
103 |   }
104 | 
105 |   // If <Layer> is child of <Source>, the layer will have been removed by the onDestroy of <Source>.
106 |   // The following statement ensures layer is removed in other cases.
107 |   if (map.getLayer(id)) {
108 |     map.removeLayer(id);
109 |   }
110 | });
111 | </script>
112 | 


--------------------------------------------------------------------------------
/src/Map.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   // import important css declarations given by mapbox-gl
  3 |   import 'mapbox-gl/dist/mapbox-gl.css';
  4 |   import BoxSelect from './BoxSelect.svelte';
  5 | 
  6 |   // mapboxgl properties
  7 |   export let accessToken;
  8 |   export let baseApiUrl = undefined;
  9 | 
 10 |   // mapboxgl.Map instance
 11 |   export let map = null;
 12 | 
 13 |   // mapboxgl.Map properties
 14 |   export let antialias = undefined;
 15 |   export let attributionControl = undefined;
 16 |   export let bearing = undefined;
 17 |   export let bearingSnap = undefined;
 18 |   export let bounds = undefined;
 19 |   export let boxZoom = undefined;
 20 |   export let boxSelect = undefined;
 21 |   export let center = undefined;
 22 |   export let clickTolerance = undefined;
 23 |   export let collectResourceTiming = undefined;
 24 |   export let crossSourceCollisions = undefined;
 25 |   export let customAttribution = undefined;
 26 |   export let doubleClickZoom = undefined;
 27 |   export let dragPan = undefined;
 28 |   export let dragRotate = undefined;
 29 |   export let fadeDuration = undefined;
 30 |   export let failIfMajorPerformanceCaveat = undefined;
 31 |   export let fitBoundsOptions = undefined;
 32 |   export let hash = undefined;
 33 |   export let interactive = undefined;
 34 |   export let keyboard = undefined;
 35 |   export let locale = undefined;
 36 |   export let localIdeographFontFamily = undefined;
 37 |   export let logoPosition = undefined;
 38 |   export let maxBounds = undefined;
 39 |   export let maxPitch = undefined;
 40 |   export let maxTileCacheSize = undefined;
 41 |   export let maxZoom = undefined;
 42 |   export let minPitch = undefined;
 43 |   export let minZoom = undefined;
 44 |   export let pitch = undefined;
 45 |   export let pitchWithRotate = undefined;
 46 |   export let preserveDrawingBuffer = undefined;
 47 |   export let refreshExpiredTiles = undefined;
 48 |   export let renderWorldCopies = undefined;
 49 |   export let scrollZoom = undefined;
 50 |   export let style = undefined;
 51 |   export let touchZoomRotate = undefined;
 52 |   export let trackResize = undefined;
 53 |   export let transformRequest = undefined;
 54 |   export let zoom = undefined;
 55 | 
 56 |   // <Map> Svelte component properties
 57 |   export let loaded = false;
 58 |   export let styleLoaded = false;
 59 | 
 60 |   import mapboxgl, { Map } from 'mapbox-gl';
 61 |   import { onMount, createEventDispatcher, setContext } from 'svelte';
 62 |   import { writable } from 'svelte/store';
 63 |   import { mapKey } from './context.js';
 64 |   import { omitUndefinedValues } from './utils.js';
 65 | 
 66 |   mapboxgl.accessToken = accessToken;
 67 |   if (baseApiUrl) {
 68 |     mapboxgl.baseApiUrl = baseApiUrl;
 69 |   }
 70 | 
 71 |   const loadedStore = writable(false);
 72 | 
 73 |   setContext(mapKey, {
 74 |     getMap: () => map,
 75 |     getLoadedStore: () => loadedStore,
 76 |   });
 77 | 
 78 |   // expose map and loaded outside
 79 |   export const getMap = () => map;
 80 |   export const isLoaded = () => loaded;
 81 | 
 82 |   const dispatch = createEventDispatcher();
 83 | 
 84 |   let container;
 85 | 
 86 |   onMount(async () => {
 87 |     if (boxSelect) {
 88 |       if (boxZoom) {
 89 |         const msg = 'Cannot enable both boxZoom and boxSelect. Disabling boxZoom';
 90 |         console.warn(msg);
 91 |       }
 92 |       boxZoom = false;
 93 |     }
 94 |     const options = omitUndefinedValues({
 95 |       antialias,
 96 |       attributionControl,
 97 |       bearing,
 98 |       bounds,
 99 |       bearingSnap,
100 |       boxZoom,
101 |       boxSelect,
102 |       center,
103 |       clickTolerance,
104 |       collectResourceTiming,
105 |       container,
106 |       crossSourceCollisions,
107 |       customAttribution,
108 |       doubleClickZoom,
109 |       dragPan,
110 |       dragRotate,
111 |       fadeDuration,
112 |       failIfMajorPerformanceCaveat,
113 |       fitBoundsOptions,
114 |       hash,
115 |       interactive,
116 |       keyboard,
117 |       locale,
118 |       localIdeographFontFamily,
119 |       logoPosition,
120 |       maxBounds,
121 |       maxPitch,
122 |       maxTileCacheSize,
123 |       maxZoom,
124 |       minPitch,
125 |       minZoom,
126 |       pitch,
127 |       pitchWithRotate,
128 |       preserveDrawingBuffer,
129 |       refreshExpiredTiles,
130 |       renderWorldCopies,
131 |       scrollZoom,
132 |       style,
133 |       touchZoomRotate,
134 |       trackResize,
135 |       transformRequest,
136 |       zoom,
137 |     });
138 |     map = new Map(options);
139 | 
140 |     function updateGeoState() {
141 |       bearing = map.getBearing();
142 |       center = map.getCenter();
143 |       pitch = map.getPitch();
144 |       zoom = map.getZoom();
145 |     }
146 | 
147 |     // Events
148 |     // Cf https://docs.mapbox.com/mapbox-gl-js/api/#map
149 | 
150 |     function handleClick(event) {
151 |       dispatch('click', event);
152 |     }
153 | 
154 |     function handleData(event) {
155 |       styleLoaded = map.isStyleLoaded();
156 |       dispatch('data', event);
157 |     }
158 | 
159 |     function handleLoad(event) {
160 |       loaded = true;
161 |       $loadedStore = true;
162 |       updateGeoState();
163 |       dispatch('load', event);
164 |     }
165 | 
166 |     function handleMove(event) {
167 |       updateGeoState();
168 |       dispatch('move', event);
169 |     }
170 | 
171 |     function handleMoveEnd(event) {
172 |       updateGeoState();
173 |       dispatch('moveend', event);
174 |     }
175 | 
176 |     const handleBoxSelectStart = (e) => dispatch('boxselectstart', e);
177 |     const handleBoxSelectEnd = (e) => dispatch('boxselectend', e);
178 |     const handleBoxSelectCancel = (e) => dispatch('boxselectcancel', e);
179 | 
180 |     map.on('click', handleClick);
181 |     map.on('data', handleData);
182 |     map.on('load', handleLoad);
183 |     map.on('move', handleMove);
184 |     map.on('moveend', handleMoveEnd);
185 | 
186 |     map.on('boxselectstart', handleBoxSelectStart);
187 |     map.on('boxselectend', handleBoxSelectEnd);
188 |     map.on('boxselectcancel', handleBoxSelectCancel);
189 | 
190 |     // TODO forward all events
191 |     // Cf https://docs.mapbox.com/mapbox-gl-js/api/#map.event:resize
192 | 
193 |     return () => {
194 |       map.off('click', handleClick);
195 |       map.off('data', handleData);
196 |       map.off('load', handleLoad);
197 |       map.off('move', handleMove);
198 |       map.off('moveend', handleMoveEnd);
199 | 
200 |       map.off('boxselectstart', handleBoxSelectStart);
201 |       map.off('boxselectend', handleBoxSelectEnd);
202 |       map.off('boxselectcancel', handleBoxSelectCancel);
203 | 
204 |       map.remove();
205 |     };
206 |   });
207 | 
208 |   $: if (map) {
209 |     map.setStyle(style);
210 |   }
211 |   </script>
212 | 
213 |   <div bind:this={container}>
214 |     {#if map}
215 |       {#if boxSelect}
216 |         <BoxSelect />
217 |       {/if}
218 |       <slot />
219 |     {/if}
220 |   </div>
221 | 
222 |   <style>
223 |   div {
224 |     width: 100%;
225 |     height: 100%;
226 |   }
227 |   </style>
228 | 


--------------------------------------------------------------------------------
/src/Marker.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let coordinates;
 3 | 
 4 |   import { Marker } from "mapbox-gl";
 5 |   import { onDestroy, getContext, setContext } from "svelte";
 6 |   import { mapKey, markerKey } from "./context.js";
 7 | 
 8 |   setContext(markerKey, {
 9 |     getMarker: () => marker
10 |   });
11 | 
12 |   const mapContext = getContext(mapKey);
13 |   const map = mapContext.getMap();
14 | 
15 |   const marker = new Marker().setLngLat(coordinates).addTo(map);
16 | 
17 |   $: marker.setLngLat(coordinates);
18 | 
19 |   onDestroy(() => {
20 |     marker.remove();
21 |   });
22 | </script>
23 | 
24 | <slot />
25 | 


--------------------------------------------------------------------------------
/src/Popup.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   // mapboxgl.Map properties
  3 |   export let anchor = undefined;
  4 |   export let className = undefined;
  5 |   export let closeButton = undefined;
  6 |   export let closeOnClick = undefined;
  7 |   export let closeOnMove = undefined;
  8 |   export let maxWidth = undefined;
  9 |   export let offset = undefined;
 10 | 
 11 |   // <Popup> Svelte component properties
 12 |   export let coordinates = undefined;
 13 |   export let open = undefined;
 14 | 
 15 |   import { Popup } from "mapbox-gl";
 16 |   import { getContext, onDestroy } from "svelte";
 17 |   import { mapKey, markerKey } from "./context.js";
 18 |   import { omitUndefinedValues } from "./utils.js";
 19 | 
 20 |   const mapContext = getContext(mapKey);
 21 |   const map = mapContext.getMap();
 22 | 
 23 |   let slotRef;
 24 | 
 25 |   const options = omitUndefinedValues({
 26 |     anchor,
 27 |     className,
 28 |     closeButton,
 29 |     closeOnClick,
 30 |     closeOnMove,
 31 |     maxWidth,
 32 |     offset
 33 |   });
 34 | 
 35 |   const popup = new Popup(options);
 36 | 
 37 |   function handleOpen() {
 38 |     open = true;
 39 |   }
 40 | 
 41 |   function handleClose() {
 42 |     open = false;
 43 |   }
 44 | 
 45 |   popup.on("open", handleOpen);
 46 |   popup.on("close", handleClose);
 47 | 
 48 |   $: if (slotRef) {
 49 |     popup.setDOMContent(slotRef);
 50 |   }
 51 | 
 52 |   const markerContext = getContext(markerKey);
 53 |   if (!markerContext) {
 54 |     // <Popup> is child of <Map>
 55 |     if (open === undefined) {
 56 |       open = true;
 57 |     }
 58 |   }
 59 |   $: if (markerContext) {
 60 |     // <Popup> is child of <Marker>
 61 |     if (coordinates) {
 62 |       throw new Error(
 63 |         `<Popup> must not have a 'coordinates' property when used as a child of <Marker>`
 64 |       );
 65 |     }
 66 |     const marker = markerContext.getMarker();
 67 |     if (marker) {
 68 |       if (marker.getPopup()) {
 69 |         if (open !== popup.isOpen()) {
 70 |           marker.togglePopup();
 71 |         }
 72 |       } else {
 73 |         marker.setPopup(popup);
 74 |         const markerElement = marker.getElement();
 75 |         markerElement.style.cursor = "pointer";
 76 |         open = popup.isOpen();
 77 |       }
 78 |     }
 79 |   } else {
 80 |     // <Popup> is child of <Map>
 81 |     if (!coordinates) {
 82 |       throw new Error(
 83 |         `<Popup> must have a 'coordinates' property when used as a child of <Map>`
 84 |       );
 85 |     }
 86 |     popup.setLngLat(coordinates);
 87 |     if (open) {
 88 |       popup.addTo(map);
 89 |     } else {
 90 |       popup.remove();
 91 |     }
 92 |   }
 93 | 
 94 |   onDestroy(() => {
 95 |     popup.off("open", handleOpen);
 96 |     popup.off("close", handleClose);
 97 |     popup.remove();
 98 |     if (markerContext) {
 99 |       const marker = markerContext.getMarker();
100 |       marker.setPopup(null);
101 |       const markerElement = marker.getElement();
102 |       markerElement.style.cursor = null;
103 |     }
104 |   });
105 | </script>
106 | 
107 | <span bind:this={slotRef}>
108 |   <slot />
109 | </span>
110 | 


--------------------------------------------------------------------------------
/src/context.js:
--------------------------------------------------------------------------------
1 | export const mapKey = {}
2 | export const markerKey = {}
3 | export const sourceKey = {}
4 | 


--------------------------------------------------------------------------------
/src/controls/AttributionControl.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let compact = undefined;
 3 |   export let position = undefined;
 4 | 
 5 |   import { AttributionControl } from "mapbox-gl";
 6 |   import { getContext, onDestroy } from "svelte";
 7 |   import { mapKey } from "../context.js";
 8 |   import { omitUndefinedValues } from "../utils.js";
 9 | 
10 |   const mapContext = getContext(mapKey);
11 |   const map = mapContext.getMap();
12 | 
13 |   let slotRef;
14 | 
15 |   $: if (slotRef) {
16 |     const customAttribution = slotRef.innerHTML;
17 |     const options = omitUndefinedValues({ compact, customAttribution });
18 |     const attributionControl = new AttributionControl(options);
19 |     map.addControl(attributionControl, position);
20 |     onDestroy(() => {
21 |       map.removeControl(attributionControl);
22 |     });
23 |   }
24 | </script>
25 | 
26 | <style>
27 |   span {
28 |     display: none;
29 |   }
30 | </style>
31 | 
32 | <span bind:this={slotRef}>
33 |   <slot />
34 | </span>
35 | 


--------------------------------------------------------------------------------
/src/controls/FullscreenControl.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let container = undefined;
 3 |   export let position = undefined;
 4 | 
 5 |   import { FullscreenControl } from "mapbox-gl";
 6 |   import { getContext, onDestroy } from "svelte";
 7 |   import { mapKey } from "../context.js";
 8 |   import { omitUndefinedValues } from "../utils.js";
 9 | 
10 |   const mapContext = getContext(mapKey);
11 |   const map = mapContext.getMap();
12 | 
13 |   const options = omitUndefinedValues({ container });
14 |   const fullscreenControl = new FullscreenControl(options);
15 |   map.addControl(fullscreenControl, position);
16 | 
17 |   onDestroy(() => {
18 |     map.removeControl(fullscreenControl);
19 |   });
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/controls/GeolocateControl.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let position = undefined;
 3 |   export let positionOptions = undefined;
 4 |   export let fitBoundsOptions = undefined;
 5 |   export let trackUserLocation = undefined;
 6 |   export let showAccuracyCircle = undefined;
 7 |   export let showUserLocation = undefined;
 8 |   export { geolocateControl as ref };
 9 | 
10 |   import { GeolocateControl } from "mapbox-gl";
11 |   import { createEventDispatcher, getContext, onDestroy } from "svelte";
12 |   import { mapKey } from "../context.js";
13 |   import { omitUndefinedValues } from "../utils.js";
14 | 
15 |   const dispatch = createEventDispatcher();
16 | 
17 |   const mapContext = getContext(mapKey);
18 |   const map = mapContext.getMap();
19 | 
20 |   const options = omitUndefinedValues({
21 |     positionOptions,
22 |     fitBoundsOptions,
23 |     trackUserLocation,
24 |     showAccuracyCircle,
25 |     showUserLocation
26 |   });
27 |   const geolocateControl = new GeolocateControl(options);
28 |   map.addControl(geolocateControl, position);
29 | 
30 |   // Cf https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol.event:error
31 |   const eventNames = [
32 |     "error",
33 |     "outofmaxbounds",
34 |     "trackuserlocationstart",
35 |     "trackuserlocationend",
36 |     "geolocate"
37 |   ];
38 | 
39 |   const eventHandlers = {};
40 | 
41 |   for (const eventName of eventNames) {
42 |     const eventHandler = event => {
43 |       dispatch(eventName, event);
44 |     };
45 |     geolocateControl.on(eventName, eventHandler);
46 |     eventHandlers[eventName] = eventHandler;
47 |   }
48 | 
49 |   onDestroy(() => {
50 |     for (const eventName of eventNames) {
51 |       geolocateControl.off(eventName, eventHandlers[eventName]);
52 |     }
53 |     map.removeControl(geolocateControl);
54 |   });
55 | </script>
56 | 


--------------------------------------------------------------------------------
/src/controls/NavigationControl.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let position = undefined;
 3 |   export let showCompass = undefined;
 4 |   export let showZoom = undefined;
 5 |   export let visualizePitch = undefined;
 6 | 
 7 |   import { NavigationControl } from "mapbox-gl";
 8 |   import { getContext, onDestroy } from "svelte";
 9 |   import { mapKey } from "../context.js";
10 |   import { omitUndefinedValues } from "../utils.js";
11 | 
12 |   const mapContext = getContext(mapKey);
13 |   const map = mapContext.getMap();
14 | 
15 |   const options = omitUndefinedValues({
16 |     showCompass,
17 |     showZoom,
18 |     visualizePitch
19 |   });
20 |   const navigationControl = new NavigationControl(options);
21 |   map.addControl(navigationControl, position);
22 | 
23 |   onDestroy(() => {
24 |     map.removeControl(navigationControl);
25 |   });
26 | </script>
27 | 


--------------------------------------------------------------------------------
/src/controls/ScaleControl.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let maxWidth = undefined;
 3 |   export let position = undefined;
 4 |   export let unit = undefined;
 5 | 
 6 |   import { ScaleControl } from "mapbox-gl";
 7 |   import { getContext, onDestroy } from "svelte";
 8 |   import { mapKey } from "../context.js";
 9 |   import { omitUndefinedValues } from "../utils.js";
10 | 
11 |   const mapContext = getContext(mapKey);
12 |   const map = mapContext.getMap();
13 | 
14 |   const options = omitUndefinedValues({ maxWidth, unit });
15 |   const scaleControl = new ScaleControl(options);
16 |   map.addControl(scaleControl, position);
17 | 
18 |   $: scaleControl.setUnit(unit);
19 | 
20 |   onDestroy(() => {
21 |     map.removeControl(scaleControl);
22 |   });
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/controls/SvelteControl.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let position = null;
 3 | 
 4 |   import { getContext, onMount } from "svelte";
 5 |   import { mapKey } from "../context.js";
 6 | 
 7 |   const mapContext = getContext(mapKey);
 8 |   const map = mapContext.getMap();
 9 | 
10 |   let rootElement;
11 | 
12 |   onMount(() => {
13 |     const layerSelectorControl = {
14 |       onAdd(map) {
15 |         return rootElement;
16 |       },
17 |       onRemove() {},
18 |     };
19 |     map.addControl(layerSelectorControl, position || undefined);
20 |     return function onDestroy() {
21 |       map.removeControl(layerSelectorControl);
22 |     };
23 |   });
24 | </script>
25 | 
26 | <div bind:this={rootElement} class="mapboxgl-ctrl mapboxgl-ctrl-group">
27 |   <slot {map} />
28 | </div>
29 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | export { default as Map } from "./Map.svelte"
 2 | 
 3 | // Controls
 4 | export { default as AttributionControl } from "./controls/AttributionControl.svelte"
 5 | export { default as FullscreenControl } from "./controls/FullscreenControl.svelte"
 6 | export { default as GeolocateControl } from "./controls/GeolocateControl.svelte"
 7 | export { default as NavigationControl } from "./controls/NavigationControl.svelte"
 8 | export { default as ScaleControl } from "./controls/ScaleControl.svelte"
 9 | export { default as SvelteControl } from "./controls/SvelteControl.svelte"
10 | 
11 | // Sources
12 | export { default as GeoJSONSource } from "./sources/GeoJSONSource.svelte"
13 | export { default as VectorSource } from "./sources/VectorSource.svelte"
14 | 
15 | // Other components
16 | export { default as Layer } from "./Layer.svelte"
17 | export { default as Marker } from "./Marker.svelte"
18 | export { default as Popup } from "./Popup.svelte"
19 | 
20 | // Other modules
21 | import * as context from "./context.js"
22 | import * as utils from "./utils.js"
23 | export { context, utils }
24 | 


--------------------------------------------------------------------------------
/src/sources/GeoJSONSource.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   // Cf https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#geojson
 3 | 
 4 |   export let attribution = undefined;
 5 |   export let buffer = undefined;
 6 |   export let cluster = undefined;
 7 |   export let clusterMaxZoom = undefined;
 8 |   export let clusterProperties = undefined;
 9 |   export let clusterRadius = undefined;
10 |   export let data = undefined; // URL or inline data
11 |   export let generateId = undefined;
12 |   export let id;
13 |   export let lineMetrics = undefined;
14 |   export let maxzoom = undefined;
15 |   export let promoteId = undefined;
16 |   export let tolerance = undefined;
17 | 
18 |   import { getContext, setContext, onDestroy } from "svelte";
19 |   import { mapKey, sourceKey } from "../context.js";
20 |   import { omitUndefinedValues } from "../utils.js";
21 | 
22 |   const mapContext = getContext(mapKey);
23 |   const map = mapContext.getMap();
24 |   const loadedStore = mapContext.getLoadedStore();
25 | 
26 |   // Remember ID of all <Layer> children, in order to remove them in onDestroy, before removing the source.
27 |   const layers = [];
28 | 
29 |   setContext(sourceKey, {
30 |     getSourceId: () => id,
31 |     addChildLayer: id => {
32 |       layers.push(id);
33 |     }
34 |   });
35 | 
36 |   function addSource() {
37 |     const options = omitUndefinedValues({
38 |       attribution,
39 |       buffer,
40 |       cluster,
41 |       clusterMaxZoom,
42 |       clusterProperties,
43 |       clusterRadius,
44 |       data,
45 |       generateId,
46 |       lineMetrics,
47 |       maxzoom,
48 |       promoteId,
49 |       tolerance,
50 |       type: "geojson"
51 |     });
52 |     map.addSource(id, options);
53 |   }
54 | 
55 |   function handleStyledata() {
56 |     if (!map.getSource(id)) {
57 |       addSource();
58 |     }
59 |   }
60 | 
61 |   $: if ($loadedStore) {
62 |     const source = map.getSource(id);
63 |     if (source) {
64 |       source.setData(data);
65 |     } else {
66 |       // Add the source before "styledata" event occurs to make it available to child <Layer>.
67 |       addSource();
68 | 
69 |       // Listen to "styledata" event to re-create the source if the style changes.
70 |       map.on("styledata", handleStyledata);
71 |     }
72 |   }
73 | 
74 |   onDestroy(() => {
75 |     map.off("styledata", handleStyledata);
76 | 
77 |     // Remove all <Layer> children of <GeoJSONSource>.
78 |     let layerId;
79 |     while ((layerId = layers.pop())) {
80 |       if (map.getLayer(layerId)) {
81 |         map.removeLayer(layerId);
82 |       }
83 |     }
84 | 
85 |     if (map.getSource(id)) {
86 |       map.removeSource(id);
87 |     }
88 |   });
89 | </script>
90 | 
91 | <slot />
92 | 


--------------------------------------------------------------------------------
/src/sources/VectorSource.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   // Cf https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#vector
 3 | 
 4 |   export let attribution = undefined;
 5 |   export let bounds = undefined;
 6 |   export let id;
 7 |   export let maxzoom = undefined;
 8 |   export let minzoom = undefined;
 9 |   export let promoteId = undefined;
10 |   export let scheme = undefined;
11 |   export let tiles = undefined;
12 |   export let url = undefined;
13 | 
14 |   import {
15 |     createEventDispatcher,
16 |     getContext,
17 |     setContext,
18 |     onDestroy,
19 |   } from "svelte";
20 |   import { mapKey, sourceKey } from "../context.js";
21 |   import { omitUndefinedValues } from "../utils.js";
22 | 
23 |   const dispatch = createEventDispatcher();
24 | 
25 |   const mapContext = getContext(mapKey);
26 |   const map = mapContext.getMap();
27 |   const loadedStore = mapContext.getLoadedStore();
28 | 
29 |   // Remember ID of all <Layer> children, in order to remove them in onDestroy, before removing the source.
30 |   const layers = [];
31 | 
32 |   setContext(sourceKey, {
33 |     getSourceId: () => id,
34 |     addChildLayer: id => {
35 |       layers.push(id);
36 |     }
37 |   });
38 | 
39 |   function addSource() {
40 |     const options = omitUndefinedValues({
41 |       attribution,
42 |       bounds,
43 |       maxzoom,
44 |       minzoom,
45 |       promoteId,
46 |       scheme,
47 |       tiles,
48 |       type: "vector",
49 |       url
50 |     });
51 |     map.addSource(id, options);
52 |     dispatch("add", id);
53 |   }
54 | 
55 |   function handleStyledata() {
56 |     if (!map.getSource(id)) {
57 |       addSource();
58 |     }
59 |   }
60 | 
61 |   $: if ($loadedStore) {
62 |     const source = map.getSource(id);
63 |     if (!source) {
64 |       // Add the source before "styledata" event occurs to make it available to child <Layer>.
65 |       addSource();
66 | 
67 |       // Listen to "styledata" event to re-create the source if the style changes.
68 |       map.on("styledata", handleStyledata);
69 |     }
70 |   }
71 | 
72 |   onDestroy(() => {
73 |     map.off("styledata", handleStyledata);
74 | 
75 |     // Remove all <Layer> children of <VectorSource>.
76 |     let layerId;
77 |     while ((layerId = layers.pop())) {
78 |       if (map.getLayer(layerId)) {
79 |         map.removeLayer(layerId);
80 |       }
81 |     }
82 | 
83 |     if (map.getSource(id)) {
84 |       map.removeSource(id);
85 |     }
86 |   });
87 | </script>
88 | 
89 | <slot />
90 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | export function coordinatesAtClick(coordinates, { lng }) {
 2 |   // Ensure that if the map is zoomed out such that
 3 |   // multiple copies of the feature are visible, the
 4 |   // popup appears over the copy being pointed to.
 5 |   let newLng = coordinates[0]
 6 |   while (Math.abs(lng - newLng) > 180) {
 7 |     newLng += lng > newLng ? 360 : -360;
 8 |   }
 9 |   return [newLng, coordinates[1]]
10 | }
11 | 
12 | export function omitUndefinedValues(object) {
13 |   const result = {};
14 |   for (const key in object) {
15 |     if (object[key] !== undefined) {
16 |       result[key] = object[key];
17 |     }
18 |   }
19 |   return result;
20 | }
21 | 


--------------------------------------------------------------------------------
/stories/a_general.stories.js:
--------------------------------------------------------------------------------
 1 | import BindLoadProps from "./views/BindLoadProps.svelte"
 2 | import BindPositionalProps from "./views/BindPositionalProps.svelte"
 3 | import ChangeStyle from "./views/ChangeStyle.svelte"
 4 | import EaseTo from "./views/EaseTo.svelte"
 5 | import Map from "_src/Map.svelte";
 6 | import { defaultMapProps } from "./config.js"
 7 | 
 8 | export default {
 9 |   title: 'General',
10 | };
11 | 
12 | export const basic = () => ({
13 |   Component: Map,
14 |   props: defaultMapProps,
15 | });
16 | 
17 | export const initialCenterAndZoom = () => ({
18 |   Component: Map,
19 |   props: {
20 |     ...defaultMapProps,
21 |     center: { lng: 3.7792968750030695, lat: 48.935777757603375 },
22 |     zoom: 5
23 |   },
24 | });
25 | 
26 | export const bindPositionalProps = () => ({ Component: BindPositionalProps });
27 | 
28 | export const bindLoadProps = () => ({ Component: BindLoadProps });
29 | 
30 | export const changeStyle = () => ({ Component: ChangeStyle });
31 | 
32 | export const easeTo = () => ({ Component: EaseTo });
33 | 


--------------------------------------------------------------------------------
/stories/config.js:
--------------------------------------------------------------------------------
1 | export const accessToken = process.env.MAPBOX_ACCESS_TOKEN;
2 | export const globalMapboxGL = true;
3 | 
4 | export const defaultMapProps = {
5 |   accessToken,
6 |   globalMapboxGL,
7 |   style: "mapbox://styles/mapbox/streets-v11",
8 | }
9 | 


--------------------------------------------------------------------------------
/stories/controls.stories.js:
--------------------------------------------------------------------------------
 1 | import MapWithAllControls from './views/MapWithAllControls.svelte';
 2 | import MapWithAttributionControl from './views/MapWithAttributionControl.svelte';
 3 | import MapWithFullscreenControl from './views/MapWithFullscreenControl.svelte';
 4 | import MapWithGeolocateControl from './views/MapWithGeolocateControl.svelte';
 5 | import MapWithNavigationControl from './views/MapWithNavigationControl.svelte';
 6 | import MapWithScaleControl from './views/MapWithScaleControl.svelte';
 7 | import MapWithSvelteControl from './views/MapWithSvelteControl.svelte';
 8 | 
 9 | export default {
10 |   title: 'Controls',
11 | };
12 | 
13 | export const attribution = () => ({ Component: MapWithAttributionControl });
14 | export const fullscreen = () => ({ Component: MapWithFullscreenControl });
15 | export const geolocate = () => ({ Component: MapWithGeolocateControl });
16 | export const navigation = () => ({ Component: MapWithNavigationControl });
17 | export const scale = () => ({ Component: MapWithScaleControl });
18 | export const all = () => ({ Component: MapWithAllControls });
19 | export const svelte = () => ({ Component: MapWithSvelteControl });
20 | 


--------------------------------------------------------------------------------
/stories/data.js:
--------------------------------------------------------------------------------
 1 | export const myGeoJSON = {
 2 |   type: "FeatureCollection",
 3 |   features: [
 4 |     {
 5 |       type: "Feature",
 6 |       geometry: {
 7 |         type: "Point",
 8 |         coordinates: [-77.03238901390978, 38.913188059745586]
 9 |       },
10 |       properties: {
11 |         title: "Mapbox DC",
12 |         icon: "monument"
13 |       }
14 |     },
15 |     {
16 |       type: "Feature",
17 |       geometry: {
18 |         type: "Point",
19 |         coordinates: [-122.414, 37.776]
20 |       },
21 |       properties: {
22 |         title: "Mapbox SF",
23 |         icon: "harbor"
24 |       }
25 |     }
26 |   ]
27 | };
28 | 


--------------------------------------------------------------------------------
/stories/markers.stories.js:
--------------------------------------------------------------------------------
 1 | import ManyMarkersView from "./views/markers/ManyMarkersView.svelte"
 2 | import MarkerAttachPopupView from "./views/markers/MarkerAttachPopupView.svelte"
 3 | import MarkerBindOpenOfAttachedPopupView from "./views/markers/MarkerBindOpenOfAttachedPopupView.svelte"
 4 | import MarkerMountAttachedPopupView from "./views/markers/MarkerMountAttachedPopupView.svelte"
 5 | import MarkerMountView from "./views/markers/MarkerMountView.svelte"
 6 | import MarkerUpdateCoordinatesView from "./views/markers/MarkerUpdateCoordinatesView.svelte"
 7 | import MarkerView from "./views/markers/MarkerView.svelte"
 8 | 
 9 | export default {
10 |   title: 'Markers',
11 | };
12 | 
13 | export const basic = () => ({ Component: MarkerView });
14 | 
15 | export const updateCoordinates = () => ({ Component: MarkerUpdateCoordinatesView });
16 | 
17 | export const mount = () => ({ Component: MarkerMountView });
18 | 
19 | export const attachPopup = () => ({ Component: MarkerAttachPopupView });
20 | 
21 | export const mountAttachedPopup = () => ({ Component: MarkerMountAttachedPopupView });
22 | 
23 | export const bindOpenOfAttachedPopup = () => ({ Component: MarkerBindOpenOfAttachedPopupView });
24 | 
25 | export const manyMarkers = () => ({ Component: ManyMarkersView });
26 | 


--------------------------------------------------------------------------------
/stories/popups.stories.js:
--------------------------------------------------------------------------------
 1 | import PopupBindOpenView from "./views/popups/PopupBindOpenView.svelte"
 2 | import PopupMountView from "./views/popups/PopupMountView.svelte"
 3 | import PopupUpdateContentView from "./views/popups/PopupUpdateContentView.svelte"
 4 | import PopupUpdateCoordinatesView from "./views/popups/PopupUpdateCoordinatesView.svelte"
 5 | import PopupView from "./views/popups/PopupView.svelte"
 6 | 
 7 | export default {
 8 |   title: 'Popups',
 9 | };
10 | 
11 | export const basic = () => ({ Component: PopupView });
12 | 
13 | export const noCloseButton = () => ({
14 |   Component: PopupView,
15 |   props: { closeButton: false }
16 | });
17 | 
18 | export const noCloseOnClick = () => ({
19 |   Component: PopupView,
20 |   props: { closeOnClick: false }
21 | });
22 | 
23 | export const htmlContent = () => ({
24 |   Component: PopupView,
25 |   props: { content: "I'm a popup with <b>HTML</b> <i>content</i>!" }
26 | });
27 | 
28 | export const bindOpen = () => ({ Component: PopupBindOpenView });
29 | 
30 | export const updateContent = () => ({ Component: PopupUpdateContentView });
31 | 
32 | export const updateCoordinates = () => ({ Component: PopupUpdateCoordinatesView });
33 | 
34 | export const mount = () => ({ Component: PopupMountView });
35 | 


--------------------------------------------------------------------------------
/stories/sources.stories.js:
--------------------------------------------------------------------------------
 1 | import GeoJSONClusterView from './views/sources/GeoJSONClusterView.svelte';
 2 | import GeoJSONFilterView from './views/sources/GeoJSONFilterView.svelte';
 3 | import GeoJSONSourceMountView from './views/sources/GeoJSONSourceMountView.svelte';
 4 | import GeoJSONSourceUpdateData from './views/sources/GeoJSONSourceUpdateData.svelte';
 5 | import GeoJSONSourceUpdateLayout from './views/sources/GeoJSONSourceUpdateLayout.svelte';
 6 | import GeoJSONSourceVisibilityView from './views/sources/GeoJSONSourceVisibilityView.svelte';
 7 | import GeoJSONSourceWithSymbolLayerView from './views/sources/GeoJSONSourceWithSymbolLayerView.svelte';
 8 | import VectorSourceWithCircleLayerView from './views/sources/VectorSourceWithCircleLayerView.svelte';
 9 | 
10 | export default {
11 |   title: 'Sources',
12 | };
13 | 
14 | export const geoJSONSourceWithSymbolLayer = () => ({ Component: GeoJSONSourceWithSymbolLayerView });
15 | 
16 | export const geoJSONSourceMount = () => ({ Component: GeoJSONSourceMountView });
17 | 
18 | export const geoJSONSourceVisibility = () => ({ Component: GeoJSONSourceVisibilityView });
19 | 
20 | export const geoJSONSourceUpdateLayout = () => ({ Component: GeoJSONSourceUpdateLayout });
21 | 
22 | export const geoJSONSourceUpdateData = () => ({ Component: GeoJSONSourceUpdateData });
23 | 
24 | export const vectorSourceWithCircleLayer = () => ({ Component: VectorSourceWithCircleLayerView });
25 | 
26 | export const cluster = () => ({ Component: GeoJSONClusterView });
27 | 
28 | export const filter = () => ({ Component: GeoJSONFilterView });
29 | 


--------------------------------------------------------------------------------
/stories/views/BindLoadProps.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Layout from "_stories/views/Layout.svelte";
 3 |   import Map from "_src/Map.svelte";
 4 |   import { defaultMapProps } from "_stories/config.js";
 5 | 
 6 |   let loaded;
 7 |   let styleLoaded;
 8 | </script>
 9 | 
10 | <Layout>
11 |   <span slot="left">
12 |     <pre>{JSON.stringify({ loaded, styleLoaded }, null, 2)}</pre>
13 |   </span>
14 |   <span slot="right">
15 |     <Map {...defaultMapProps} bind:loaded bind:styleLoaded />
16 |   </span>
17 | </Layout>
18 | 


--------------------------------------------------------------------------------
/stories/views/BindPositionalProps.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Layout from "_stories/views/Layout.svelte";
 3 |   import Map from "_src/Map.svelte";
 4 |   import { defaultMapProps } from "_stories/config.js";
 5 | 
 6 |   let bearing;
 7 |   let center = { lng: 3.7792968750030695, lat: 48.935777757603375 };
 8 |   let pitch;
 9 |   let zoom = 4;
10 | </script>
11 | 
12 | <Layout>
13 |   <span slot="left">
14 |     <pre>{JSON.stringify({ bearing, center, pitch, zoom }, null, 2)}</pre>
15 |   </span>
16 |   <span slot="right">
17 |     <Map {...defaultMapProps} bind:bearing bind:center bind:pitch bind:zoom />
18 |   </span>
19 | </Layout>
20 | 


--------------------------------------------------------------------------------
/stories/views/ChangeStyle.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Layout from "_stories/views/Layout.svelte";
 3 |   import Map from "_src/Map.svelte";
 4 |   import { defaultMapProps } from "_stories/config.js";
 5 | 
 6 |   const styles = [
 7 |     "mapbox://styles/mapbox/streets-v11",
 8 |     "mapbox://styles/mapbox/outdoors-v11",
 9 |     "mapbox://styles/mapbox/light-v10",
10 |     "mapbox://styles/mapbox/dark-v10",
11 |     "mapbox://styles/mapbox/satellite-v9",
12 |     "mapbox://styles/mapbox/satellite-streets-v11",
13 |     "mapbox://styles/mapbox/navigation-preview-day-v4",
14 |     "mapbox://styles/mapbox/navigation-preview-night-v4",
15 |     "mapbox://styles/mapbox/navigation-guidance-day-v4",
16 |     "mapbox://styles/mapbox/navigation-guidance-night-v4"
17 |   ];
18 |   let style = styles[0];
19 | </script>
20 | 
21 | <Layout>
22 |   <span slot="left">
23 |     <label>
24 |       style
25 |       <select bind:value={style}>
26 |         {#each styles as style}
27 |           <option value={style}>{style}</option>
28 |         {/each}
29 |       </select>
30 |     </label>
31 |   </span>
32 |   <span slot="right">
33 |     <Map {...defaultMapProps} {style} />
34 |   </span>
35 | </Layout>
36 | 


--------------------------------------------------------------------------------
/stories/views/EaseTo.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Layout from "_stories/views/Layout.svelte";
 3 |   import Map from "_src/Map.svelte";
 4 |   import { defaultMapProps } from "_stories/config.js";
 5 | 
 6 |   let map;
 7 | 
 8 |   function easeTo() {
 9 |     map.easeTo({
10 |       center: { lng: 3.7792968750030695, lat: 48.935777757603375 },
11 |       zoom: 6
12 |     });
13 |   }
14 | </script>
15 | 
16 | <Layout>
17 |   <span slot="left">
18 |     <button on:click={() => easeTo()}>Ease to</button>
19 |   </span>
20 |   <span slot="right">
21 |     <Map {...defaultMapProps} bind:map />
22 |   </span>
23 | </Layout>
24 | 


--------------------------------------------------------------------------------
/stories/views/Layout.svelte:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .container {
 3 |     display: flex;
 4 |     height: 100%;
 5 |   }
 6 | 
 7 |   .m-4 {
 8 |     margin: 1rem;
 9 |   }
10 | 
11 |   .w-25 {
12 |     width: 25%;
13 |   }
14 | 
15 |   .w-75 {
16 |     width: 75%;
17 |   }
18 | </style>
19 | 
20 | <div class="container">
21 |   <div class="w-25 m-4">
22 |     <slot name="left" />
23 |   </div>
24 |   <div class="w-75">
25 |     <slot name="right" />
26 |   </div>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/stories/views/MapWithAllControls.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Layout from "_stories/views/Layout.svelte";
 3 |   import Map from "_src/Map.svelte";
 4 |   import AttributionControl from "_src/controls/AttributionControl.svelte";
 5 |   import FullscreenControl from "_src/controls/FullscreenControl.svelte";
 6 |   import GeolocateControl from "_src/controls/GeolocateControl.svelte";
 7 |   import NavigationControl from "_src/controls/NavigationControl.svelte";
 8 |   import ScaleControl from "_src/controls/ScaleControl.svelte";
 9 |   import { defaultMapProps } from "_stories/config.js";
10 | 
11 |   export let attribution = true;
12 |   export let fullscreen = true;
13 |   export let geolocate = true;
14 |   export let navigation = true;
15 |   export let scale = true;
16 | 
17 |   let geolocateRef;
18 | </script>
19 | 
20 | <Layout>
21 |   <span slot="left">
22 |     <p>
23 |       <label>
24 |         Show attribution control
25 |         <input type="checkbox" bind:checked={attribution} />
26 |       </label>
27 |     </p>
28 |     <p>
29 |       <label>
30 |         Show fullscreen control
31 |         <input type="checkbox" bind:checked={fullscreen} />
32 |       </label>
33 |     </p>
34 |     <p>
35 |       <button on:click={() => geolocateRef.trigger()}>Geolocate</button>
36 |     </p>
37 |     <p>
38 |       <label>
39 |         Show geolocate control
40 |         <input type="checkbox" bind:checked={geolocate} />
41 |       </label>
42 |     </p>
43 |     <p>
44 |       <label>
45 |         Show navigation control
46 |         <input type="checkbox" bind:checked={navigation} />
47 |       </label>
48 |     </p>
49 |     <p>
50 |       <label>
51 |         Show scale control
52 |         <input type="checkbox" bind:checked={scale} />
53 |       </label>
54 |     </p>
55 |   </span>
56 |   <span slot="right">
57 |     <Map {...defaultMapProps} attributionControl={false}>
58 |       {#if fullscreen}
59 |         <FullscreenControl />
60 |       {/if}
61 |       {#if geolocate}
62 |         <GeolocateControl bind:ref={geolocateRef} />
63 |       {/if}
64 |       {#if navigation}
65 |         <NavigationControl />
66 |       {/if}
67 |       {#if scale}
68 |         <ScaleControl />
69 |       {/if}
70 |       {#if attribution}
71 |         <AttributionControl>
72 |           Custom content,
73 |           <b>HTML</b>
74 |           <i>supported</i>
75 |         </AttributionControl>
76 |       {/if}
77 |     </Map>
78 |   </span>
79 | </Layout>
80 | 


--------------------------------------------------------------------------------
/stories/views/MapWithAttributionControl.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import AttributionControl from "_src/controls/AttributionControl.svelte";
 4 |   import { defaultMapProps } from "_stories/config.js";
 5 | </script>
 6 | 
 7 | <Map {...defaultMapProps} attributionControl={false}>
 8 |   <AttributionControl>
 9 |     Custom content,
10 |     <b>HTML</b>
11 |     <i>supported</i>
12 |   </AttributionControl>
13 | </Map>
14 | 


--------------------------------------------------------------------------------
/stories/views/MapWithFullscreenControl.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import FullscreenControl from "_src/controls/FullscreenControl.svelte";
 4 |   import { defaultMapProps } from "_stories/config.js";
 5 | </script>
 6 | 
 7 | <Map {...defaultMapProps}>
 8 |   <FullscreenControl />
 9 | </Map>
10 | 


--------------------------------------------------------------------------------
/stories/views/MapWithGeolocateControl.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import GeolocateControl from "_src/controls/GeolocateControl.svelte";
 4 |   import { defaultMapProps } from "_stories/config.js";
 5 | </script>
 6 | 
 7 | <Map {...defaultMapProps}>
 8 |   <GeolocateControl />
 9 | </Map>
10 | 


--------------------------------------------------------------------------------
/stories/views/MapWithNavigationControl.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import NavigationControl from "_src/controls/NavigationControl.svelte";
 4 |   import { defaultMapProps } from "_stories/config.js";
 5 | </script>
 6 | 
 7 | <Map {...defaultMapProps}>
 8 |   <NavigationControl />
 9 | </Map>
10 | 


--------------------------------------------------------------------------------
/stories/views/MapWithScaleControl.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import ScaleControl from "_src/controls/ScaleControl.svelte";
 4 |   import { defaultMapProps } from "_stories/config.js";
 5 | </script>
 6 | 
 7 | <Map {...defaultMapProps}>
 8 |   <ScaleControl />
 9 | </Map>
10 | 


--------------------------------------------------------------------------------
/stories/views/MapWithSvelteControl.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import SvelteControl from "_src/controls/SvelteControl.svelte";
 4 |   import { defaultMapProps } from "_stories/config.js";
 5 | </script>
 6 | 
 7 | <style>
 8 |   .hello-control {
 9 |     padding: 1rem;
10 |     color: red;
11 |     font-size: 22pt;
12 |   }
13 | </style>
14 | 
15 | <Map {...defaultMapProps}>
16 |   <SvelteControl>
17 |     <div class="hello-control">hello, I'm a Svelte component!</div>
18 |   </SvelteControl>
19 | </Map>
20 | 


--------------------------------------------------------------------------------
/stories/views/markers/ManyMarkersView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import Marker from "_src/Marker.svelte";
 4 |   import Popup from "_src/Popup.svelte";
 5 |   import Layout from "_stories/views/Layout.svelte";
 6 |   import { defaultMapProps } from "_stories/config.js";
 7 |   import { randomPosition } from "@turf/random";
 8 | 
 9 |   export let generatedCount = 100;
10 | 
11 |   function generate() {
12 |     let features = [];
13 |     for (let i = 0; i < generatedCount; i++) {
14 |       features.push({
15 |         id: `${i}`,
16 |         title: `Feature ${i}`,
17 |         coordinates: randomPosition([100, 45, 110, 55])
18 |       });
19 |     }
20 |     return features;
21 |   }
22 | 
23 |   let features = generate();
24 |   let open = {};
25 | 
26 |   function deleteFeature(id) {
27 |     features = features.filter(feature => feature.id !== id);
28 |   }
29 | 
30 |   function deleteHalfFeatures() {
31 |     features = _.sampleSize(features, features.length / 2);
32 |   }
33 | 
34 |   function openFeature(id) {
35 |     open[id] = true;
36 |   }
37 | 
38 |   function closeFeature(id) {
39 |     open[id] = false;
40 |   }
41 | </script>
42 | 
43 | <style>
44 |   .mb-6 {
45 |     margin-bottom: 1.5rem;
46 |   }
47 | </style>
48 | 
49 | <Layout>
50 |   <span slot="left">
51 |     <button
52 |       on:click={() => {
53 |         features = generate();
54 |       }}>
55 |       Generate {generatedCount} features
56 |     </button>
57 |     <button on:click={() => deleteHalfFeatures()}>Delete half features</button>
58 |     <hr />
59 |     <ul>
60 |       {#each features as { title, coordinates, id } (id)}
61 |         <li class="mb-6">
62 |           {title}
63 |           <pre>{JSON.stringify({ coordinates }, null, 2)}</pre>
64 |           {#if open[id]}
65 |             <button on:click={() => closeFeature(id)}>Close</button>
66 |           {:else}
67 |             <button on:click={() => openFeature(id)}>Open</button>
68 |           {/if}
69 |           <button on:click={() => deleteFeature(id)}>Delete</button>
70 |         </li>
71 |       {/each}
72 |     </ul>
73 |   </span>
74 |   <span slot="right">
75 |     <Map {...defaultMapProps} center={{ lat: 50, lng: 105 }} zoom={4}>
76 |       {#each features as { title, coordinates, id } (id)}
77 |         <Marker {coordinates}>
78 |           <Popup bind:open={open[id]}>{title}</Popup>
79 |         </Marker>
80 |       {/each}
81 |     </Map>
82 |   </span>
83 | </Layout>
84 | 


--------------------------------------------------------------------------------
/stories/views/markers/MarkerAttachPopupView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import Marker from "_src/Marker.svelte";
 4 |   import Popup from "_src/Popup.svelte";
 5 |   import { defaultMapProps } from "_stories/config.js";
 6 | 
 7 |   const coordinates = { lat: 48, lng: 3 };
 8 | </script>
 9 | 
10 | <Map {...defaultMapProps} center={coordinates} zoom={10}>
11 |   <Marker {coordinates} {...$$restProps}>
12 |     <Popup>
13 |       I'm a popup attached to a marker!
14 |       <br />
15 |       I don't need coordinates because I reuse the marker ones.
16 |       <br />
17 |       <br />
18 |       Small detail: the mouse cursor is set to "pointer".
19 |     </Popup>
20 |   </Marker>
21 | 
22 | </Map>
23 | 


--------------------------------------------------------------------------------
/stories/views/markers/MarkerBindOpenOfAttachedPopupView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import Marker from "_src/Marker.svelte";
 4 |   import Popup from "_src/Popup.svelte";
 5 |   import Layout from "_stories/views/Layout.svelte";
 6 |   import { defaultMapProps } from "_stories/config.js";
 7 | 
 8 |   const coordinates = { lat: 48, lng: 3 };
 9 | 
10 |   let open = true;
11 | </script>
12 | 
13 | <Layout>
14 |   <span slot="left">
15 |     <label>
16 |       <input type="checkbox" bind:checked={open} />
17 |       open
18 |     </label>
19 |   </span>
20 |   <span slot="right">
21 |     <Map {...defaultMapProps} center={coordinates} zoom={10}>
22 |       <Marker {coordinates} {...$$restProps}>
23 |         <Popup bind:open>
24 |           I'm a popup attached to a marker!
25 |           <br />
26 |           The "open" property of the popup is bound to a Svelte property.
27 |         </Popup>
28 |       </Marker>
29 |     </Map>
30 |   </span>
31 | </Layout>
32 | 


--------------------------------------------------------------------------------
/stories/views/markers/MarkerMountAttachedPopupView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import Marker from "_src/Marker.svelte";
 4 |   import Popup from "_src/Popup.svelte";
 5 |   import Layout from "_stories/views/Layout.svelte";
 6 |   import { defaultMapProps } from "_stories/config.js";
 7 | 
 8 |   const coordinates = { lat: 48, lng: 3 };
 9 | 
10 |   let mounted = true;
11 | </script>
12 | 
13 | <Layout>
14 |   <span slot="left">
15 |     <label>
16 |       <input type="checkbox" bind:checked={mounted} />
17 |       mounted
18 |     </label>
19 |   </span>
20 |   <span slot="right">
21 |     <Map {...defaultMapProps} center={coordinates} zoom={10}>
22 |       <Marker {coordinates} {...$$restProps}>
23 |         {#if mounted}
24 |           <Popup>
25 |             I'm a popup attached to a marker, placed inside a {'{#if mounted}'}
26 |             clause. !
27 |             <br />
28 |             <br />
29 |             Small detail: the mouse cursor is set to "pointer" when popup is
30 |             mounted, and restored when unmounted.
31 |           </Popup>
32 |         {/if}
33 |       </Marker>
34 |     </Map>
35 |   </span>
36 | </Layout>
37 | 


--------------------------------------------------------------------------------
/stories/views/markers/MarkerMountView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Layout from "_stories/views/Layout.svelte";
 3 |   import Map from "_src/Map.svelte";
 4 |   import Marker from "_src/Marker.svelte";
 5 |   import { defaultMapProps } from "_stories/config.js";
 6 | 
 7 |   const coordinates = { lat: 48, lng: 3 };
 8 | 
 9 |   let mounted = true;
10 | </script>
11 | 
12 | <Layout>
13 |   <span slot="left">
14 |     <label>
15 |       <input type="checkbox" bind:checked={mounted} />
16 |       mounted
17 |     </label>
18 |   </span>
19 |   <span slot="right">
20 |     <Map {...defaultMapProps} center={coordinates} zoom={10}>
21 |       {#if mounted}
22 |         <Marker {coordinates} {...$$restProps} />
23 |       {/if}
24 |     </Map>
25 |   </span>
26 | </Layout>
27 | 


--------------------------------------------------------------------------------
/stories/views/markers/MarkerUpdateCoordinatesView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Layout from "_stories/views/Layout.svelte";
 3 |   import Map from "_src/Map.svelte";
 4 |   import Marker from "_src/Marker.svelte";
 5 |   import { defaultMapProps } from "_stories/config.js";
 6 | 
 7 |   const coordinates = { lat: 48, lng: 3 };
 8 | </script>
 9 | 
10 | <Layout>
11 |   <span slot="left">
12 |     <p>
13 |       <label>
14 |         latitude
15 |         <br />
16 |         <input type="range" bind:value={coordinates.lat} min={-90} max={90} />
17 |       </label>
18 |       {coordinates.lat}
19 |     </p>
20 |     <p>
21 |       <label>
22 |         longitude
23 |         <br />
24 |         <input type="range" bind:value={coordinates.lng} min={-180} max={180} />
25 |       </label>
26 |       {coordinates.lng}
27 |     </p>
28 |   </span>
29 |   <span slot="right">
30 |     <Map {...defaultMapProps} center={coordinates} zoom={0}>
31 |       <Marker {coordinates} />
32 |     </Map>
33 |   </span>
34 | </Layout>
35 | 


--------------------------------------------------------------------------------
/stories/views/markers/MarkerView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import Marker from "_src/Marker.svelte";
 4 |   import { defaultMapProps } from "_stories/config.js";
 5 | 
 6 |   const coordinates = { lat: 48, lng: 3 };
 7 | </script>
 8 | 
 9 | <Map {...defaultMapProps} center={coordinates} zoom={10}>
10 |   <Marker {coordinates} {...$$restProps} />
11 | </Map>
12 | 


--------------------------------------------------------------------------------
/stories/views/popups/PopupBindOpenView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Layout from "_stories/views/Layout.svelte";
 3 |   import Map from "_src/Map.svelte";
 4 |   import Popup from "_src/Popup.svelte";
 5 |   import { defaultMapProps } from "_stories/config.js";
 6 | 
 7 |   const coordinates = { lat: 48, lng: 3 };
 8 | 
 9 |   let open;
10 | </script>
11 | 
12 | <Layout>
13 |   <span slot="left">
14 |     <label>
15 |       <input type="checkbox" bind:checked={open} />
16 |       open
17 |     </label>
18 |   </span>
19 |   <span slot="right">
20 |     <Map {...defaultMapProps} center={coordinates} zoom={10}>
21 |       <Popup {coordinates} bind:open>
22 |         My open status is bound to a Svelte property!
23 |         <br />
24 |         You can uncheck the checkbox, and see me being closed.
25 |         <br />
26 |         Or you can close me, and see the checkbox being unchecked.
27 |       </Popup>
28 |     </Map>
29 |   </span>
30 | </Layout>
31 | 


--------------------------------------------------------------------------------
/stories/views/popups/PopupMountView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Layout from "_stories/views/Layout.svelte";
 3 |   import Map from "_src/Map.svelte";
 4 |   import Popup from "_src/Popup.svelte";
 5 |   import { defaultMapProps } from "_stories/config.js";
 6 | 
 7 |   const coordinates = { lat: 48, lng: 3 };
 8 | 
 9 |   let mounted = true;
10 | </script>
11 | 
12 | <Layout>
13 |   <span slot="left">
14 |     <label>
15 |       <input type="checkbox" bind:checked={mounted} />
16 |       mounted
17 |     </label>
18 |   </span>
19 |   <span slot="right">
20 |     <Map {...defaultMapProps} center={coordinates} zoom={10}>
21 |       {#if mounted}
22 |         <Popup {coordinates}>
23 |           I am placed inside a {'{#if mounted}'} clause.
24 |           <br />
25 |           You can close me, and see the checkbox still being checked.
26 |         </Popup>
27 |       {/if}
28 |     </Map>
29 |   </span>
30 | </Layout>
31 | 


--------------------------------------------------------------------------------
/stories/views/popups/PopupUpdateContentView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Layout from "_stories/views/Layout.svelte";
 3 |   import Map from "_src/Map.svelte";
 4 |   import Popup from "_src/Popup.svelte";
 5 |   import { defaultMapProps } from "_stories/config.js";
 6 | 
 7 |   const coordinates = { lat: 48, lng: 3 };
 8 | 
 9 |   let content =
10 |     "My content is bound to a Svelte property!\n<br>\nYou can try to <i>edit it</i>.";
11 | </script>
12 | 
13 | <Layout>
14 |   <span slot="left">
15 |     <label>
16 |       popup content
17 |       <br />
18 |       <textarea rows={10} bind:value={content} />
19 |     </label>
20 |   </span>
21 |   <span slot="right">
22 |     <Map {...defaultMapProps} center={coordinates} zoom={10}>
23 |       <Popup {coordinates}>
24 |         {@html content}
25 |       </Popup>
26 |     </Map>
27 |   </span>
28 | </Layout>
29 | 


--------------------------------------------------------------------------------
/stories/views/popups/PopupUpdateCoordinatesView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Layout from "_stories/views/Layout.svelte";
 3 |   import Map from "_src/Map.svelte";
 4 |   import Popup from "_src/Popup.svelte";
 5 |   import { defaultMapProps } from "_stories/config.js";
 6 | 
 7 |   const coordinates = { lat: 48, lng: 3 };
 8 | </script>
 9 | 
10 | <Layout>
11 |   <span slot="left">
12 |     <p>
13 |       <label>
14 |         latitude
15 |         <br />
16 |         <input type="range" bind:value={coordinates.lat} min={-90} max={90} />
17 |       </label>
18 |       {coordinates.lat}
19 |     </p>
20 |     <p>
21 |       <label>
22 |         longitude
23 |         <br />
24 |         <input type="range" bind:value={coordinates.lng} min={-180} max={180} />
25 |       </label>
26 |       {coordinates.lng}
27 |     </p>
28 |   </span>
29 |   <span slot="right">
30 |     <Map {...defaultMapProps} center={coordinates} zoom={0}>
31 |       <Popup {coordinates}>
32 |         My coordinates are bound to a Svelte property!
33 |       </Popup>
34 |     </Map>
35 |   </span>
36 | </Layout>
37 | 


--------------------------------------------------------------------------------
/stories/views/popups/PopupView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import Popup from "_src/Popup.svelte";
 4 |   import { defaultMapProps } from "_stories/config.js";
 5 | 
 6 |   const coordinates = { lat: 48, lng: 3 };
 7 | 
 8 |   export let content = "Hi I'm a popup!";
 9 | </script>
10 | 
11 | <Map {...defaultMapProps} center={coordinates} zoom={10}>
12 |   <Popup {coordinates} {...$$restProps}>
13 |     {@html content}
14 |   </Popup>
15 | </Map>
16 | 


--------------------------------------------------------------------------------
/stories/views/sources/GeoJSONClusterView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   // Adaptation of https://docs.mapbox.com/mapbox-gl-js/example/cluster/
 3 | 
 4 |   import Map from "_src/Map.svelte";
 5 |   import Popup from "_src/Popup.svelte";
 6 |   import GeoJSONSource from "_src/sources/GeoJSONSource.svelte";
 7 |   import Layer from "_src/Layer.svelte";
 8 |   import { coordinatesAtClick } from "_src/utils.js";
 9 |   import { defaultMapProps } from "_stories/config.js";
10 | 
11 |   let map;
12 |   let selection;
13 |   let popupOpen;
14 | 
15 |   function setCursor(name) {
16 |     map.getCanvas().style.cursor = name;
17 |   }
18 | 
19 |   function zoomToCluster({ event, sourceId, layerId }) {
20 |     const { point } = event.detail;
21 |     const features = map.queryRenderedFeatures(point, {
22 |       layers: [layerId]
23 |     });
24 |     const clusterId = features[0].properties.cluster_id;
25 |     map
26 |       .getSource(sourceId)
27 |       .getClusterExpansionZoom(clusterId, function(err, zoom) {
28 |         if (err) return;
29 | 
30 |         map.easeTo({
31 |           center: features[0].geometry.coordinates,
32 |           zoom: zoom
33 |         });
34 |       });
35 |   }
36 | 
37 |   function showPopup(event) {
38 |     const { features } = event.detail;
39 |     const point = features[0];
40 | 
41 |     const coordinates = coordinatesAtClick(
42 |       point.geometry.coordinates,
43 |       event.lngLat
44 |     );
45 |     const mag = point.properties.mag;
46 |     const tsunami = point.properties.tsunami === 1 ? "yes" : "no";
47 | 
48 |     selection = { coordinates, mag, tsunami };
49 |     popupOpen = true;
50 |   }
51 | </script>
52 | 
53 | <Map
54 |   {...defaultMapProps}
55 |   bind:map
56 |   center={[-103.59179687498357, 40.66995747013945]}
57 |   zoom={3}>
58 |   <GeoJSONSource
59 |     id="earthquakes"
60 |     data="https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson"
61 |     cluster={true}
62 |     clusterMaxZoom={14}
63 |     clusterRadius={50}>
64 |     <Layer
65 |       id="clusters"
66 |       type="circle"
67 |       filter={['has', 'point_count']}
68 |       paint={{ 'circle-color': ['step', ['get', 'point_count'], '#51bbd6', 100, '#f1f075', 750, '#f28cb1'], 'circle-radius': ['step', ['get', 'point_count'], 20, 100, 30, 750, 40] }}
69 |       on:click={event => zoomToCluster({
70 |           event,
71 |           sourceId: 'earthquakes',
72 |           layerId: 'clusters'
73 |         })}
74 |       on:mouseenter={() => setCursor('pointer')}
75 |       on:mouseleave={() => setCursor('')} />
76 |     <Layer
77 |       id="cluster-count"
78 |       type="symbol"
79 |       filter={['has', 'point_count']}
80 |       layout={{ 'text-field': '{point_count_abbreviated}', 'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'], 'text-size': 12 }} />
81 |     <Layer
82 |       id="unclustered-point"
83 |       type="circle"
84 |       filter={['!', ['has', 'point_count']]}
85 |       paint={{ 'circle-color': '#11b4da', 'circle-radius': 4, 'circle-stroke-width': 1, 'circle-stroke-color': '#fff' }}
86 |       on:click={showPopup}
87 |       on:mouseenter={() => setCursor('pointer')}
88 |       on:mouseleave={() => setCursor('')} />
89 |   </GeoJSONSource>
90 |   {#if selection}
91 |     <Popup bind:open={popupOpen} coordinates={selection.coordinates}>
92 |       magnitude: {selection.mag}
93 |       <br />
94 |       Was there a tsunami? {selection.tsunami}
95 |     </Popup>
96 |   {/if}
97 | </Map>
98 | 


--------------------------------------------------------------------------------
/stories/views/sources/GeoJSONFilterView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   // Adaptation of https://docs.mapbox.com/mapbox-gl-js/example/cluster/
 3 | 
 4 |   import Map from "_src/Map.svelte";
 5 |   import Popup from "_src/Popup.svelte";
 6 |   import GeoJSONSource from "_src/sources/GeoJSONSource.svelte";
 7 |   import Layer from "_src/Layer.svelte";
 8 |   import Layout from "_stories/views/Layout.svelte";
 9 |   import { coordinatesAtClick } from "_src/utils.js";
10 |   import { defaultMapProps } from "_stories/config.js";
11 | 
12 |   let map;
13 |   let selection;
14 |   let popupOpen;
15 |   let tsunamiInput = null;
16 |   $: tsunamiFilter =
17 |     tsunamiInput === null
18 |       ? null
19 |       : ["==", ["get", "tsunami"], tsunamiInput ? 1 : 0];
20 | 
21 |   function setCursor(name) {
22 |     map.getCanvas().style.cursor = name;
23 |   }
24 | 
25 |   function showPopup(event) {
26 |     const { features } = event.detail;
27 |     const point = features[0];
28 | 
29 |     const coordinates = coordinatesAtClick(
30 |       point.geometry.coordinates,
31 |       event.lngLat
32 |     );
33 |     const mag = point.properties.mag;
34 |     const tsunami = point.properties.tsunami === 1 ? "yes" : "no";
35 | 
36 |     selection = { coordinates, mag, tsunami };
37 |     popupOpen = true;
38 |   }
39 | </script>
40 | 
41 | <Layout>
42 |   <span slot="left">
43 |     caused by tsunami?
44 |     <br />
45 |     <label>
46 |       <input type="radio" bind:group={tsunamiInput} value={null} />
47 |       no matter
48 |     </label>
49 |     <br />
50 |     <label>
51 |       <input type="radio" bind:group={tsunamiInput} value={true} />
52 |       yes
53 |     </label>
54 |     <br />
55 |     <label>
56 |       <input type="radio" bind:group={tsunamiInput} value={false} />
57 |       no
58 |     </label>
59 |   </span>
60 |   <span slot="right">
61 |     <Map
62 |       {...defaultMapProps}
63 |       bind:map
64 |       center={[-103.59179687498357, 40.66995747013945]}
65 |       zoom={3}>
66 |       <GeoJSONSource
67 |         id="earthquakes"
68 |         data="https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson">
69 |         <Layer
70 |           id="points"
71 |           type="circle"
72 |           filter={tsunamiFilter}
73 |           paint={{ 'circle-color': '#11b4da', 'circle-radius': 4, 'circle-stroke-width': 1, 'circle-stroke-color': '#fff' }}
74 |           on:click={event => showPopup(event)}
75 |           on:mouseenter={() => setCursor('pointer')}
76 |           on:mouseleave={() => setCursor('')} />
77 |       </GeoJSONSource>
78 |       {#if selection}
79 |         <Popup bind:open={popupOpen} coordinates={selection.coordinates}>
80 |           magnitude: {selection.mag}
81 |           <br />
82 |           Was there a tsunami? {selection.tsunami}
83 |         </Popup>
84 |       {/if}
85 |     </Map>
86 |   </span>
87 | </Layout>
88 | 


--------------------------------------------------------------------------------
/stories/views/sources/GeoJSONSourceMountView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import Layout from "_stories/views/Layout.svelte";
 4 |   import GeoJSONSource from "_src/sources/GeoJSONSource.svelte";
 5 |   import Layer from "_src/Layer.svelte";
 6 |   import { defaultMapProps } from "_stories/config.js";
 7 |   import { myGeoJSON } from "_stories/data.js";
 8 | 
 9 |   const myGeoJSONLayout = {
10 |     // get the icon name from the source's "icon" property
11 |     // concatenate the name to get an icon from the style's sprite sheet
12 |     "icon-image": ["concat", ["get", "icon"], "-15"],
13 |     // get the title name from the source's "title" property
14 |     "text-field": ["get", "title"],
15 |     "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
16 |     "text-offset": [0, 0.6],
17 |     "text-anchor": "top"
18 |   };
19 | 
20 |   let mounted = true;
21 | </script>
22 | 
23 | <Layout>
24 |   <span slot="left">
25 |     <label>
26 |       <input type="checkbox" bind:checked={mounted} />
27 |       mounted
28 |     </label>
29 |   </span>
30 |   <span slot="right">
31 |     <Map {...defaultMapProps} center={{ lng: -106, lat: 39.4 }} zoom={2}>
32 |       {#if mounted}
33 |         <GeoJSONSource id="myGeoJSON" data={myGeoJSON}>
34 |           <Layer type="symbol" layout={myGeoJSONLayout} />
35 |         </GeoJSONSource>
36 |       {/if}
37 |     </Map>
38 |   </span>
39 | </Layout>
40 | 


--------------------------------------------------------------------------------
/stories/views/sources/GeoJSONSourceUpdateData.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import Layout from "_stories/views/Layout.svelte";
 4 |   import GeoJSONSource from "_src/sources/GeoJSONSource.svelte";
 5 |   import Layer from "_src/Layer.svelte";
 6 |   import { defaultMapProps } from "_stories/config.js";
 7 |   import { myGeoJSON } from "_stories/data.js";
 8 | 
 9 |   const myGeoJSONLayout = {
10 |     // get the icon name from the source's "icon" property
11 |     // concatenate the name to get an icon from the style's sprite sheet
12 |     "icon-image": ["concat", ["get", "icon"], "-15"],
13 |     // get the title name from the source's "title" property
14 |     "text-field": ["get", "title"],
15 |     "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
16 |     "text-offset": [0, 0.6],
17 |     "text-anchor": "top"
18 |   };
19 | 
20 |   const data = myGeoJSON;
21 |   function swapFeatures() {
22 |     [data.features[0].geometry, data.features[1].geometry] = [
23 |       data.features[1].geometry,
24 |       data.features[0].geometry
25 |     ];
26 |   }
27 | </script>
28 | 
29 | <Layout>
30 |   <span slot="left">
31 |     <button on:click={() => swapFeatures()}>Swap places</button>
32 |   </span>
33 |   <span slot="right">
34 |     <Map {...defaultMapProps} center={{ lng: -106, lat: 39.4 }} zoom={2}>
35 |       <GeoJSONSource id="places" {data}>
36 |         <Layer type="symbol" layout={myGeoJSONLayout} />
37 |       </GeoJSONSource>
38 |     </Map>
39 |   </span>
40 | </Layout>
41 | 


--------------------------------------------------------------------------------
/stories/views/sources/GeoJSONSourceUpdateLayout.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import GeoJSONSource from "_src/sources/GeoJSONSource.svelte";
 4 |   import Layer from "_src/Layer.svelte";
 5 |   import Layout from "_stories/views/Layout.svelte";
 6 |   import { defaultMapProps } from "_stories/config.js";
 7 |   import { myGeoJSON } from "_stories/data.js";
 8 | 
 9 |   const myGeoJSONLayout = {
10 |     // get the icon name from the source's "icon" property
11 |     // concatenate the name to get an icon from the style's sprite sheet
12 |     "icon-image": ["concat", ["get", "icon"], "-15"],
13 |     // get the title name from the source's "title" property
14 |     "text-field": ["get", "title"],
15 |     "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
16 |     "text-offset": [0, 0.6],
17 |     "text-anchor": "top"
18 |   };
19 | </script>
20 | 
21 | <Layout>
22 |   <span slot="left">
23 |     <label>
24 |       text-offset
25 |       <input
26 |         type="range"
27 |         min={-2}
28 |         max={2}
29 |         step={0.01}
30 |         bind:value={myGeoJSONLayout['text-offset'][1]} />
31 |       <br />
32 |       <code>{myGeoJSONLayout['text-offset'][1]}</code>
33 |     </label>
34 |   </span>
35 |   <span slot="right">
36 |     <Map {...defaultMapProps} center={{ lng: -106, lat: 39.4 }} zoom={2}>
37 |       <GeoJSONSource id="myGeoJSON" data={myGeoJSON}>
38 |         <Layer type="symbol" layout={myGeoJSONLayout} />
39 |       </GeoJSONSource>
40 |     </Map>
41 |   </span>
42 | </Layout>
43 | 


--------------------------------------------------------------------------------
/stories/views/sources/GeoJSONSourceVisibilityView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import Layout from "_stories/views/Layout.svelte";
 4 |   import GeoJSONSource from "_src/sources/GeoJSONSource.svelte";
 5 |   import Layer from "_src/Layer.svelte";
 6 |   import { defaultMapProps } from "_stories/config.js";
 7 |   import { myGeoJSON } from "_stories/data.js";
 8 | 
 9 |   let visible = true;
10 | 
11 |   $: myGeoJSONLayout = {
12 |     // get the icon name from the source's "icon" property
13 |     // concatenate the name to get an icon from the style's sprite sheet
14 |     "icon-image": ["concat", ["get", "icon"], "-15"],
15 |     // get the title name from the source's "title" property
16 |     "text-field": ["get", "title"],
17 |     "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
18 |     "text-offset": [0, 0.6],
19 |     "text-anchor": "top",
20 |     visibility: visible ? "visible" : "none"
21 |   };
22 | </script>
23 | 
24 | <Layout>
25 |   <span slot="left">
26 |     <label>
27 |       <input type="checkbox" bind:checked={visible} />
28 |       visible
29 |     </label>
30 |   </span>
31 |   <span slot="right">
32 |     <Map {...defaultMapProps} center={{ lng: -106, lat: 39.4 }} zoom={2}>
33 |       <GeoJSONSource id="myGeoJSON" data={myGeoJSON}>
34 |         <Layer type="symbol" layout={myGeoJSONLayout} />
35 |       </GeoJSONSource>
36 |     </Map>
37 |   </span>
38 | </Layout>
39 | 


--------------------------------------------------------------------------------
/stories/views/sources/GeoJSONSourceWithSymbolLayerView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Map from "_src/Map.svelte";
 3 |   import GeoJSONSource from "_src/sources/GeoJSONSource.svelte";
 4 |   import Layer from "_src/Layer.svelte";
 5 |   import { defaultMapProps } from "_stories/config.js";
 6 |   import { myGeoJSON } from "_stories/data.js";
 7 | 
 8 |   const myGeoJSONLayout = {
 9 |     // get the icon name from the source's "icon" property
10 |     // concatenate the name to get an icon from the style's sprite sheet
11 |     "icon-image": ["concat", ["get", "icon"], "-15"],
12 |     // get the title name from the source's "title" property
13 |     "text-field": ["get", "title"],
14 |     "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
15 |     "text-offset": [0, 0.6],
16 |     "text-anchor": "top"
17 |   };
18 | </script>
19 | 
20 | <Map {...defaultMapProps} center={{ lng: -106, lat: 39.4 }} zoom={2}>
21 |   <GeoJSONSource id="myGeoJSON" data={myGeoJSON}>
22 |     <Layer type="symbol" layout={myGeoJSONLayout} />
23 |   </GeoJSONSource>
24 | </Map>
25 | 


--------------------------------------------------------------------------------
/stories/views/sources/VectorSourceWithCircleLayerView.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Layout from "_stories/views/Layout.svelte";
 3 |   import Map from "_src/Map.svelte";
 4 |   import VectorSource from "_src/sources/VectorSource.svelte";
 5 |   import Layer from "_src/Layer.svelte";
 6 |   import { defaultMapProps } from "_stories/config.js";
 7 | 
 8 |   let map;
 9 | 
10 |   function fitBounds() {
11 |     if (!map) {
12 |       return;
13 |     }
14 |     // TODO Use <VectorSource bind:source />
15 |     const source = map.getSource("museums");
16 |     if (!source) {
17 |       return;
18 |     }
19 |     map.fitBounds(source.bounds);
20 |   }
21 | </script>
22 | 
23 | <Layout>
24 |   <span slot="left">
25 |     <button on:click={() => fitBounds()}>Fit bounds</button>
26 |   </span>
27 |   <span slot="right">
28 |     <Map
29 |       {...defaultMapProps}
30 |       bind:map
31 |       center={{ lng: -72, lat: -13.5 }}
32 |       zoom={12}>
33 |       <VectorSource id="museums" url="mapbox://mapbox.2opop9hr">
34 |         <Layer
35 |           id="museums"
36 |           type="circle"
37 |           paint={{ 'circle-radius': 8, 'circle-color': 'rgba(55,148,179,1)' }}
38 |           sourceLayer="museum-cusco" />
39 |       </VectorSource>
40 |     </Map>
41 |   </span>
42 | </Layout>
43 | 


--------------------------------------------------------------------------------