@beyonk/svelte-mapbox 9.1.0 → 10.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.env +1 -0
- package/.github/workflows/publish.yml +31 -0
- package/eslint.config.mjs.disabled +21 -0
- package/jsconfig.json +11 -0
- package/package.json +21 -30
- package/src/app.html +18 -0
- package/src/global.d.ts +1 -0
- package/{geocoder → src/lib/geocoder}/Geocoder.svelte +1 -1
- package/{map → src/lib/map}/Map.svelte +4 -1
- package/src/routes/+page.svelte +211 -0
- package/src/routes/_Earthquakes.svelte +131 -0
- package/src/routes/_MiniScroller.svelte +1 -0
- package/static/favicon.png +0 -0
- package/static/normalize.css +76 -0
- package/static/prettify.css +70 -0
- package/static/style.css +534 -0
- package/svelte.config.js +5 -0
- package/vite.config.js +8 -0
- package/asset-loader.d.ts +0 -1
- package/components.d.ts +0 -13
- package/event-bindings.d.ts +0 -1
- package/geocoder/Geocoder.svelte.d.ts +0 -53
- package/geocoder/geocoder-action.d.ts +0 -3
- package/map/Map.svelte.d.ts +0 -89
- package/map/Marker.svelte.d.ts +0 -50
- package/map/controls/GeolocateControl.svelte.d.ts +0 -40
- package/map/controls/NavigationControl.svelte.d.ts +0 -25
- package/map/controls/ScaleControl.svelte.d.ts +0 -25
- package/map/map-action.d.ts +0 -3
- package/mapbox.d.ts +0 -1
- package/queue.d.ts +0 -8
- /package/{asset-loader.js → src/lib/asset-loader.js} +0 -0
- /package/{components.js → src/lib/components.js} +0 -0
- /package/{event-bindings.js → src/lib/event-bindings.js} +0 -0
- /package/{geocoder → src/lib/geocoder}/geocoder-action.js +0 -0
- /package/{map → src/lib/map}/Marker.svelte +0 -0
- /package/{map → src/lib/map}/controls/GeolocateControl.svelte +0 -0
- /package/{map → src/lib/map}/controls/NavigationControl.svelte +0 -0
- /package/{map → src/lib/map}/controls/ScaleControl.svelte +0 -0
- /package/{map → src/lib/map}/map-action.js +0 -0
- /package/{mapbox.js → src/lib/mapbox.js} +0 -0
- /package/{queue.js → src/lib/queue.js} +0 -0
package/.env
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
PUBLIC_MAPBOX_TOKEN=your_mapbox_token
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
name: publish
|
|
2
|
+
|
|
3
|
+
on:
|
|
4
|
+
push:
|
|
5
|
+
branches:
|
|
6
|
+
- '*'
|
|
7
|
+
tags:
|
|
8
|
+
- 'v*'
|
|
9
|
+
pull_request:
|
|
10
|
+
branches:
|
|
11
|
+
- '*'
|
|
12
|
+
|
|
13
|
+
env:
|
|
14
|
+
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
|
|
15
|
+
|
|
16
|
+
jobs:
|
|
17
|
+
publish-npm:
|
|
18
|
+
if: startsWith(github.ref, 'refs/tags/v')
|
|
19
|
+
runs-on: ubuntu-latest
|
|
20
|
+
steps:
|
|
21
|
+
- name: checkout
|
|
22
|
+
uses: actions/checkout@v4
|
|
23
|
+
|
|
24
|
+
- name: set up node and pnpm
|
|
25
|
+
run: |
|
|
26
|
+
corepack enable
|
|
27
|
+
pnpm config set '//registry.npmjs.org/:_authToken' "${NODE_AUTH_TOKEN}"
|
|
28
|
+
pnpm i
|
|
29
|
+
|
|
30
|
+
- name: publish
|
|
31
|
+
run: pnpm publish --no-git-checks --access public
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import path from "node:path";
|
|
2
|
+
import { fileURLToPath } from "node:url";
|
|
3
|
+
import js from "@eslint/js";
|
|
4
|
+
import { FlatCompat } from "@eslint/eslintrc";
|
|
5
|
+
|
|
6
|
+
const __filename = fileURLToPath(import.meta.url);
|
|
7
|
+
const __dirname = path.dirname(__filename);
|
|
8
|
+
const compat = new FlatCompat({
|
|
9
|
+
baseDirectory: __dirname,
|
|
10
|
+
recommendedConfig: js.configs.recommended,
|
|
11
|
+
allConfig: js.configs.all
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
export default [{
|
|
15
|
+
ignores: ["**/package", "**/.svelte-kit"],
|
|
16
|
+
}, ...compat.extends("@beyonk/eslint-config/svelte"), {
|
|
17
|
+
languageOptions: {
|
|
18
|
+
ecmaVersion: 2020,
|
|
19
|
+
sourceType: "module",
|
|
20
|
+
},
|
|
21
|
+
}];
|
package/jsconfig.json
ADDED
package/package.json
CHANGED
|
@@ -1,41 +1,32 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@beyonk/svelte-mapbox",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "10.0.1",
|
|
4
4
|
"devDependencies": {
|
|
5
|
-
"@beyonk/eslint-config": "^
|
|
6
|
-
"@
|
|
7
|
-
"@
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
5
|
+
"@beyonk/eslint-config": "^8.0.2",
|
|
6
|
+
"@eslint/eslintrc": "^3.1.0",
|
|
7
|
+
"@eslint/js": "^9.14.0",
|
|
8
|
+
"@sveltejs/kit": "^2.8.0",
|
|
9
|
+
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
|
10
|
+
"eslint": "^9.14.0",
|
|
11
|
+
"eslint-plugin-svelte": "^2.46.0",
|
|
12
|
+
"svelte": "^5.1.14",
|
|
13
|
+
"svelte2tsx": "^0.7.23",
|
|
14
|
+
"typescript": "^5.6.3",
|
|
15
|
+
"vite": "^5.4.11"
|
|
14
16
|
},
|
|
15
17
|
"peerDependencies": {
|
|
16
|
-
"svelte": "
|
|
18
|
+
"svelte": ">=4.0.0"
|
|
17
19
|
},
|
|
18
20
|
"exports": {
|
|
19
|
-
"
|
|
20
|
-
".": "./components.js",
|
|
21
|
-
"./asset-loader": "./asset-loader.js",
|
|
22
|
-
"./components": "./components.js",
|
|
23
|
-
"./event-bindings": "./event-bindings.js",
|
|
24
|
-
"./geocoder/Geocoder.svelte": "./geocoder/Geocoder.svelte",
|
|
25
|
-
"./geocoder/geocoder-action": "./geocoder/geocoder-action.js",
|
|
26
|
-
"./map/Map.svelte": "./map/Map.svelte",
|
|
27
|
-
"./map/Marker.svelte": "./map/Marker.svelte",
|
|
28
|
-
"./map/controls/GeolocateControl.svelte": "./map/controls/GeolocateControl.svelte",
|
|
29
|
-
"./map/controls/NavigationControl.svelte": "./map/controls/NavigationControl.svelte",
|
|
30
|
-
"./map/controls/ScaleControl.svelte": "./map/controls/ScaleControl.svelte",
|
|
31
|
-
"./map/map-action": "./map/map-action.js",
|
|
32
|
-
"./mapbox": "./mapbox.js",
|
|
33
|
-
"./queue": "./queue.js"
|
|
21
|
+
".": "./components.js"
|
|
34
22
|
},
|
|
35
23
|
"types": "./components.d.ts",
|
|
36
24
|
"type": "module",
|
|
37
|
-
"
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
25
|
+
"packageManager": "pnpm@8.15.7",
|
|
26
|
+
"scripts": {
|
|
27
|
+
"dev": "vite dev --port 3030",
|
|
28
|
+
"build": "vite build",
|
|
29
|
+
"preview": "vite preview",
|
|
30
|
+
"lint": "eslint ."
|
|
31
|
+
}
|
|
41
32
|
}
|
package/src/app.html
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Svelte Mapbox Maps | Developer Documentation</title>
|
|
6
|
+
<link href='https://fonts.bunny.net/css?family=Open+Sans:400,300,600,700&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
|
|
7
|
+
<link href="/normalize.css" rel="stylesheet" type="text/css" />
|
|
8
|
+
<link href="/prettify.css" rel="stylesheet" type="text/css" />
|
|
9
|
+
<link href="/style.css" rel="stylesheet" type="text/css" />
|
|
10
|
+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
|
11
|
+
<meta name="viewport" content="width=device-width" />
|
|
12
|
+
%sveltekit.head%
|
|
13
|
+
</head>
|
|
14
|
+
<body data-sveltekit-preload-data="hover">
|
|
15
|
+
<div style="display: contents">%sveltekit.body%</div>
|
|
16
|
+
</body>
|
|
17
|
+
</html>
|
|
18
|
+
|
package/src/global.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="@sveltejs/kit" />
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
|
|
17
17
|
export let accessToken
|
|
18
18
|
export let options = {}
|
|
19
|
-
export let version = '
|
|
19
|
+
export let version = 'v5.0.3'
|
|
20
20
|
export let types = [ 'country', 'region', 'postcode', 'district', 'place', 'locality', 'neighborhood', 'address' ]
|
|
21
21
|
export let placeholder = 'Search'
|
|
22
22
|
export let value = null
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
|
1
2
|
<div
|
|
2
3
|
use:action={optionsWithDefaults}
|
|
3
4
|
on:ready={init}
|
|
@@ -9,6 +10,8 @@
|
|
|
9
10
|
on:zoomend
|
|
10
11
|
on:drag
|
|
11
12
|
on:keydown
|
|
13
|
+
on:keyup
|
|
14
|
+
role="application"
|
|
12
15
|
>
|
|
13
16
|
{#if map}
|
|
14
17
|
<slot></slot>
|
|
@@ -29,7 +32,7 @@
|
|
|
29
32
|
import { EventQueue } from '../queue.js'
|
|
30
33
|
|
|
31
34
|
export let map = null
|
|
32
|
-
export let version = '
|
|
35
|
+
export let version = 'v3.7.0'
|
|
33
36
|
export let center = [ 0, 0 ]
|
|
34
37
|
export let zoom = 9
|
|
35
38
|
export let zoomRate = 1
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
<header>
|
|
2
|
+
<div class="container">
|
|
3
|
+
<div class="row">
|
|
4
|
+
<div class="col-lg-2 col-xs-12 left">
|
|
5
|
+
<div id="logo">
|
|
6
|
+
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
7
|
+
viewBox="0 0 263.2 127" style="enable-background:new 0 0 263.2 127;" xml:space="preserve">
|
|
8
|
+
<g id="Layer_2_1_">
|
|
9
|
+
<g id="Layer_1-2">
|
|
10
|
+
<path class="st0" d="M263.2,28.5v-5.9h-22.5V0h-5.9v22.5H28.5V0h-5.9v22.5H0v5.9h22.5v70.1H0v5.9h22.5V127h5.9v-22.5h206.4V127
|
|
11
|
+
h5.9v-22.5h22.5v-5.9h-22.5V28.5H263.2z M234.8,98.5H28.5V28.5h206.4V98.5z M50.9,52.2h9.3c1.7-0.1,3.4,0.4,4.7,1.5
|
|
12
|
+
c1.1,1.1,1.7,2.7,1.6,4.3c0,1-0.2,2-0.6,2.8c-0.4,0.8-1.1,1.4-1.9,1.9c0.7,0.1,1.5,0.4,2.1,0.7c0.6,0.3,1,0.7,1.4,1.2
|
|
13
|
+
c0.4,0.5,0.6,1,0.8,1.6c0.2,0.6,0.2,1.3,0.2,1.9c0,1-0.2,1.9-0.6,2.8c-0.4,0.8-0.9,1.5-1.6,2.1c-0.7,0.6-1.5,1-2.4,1.2
|
|
14
|
+
c-1.1,0.3-2.1,0.4-3.2,0.4H51L50.9,52.2z M56.8,61.1h1.7c1.8,0,2.8-0.7,2.8-2.2s-0.9-2.2-2.8-2.2h-1.7V61.1z M56.8,70.2h1.9
|
|
15
|
+
c1.1,0.1,2.2-0.1,3.2-0.6c1-0.7,1.3-2.1,0.5-3.1c-0.1-0.2-0.3-0.4-0.5-0.5c-1-0.5-2.1-0.6-3.2-0.6h-1.9V70.2z M93,57.2h-9.9V61
|
|
16
|
+
h9.6v5h-9.6v3.9H93v5H77.2V52.2H93V57.2z M108.2,65.7l-8.2-13.5h7l4.2,7.3l4.2-7.3h7L114,65.7v9h-5.8V65.7z M126,63.5
|
|
17
|
+
c0-1.6,0.3-3.2,0.9-4.7c1.2-2.9,3.6-5.2,6.5-6.3c3.2-1.2,6.8-1.2,10.1,0c1.5,0.6,2.9,1.4,4,2.5c1.1,1.1,2,2.4,2.5,3.8
|
|
18
|
+
c1.2,3,1.2,6.4,0,9.4c-0.6,1.4-1.5,2.7-2.6,3.8c-1.1,1.1-2.5,2-4,2.5c-3.2,1.2-6.8,1.2-10.1,0c-1.5-0.6-2.8-1.4-3.9-2.5
|
|
19
|
+
c-1.1-1.1-2-2.4-2.6-3.8C126.3,66.7,126,65.1,126,63.5z M132.1,63.5c0,0.9,0.2,1.7,0.5,2.5c0.6,1.5,1.9,2.7,3.4,3.3
|
|
20
|
+
c2.4,1,5.1,0.4,6.9-1.3c0.6-0.6,1.1-1.2,1.4-2c0.7-1.6,0.7-3.4,0-5c-0.3-0.8-0.8-1.4-1.4-2c-1.9-1.7-4.5-2.2-6.9-1.3
|
|
21
|
+
c-1.5,0.6-2.7,1.8-3.4,3.4C132.3,61.8,132.1,62.6,132.1,63.5L132.1,63.5z M158.6,74.8V52.2h5.9L175.3,66V52.2h5.8v22.5h-5.8
|
|
22
|
+
L164.5,61v13.8H158.6z M196.7,61.5l7.1-9.3h7.2l-8.9,10.7l9.8,11.9h-7.6l-7.6-9.8v9.8h-5.9V52.2h5.9V61.5z"/>
|
|
23
|
+
</g>
|
|
24
|
+
</g>
|
|
25
|
+
</svg>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="col-lg-8 col-md-7 col-xs-12">
|
|
29
|
+
<div class="slogan">
|
|
30
|
+
Svelte MapBox Developer Documentation
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="col-lg-2 col-md-3 col-xs-12 right">
|
|
34
|
+
<a class="btn" href="http://www.github.com/beyonk-adventures/svelte-mapbox">Github</a>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
</header>
|
|
39
|
+
<section class="content">
|
|
40
|
+
<div class="container">
|
|
41
|
+
<div class="content-wrap">
|
|
42
|
+
<div class="row">
|
|
43
|
+
<aside>
|
|
44
|
+
<div class="menu-box">
|
|
45
|
+
<h4>Navigation</h4>
|
|
46
|
+
<nav>
|
|
47
|
+
<ul>
|
|
48
|
+
<li><a href="#geocoder" on:click={() => { navigate('geocoder') } } class:current={page === 'geocoder'}>Geocoder</a></li>
|
|
49
|
+
<li><a href="#map" on:click={() => { navigate('map') }} class:current={page === 'map'}>Map</a></li>
|
|
50
|
+
</ul>
|
|
51
|
+
</nav>
|
|
52
|
+
</div>
|
|
53
|
+
</aside>
|
|
54
|
+
<div class="content-info">
|
|
55
|
+
<div class="action-buttons">
|
|
56
|
+
<button id="fly-to" on:click={flyToRandomPlace}
|
|
57
|
+
>Fly to random location</button
|
|
58
|
+
>
|
|
59
|
+
|
|
60
|
+
<button
|
|
61
|
+
id="change-zoom"
|
|
62
|
+
on:click={() => (zoom = Math.floor(Math.random() * 10))}
|
|
63
|
+
>Change Zoom Level</button
|
|
64
|
+
>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<div class="section-txt" id="geocoder">
|
|
68
|
+
<form>
|
|
69
|
+
<Geocoder value="(Near London)" accessToken={PUBLIC_MAPBOX_TOKEN} on:result={placeChanged} on:clear={() => mapComponent.setCenter({ lng: 0, lat: 0 })} />
|
|
70
|
+
{#if place}
|
|
71
|
+
<dl>
|
|
72
|
+
<dt>Name:</dt>
|
|
73
|
+
<dd>{place.label}</dd>
|
|
74
|
+
<dt>Geolocation:</dt>
|
|
75
|
+
<dd>lat: {place.geometry.lat}, lng: {place.geometry.lng}</dd>
|
|
76
|
+
</dl>
|
|
77
|
+
{/if}
|
|
78
|
+
</form>
|
|
79
|
+
</div>
|
|
80
|
+
<div class="section-txt" id="map">
|
|
81
|
+
<div class="map-wrap">
|
|
82
|
+
<Map
|
|
83
|
+
bind:this={mapComponent}
|
|
84
|
+
accessToken={PUBLIC_MAPBOX_TOKEN}
|
|
85
|
+
on:recentre={recentre}
|
|
86
|
+
on:drag={drag}
|
|
87
|
+
{center}
|
|
88
|
+
bind:zoom
|
|
89
|
+
>
|
|
90
|
+
<Earthquakes />
|
|
91
|
+
<NavigationControl />
|
|
92
|
+
<GeolocateControl on:geolocate={e => console.log('geolocated', e.detail)} />
|
|
93
|
+
<Marker lat={marker.lat} lng={marker.lng} />
|
|
94
|
+
</Map>
|
|
95
|
+
</div>
|
|
96
|
+
{#if center}
|
|
97
|
+
<dt>Geolocation:</dt>
|
|
98
|
+
<dd>lat: {center.lat}, lng: {center.lng}</dd>
|
|
99
|
+
<dd>zoom: {zoom}</dd>
|
|
100
|
+
{/if}
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</section>
|
|
107
|
+
<div class="footer-area">
|
|
108
|
+
<div class="container">
|
|
109
|
+
<div class="row">
|
|
110
|
+
<div class="col-lg-12 center">
|
|
111
|
+
Powered by Beyonk Open Source
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
<footer>
|
|
117
|
+
<div class="container">
|
|
118
|
+
<div class="row">
|
|
119
|
+
<div class="col-lg-12 center">
|
|
120
|
+
© 2019 Beyonk. All rights reserved.
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
</footer>
|
|
125
|
+
|
|
126
|
+
<style>
|
|
127
|
+
:global(#logo svg) {
|
|
128
|
+
fill: white;
|
|
129
|
+
height: 60px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.slogan {
|
|
133
|
+
margin-top: 14px;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.map-wrap {
|
|
137
|
+
width: 100%;
|
|
138
|
+
height: 300px;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.action-buttons {
|
|
142
|
+
display: flex;
|
|
143
|
+
justify-content: space-between;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
#fly-to,
|
|
147
|
+
#change-zoom {
|
|
148
|
+
display: block;
|
|
149
|
+
position: relative;
|
|
150
|
+
margin: 0px auto;
|
|
151
|
+
height: 40px;
|
|
152
|
+
padding: 10px;
|
|
153
|
+
border: none;
|
|
154
|
+
border-radius: 3px;
|
|
155
|
+
font-size: 12px;
|
|
156
|
+
text-align: center;
|
|
157
|
+
color: #fff;
|
|
158
|
+
background: #ee8a65;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
</style>
|
|
162
|
+
|
|
163
|
+
<script>
|
|
164
|
+
import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public'
|
|
165
|
+
import { Map, Geocoder, Marker, controls } from '$lib/components.js'
|
|
166
|
+
import Earthquakes from './_Earthquakes.svelte'
|
|
167
|
+
|
|
168
|
+
const { GeolocateControl, NavigationControl } = controls
|
|
169
|
+
const place = null
|
|
170
|
+
|
|
171
|
+
let page = 'about'
|
|
172
|
+
let center = { lat: 53.3358627, lng: -2.8572362 }
|
|
173
|
+
let marker = center
|
|
174
|
+
let zoom = 11.15
|
|
175
|
+
let mapComponent
|
|
176
|
+
|
|
177
|
+
function navigate (next) {
|
|
178
|
+
page = next
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
function placeChanged (e) {
|
|
182
|
+
const { result } = e.detail
|
|
183
|
+
mapComponent.setCenter(result.center, 14)
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
function randomLng () {
|
|
187
|
+
return 77 + (Math.random() - 0.5) * 30
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
function randomLat () {
|
|
191
|
+
return 13 + (Math.random() - 0.5) * 30
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
function flyToRandomPlace () {
|
|
195
|
+
mapComponent.flyTo({
|
|
196
|
+
center: [
|
|
197
|
+
randomLng(),
|
|
198
|
+
randomLat()
|
|
199
|
+
],
|
|
200
|
+
essential: true
|
|
201
|
+
})
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
function recentre ({ detail }) {
|
|
205
|
+
center = detail.center
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
function drag ({ detail }) {
|
|
209
|
+
marker = detail.center
|
|
210
|
+
}
|
|
211
|
+
</script>
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { getContext, mount } from 'svelte'
|
|
3
|
+
import { contextKey } from '$lib/components.js'
|
|
4
|
+
import MiniScroller from './_MiniScroller.svelte'
|
|
5
|
+
|
|
6
|
+
const { getMap, getMapbox } = getContext(contextKey)
|
|
7
|
+
const map = getMap()
|
|
8
|
+
const mapbox = getMapbox()
|
|
9
|
+
|
|
10
|
+
// Add a new source from our GeoJSON data and set the
|
|
11
|
+
// 'cluster' option to true. GL-JS will add the point_count property to your source data.
|
|
12
|
+
map.addSource('earthquakes', {
|
|
13
|
+
type: 'geojson',
|
|
14
|
+
// Point to GeoJSON data. This example visualizes all M1.0+ earthquakes
|
|
15
|
+
// from 12/22/15 to 1/21/16 as logged by USGS' Earthquake hazards program.
|
|
16
|
+
data: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
|
|
17
|
+
cluster: true,
|
|
18
|
+
clusterMaxZoom: 14, // Max zoom to cluster points on
|
|
19
|
+
clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
|
|
20
|
+
})
|
|
21
|
+
|
|
22
|
+
map.addLayer({
|
|
23
|
+
id: 'clusters',
|
|
24
|
+
type: 'circle',
|
|
25
|
+
source: 'earthquakes',
|
|
26
|
+
filter: [ 'has', 'point_count' ],
|
|
27
|
+
paint: {
|
|
28
|
+
// Use step expressions (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step)
|
|
29
|
+
// with three steps to implement three types of circles:
|
|
30
|
+
// * Blue, 20px circles when point count is less than 100
|
|
31
|
+
// * Yellow, 30px circles when point count is between 100 and 750
|
|
32
|
+
// * Pink, 40px circles when point count is greater than or equal to 750
|
|
33
|
+
'circle-color': [
|
|
34
|
+
'step',
|
|
35
|
+
[ 'get', 'point_count' ],
|
|
36
|
+
'#51bbd6',
|
|
37
|
+
100,
|
|
38
|
+
'#f1f075',
|
|
39
|
+
750,
|
|
40
|
+
'#f28cb1'
|
|
41
|
+
],
|
|
42
|
+
'circle-radius': [
|
|
43
|
+
'step',
|
|
44
|
+
[ 'get', 'point_count' ],
|
|
45
|
+
20,
|
|
46
|
+
100,
|
|
47
|
+
30,
|
|
48
|
+
750,
|
|
49
|
+
40
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
})
|
|
53
|
+
|
|
54
|
+
map.addLayer({
|
|
55
|
+
id: 'cluster-count',
|
|
56
|
+
type: 'symbol',
|
|
57
|
+
source: 'earthquakes',
|
|
58
|
+
filter: [ 'has', 'point_count' ],
|
|
59
|
+
layout: {
|
|
60
|
+
'text-field': '{point_count_abbreviated}',
|
|
61
|
+
'text-font': [ 'DIN Offc Pro Medium', 'Arial Unicode MS Bold' ],
|
|
62
|
+
'text-size': 12
|
|
63
|
+
}
|
|
64
|
+
})
|
|
65
|
+
|
|
66
|
+
map.addLayer({
|
|
67
|
+
id: 'unclustered-point',
|
|
68
|
+
type: 'circle',
|
|
69
|
+
source: 'earthquakes',
|
|
70
|
+
filter: [ '!', [ 'has', 'point_count' ] ],
|
|
71
|
+
paint: {
|
|
72
|
+
'circle-color': '#11b4da',
|
|
73
|
+
'circle-radius': 4,
|
|
74
|
+
'circle-stroke-width': 1,
|
|
75
|
+
'circle-stroke-color': '#fff'
|
|
76
|
+
}
|
|
77
|
+
})
|
|
78
|
+
|
|
79
|
+
map.on('click', 'clusters', function (e) {
|
|
80
|
+
const features = map.queryRenderedFeatures(e.point, {
|
|
81
|
+
layers: [ 'clusters' ]
|
|
82
|
+
})
|
|
83
|
+
const clusterId = features[0].properties.cluster_id
|
|
84
|
+
map.getSource('earthquakes').getClusterExpansionZoom(clusterId, function (err, zoom) {
|
|
85
|
+
if (err) { return }
|
|
86
|
+
|
|
87
|
+
map.easeTo({
|
|
88
|
+
center: features[0].geometry.coordinates,
|
|
89
|
+
zoom: zoom
|
|
90
|
+
})
|
|
91
|
+
})
|
|
92
|
+
})
|
|
93
|
+
|
|
94
|
+
map.on('mouseenter', 'clusters', function () {
|
|
95
|
+
map.getCanvas().style.cursor = 'pointer'
|
|
96
|
+
})
|
|
97
|
+
map.on('mouseleave', 'clusters', function () {
|
|
98
|
+
map.getCanvas().style.cursor = ''
|
|
99
|
+
})
|
|
100
|
+
|
|
101
|
+
map.on('click', 'unclustered-point', function (e) {
|
|
102
|
+
const coordinates = e.features[0].geometry.coordinates.slice()
|
|
103
|
+
|
|
104
|
+
// Ensure that if the map is zoomed out such that multiple
|
|
105
|
+
// copies of the feature are visible, the popup appears
|
|
106
|
+
// over the copy being pointed to.
|
|
107
|
+
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
|
|
108
|
+
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
map.setCenter(coordinates)
|
|
112
|
+
|
|
113
|
+
new mapbox.Popup({})
|
|
114
|
+
.setLngLat(coordinates)
|
|
115
|
+
.setHTML('<div id="mini-scroller"></div>')
|
|
116
|
+
.addTo(map)
|
|
117
|
+
|
|
118
|
+
mount(MiniScroller, {
|
|
119
|
+
target: document.getElementById('mini-scroller'),
|
|
120
|
+
props: {}
|
|
121
|
+
})
|
|
122
|
+
})
|
|
123
|
+
|
|
124
|
+
map.on('mouseenter', 'unclustered-point', function () {
|
|
125
|
+
map.getCanvas().style.cursor = 'pointer'
|
|
126
|
+
})
|
|
127
|
+
|
|
128
|
+
map.on('mouseleave', 'unclustered-point', function () {
|
|
129
|
+
map.getCanvas().style.cursor = ''
|
|
130
|
+
})
|
|
131
|
+
</script>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<h2>hello</h2>
|
|
Binary file
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
|
|
2
|
+
body{margin:0;}
|
|
3
|
+
article,
|
|
4
|
+
aside,
|
|
5
|
+
details,
|
|
6
|
+
figcaption,
|
|
7
|
+
figure,
|
|
8
|
+
footer,
|
|
9
|
+
header,
|
|
10
|
+
hgroup,
|
|
11
|
+
main,
|
|
12
|
+
menu,
|
|
13
|
+
nav,
|
|
14
|
+
section,
|
|
15
|
+
summary{display:block;}
|
|
16
|
+
audio,
|
|
17
|
+
canvas,
|
|
18
|
+
progress,
|
|
19
|
+
video{display:inline-block;vertical-align:baseline;}
|
|
20
|
+
audio:not([controls]){display:none;height:0;}
|
|
21
|
+
[hidden],
|
|
22
|
+
template{display:none;}
|
|
23
|
+
a{background-color:transparent;}
|
|
24
|
+
a:active,
|
|
25
|
+
a:hover{outline:0;}
|
|
26
|
+
abbr[title]{border-bottom:1px dotted;}
|
|
27
|
+
b,
|
|
28
|
+
strong{font-weight:bold;}
|
|
29
|
+
dfn{font-style:italic;}
|
|
30
|
+
h1{font-size:2em;margin:0.67em 0;}
|
|
31
|
+
mark{background:#ff0;color:#000;}
|
|
32
|
+
small{font-size:80%;}
|
|
33
|
+
sub,
|
|
34
|
+
sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
|
|
35
|
+
sup{top:-0.5em;}
|
|
36
|
+
sub{bottom:-0.25em;}
|
|
37
|
+
img{border:0;}
|
|
38
|
+
svg:not(:root){overflow:hidden;}
|
|
39
|
+
figure{margin:1em 40px;}
|
|
40
|
+
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
|
|
41
|
+
pre{overflow:auto;}
|
|
42
|
+
code,
|
|
43
|
+
kbd,
|
|
44
|
+
pre,
|
|
45
|
+
samp{font-family:monospace, monospace;font-size:1em;}
|
|
46
|
+
button,
|
|
47
|
+
input,
|
|
48
|
+
optgroup,
|
|
49
|
+
select,
|
|
50
|
+
textarea{color:inherit;font:inherit;margin:0;}
|
|
51
|
+
button{overflow:visible;}
|
|
52
|
+
button,
|
|
53
|
+
select{text-transform:none;}
|
|
54
|
+
button,
|
|
55
|
+
html input[type="button"],
|
|
56
|
+
input[type="reset"],
|
|
57
|
+
input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
|
|
58
|
+
button[disabled],
|
|
59
|
+
html input[disabled]{cursor:default;}
|
|
60
|
+
button::-moz-focus-inner,
|
|
61
|
+
input::-moz-focus-inner{border:0;padding:0;}
|
|
62
|
+
input{line-height:normal;}
|
|
63
|
+
input[type="checkbox"],
|
|
64
|
+
input[type="radio"]{box-sizing:border-box;padding:0;}
|
|
65
|
+
input[type="number"]::-webkit-inner-spin-button,
|
|
66
|
+
input[type="number"]::-webkit-outer-spin-button{height:auto;}
|
|
67
|
+
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
|
|
68
|
+
input[type="search"]::-webkit-search-cancel-button,
|
|
69
|
+
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
|
|
70
|
+
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
|
|
71
|
+
legend{border:0;padding:0;}
|
|
72
|
+
textarea{overflow:auto;}
|
|
73
|
+
optgroup{font-weight:bold;}
|
|
74
|
+
table{border-collapse:collapse;border-spacing:0;}
|
|
75
|
+
td,
|
|
76
|
+
th{padding:0;}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
* Copyright (C) 2015 Google Inc.
|
|
4
|
+
*
|
|
5
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
6
|
+
* you may not use this file except in compliance with the License.
|
|
7
|
+
* You may obtain a copy of the License at
|
|
8
|
+
*
|
|
9
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
+
*
|
|
11
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
12
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
13
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
14
|
+
* See the License for the specific language governing permissions and
|
|
15
|
+
* limitations under the License.
|
|
16
|
+
*/
|
|
17
|
+
|
|
18
|
+
/* Pretty printing styles. Used with prettify.js. */
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
/* SPAN elements with the classes below are added by prettyprint. */
|
|
22
|
+
.pln { color: #000 } /* plain text */
|
|
23
|
+
|
|
24
|
+
@media screen {
|
|
25
|
+
.str { color: #080 } /* string content */
|
|
26
|
+
.kwd { color: #008 } /* a keyword */
|
|
27
|
+
.com { color: #800 } /* a comment */
|
|
28
|
+
.typ { color: #606 } /* a type name */
|
|
29
|
+
.lit { color: #066 } /* a literal value */
|
|
30
|
+
/* punctuation, lisp open bracket, lisp close bracket */
|
|
31
|
+
.pun, .opn, .clo { color: #660 }
|
|
32
|
+
.tag { color: #008 } /* a markup tag name */
|
|
33
|
+
.atn { color: #606 } /* a markup attribute name */
|
|
34
|
+
.atv { color: #080 } /* a markup attribute value */
|
|
35
|
+
.dec, .var { color: #606 } /* a declaration; a variable name */
|
|
36
|
+
.fun { color: red } /* a function name */
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Use higher contrast and text-weight for printable form. */
|
|
40
|
+
@media print, projection {
|
|
41
|
+
.str { color: #060 }
|
|
42
|
+
.kwd { color: #006; font-weight: bold }
|
|
43
|
+
.com { color: #600; font-style: italic }
|
|
44
|
+
.typ { color: #404; font-weight: bold }
|
|
45
|
+
.lit { color: #044 }
|
|
46
|
+
.pun, .opn, .clo { color: #440 }
|
|
47
|
+
.tag { color: #006; font-weight: bold }
|
|
48
|
+
.atn { color: #404 }
|
|
49
|
+
.atv { color: #060 }
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Put a border around prettyprinted code snippets. */
|
|
53
|
+
pre.prettyprint { padding: 20px; border: 0!important; background: #f5f5f5!important;margin-bottom:14px; }
|
|
54
|
+
|
|
55
|
+
/* Specify class=linenums on a pre to get line numbering */
|
|
56
|
+
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
|
|
57
|
+
li.L0,
|
|
58
|
+
li.L1,
|
|
59
|
+
li.L2,
|
|
60
|
+
li.L3,
|
|
61
|
+
li.L5,
|
|
62
|
+
li.L6,
|
|
63
|
+
li.L7,
|
|
64
|
+
li.L8 { list-style-type: decimal !important }
|
|
65
|
+
/* Alternate shading for lines */
|
|
66
|
+
li.L1,
|
|
67
|
+
li.L3,
|
|
68
|
+
li.L5,
|
|
69
|
+
li.L7,
|
|
70
|
+
li.L9 { background: #f5f5f5!important }
|