Skip to content

Commit 15757c8

Browse files
AndrewSepicAndrewSepic
committed
Added Svelte Tutorial source code with Readme
1 parent 5ab5c61 commit 15757c8

File tree

15 files changed

+1831
-0
lines changed

15 files changed

+1831
-0
lines changed

‎use-mapbox-gl-js-with-svelte/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎use-mapbox-gl-js-with-svelte/.vscode/extensions.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["svelte.svelte-vscode"]
3+
}

‎use-mapbox-gl-js-with-svelte/README.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# use-mapbox-gl-js-with-svelte
2+
3+
This is supporting code for the Mapbox tutorial [Use Mapbox GL JS in an Svelte app](https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-svelte/).
4+
5+
## Overview
6+
7+
This tutorial walks through how to setup [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/) in an [Svelte](https://svelte.dev) project.
8+
9+
10+
You'll learn how to:
11+
- Setup a Vite JS app to use Svelte
12+
- How to install Mapbox GL JS and its dependencies.
13+
- Use Mapbox GL JS to render a full screen map.
14+
- How to add a toolbar which displays map state like `longitude`, `latitude`, and `zoom` level and is updated as the map is interacted with (showing the map to app data flow).
15+
- How to create a UI button to reset the map to its original view (showing the app to map data flow).
16+
17+
18+
## Prerequisites
19+
20+
- Node v18.20 or higher
21+
- npm
22+
23+
## How to run
24+
25+
- Clone this repository and navigate to this directory
26+
- Install dependencies with `npm install`
27+
- Replace `YOUR_MAPBOX_ACCESS_TOKEN` in `src/lib/App.svelte` with an access token from your [Mapbox account](https://console.mapbox.com/).
28+
- Run the development server with `npm run dev` and open the app in your browser at [http://localhost:5173](http://localhost:5173).

‎use-mapbox-gl-js-with-svelte/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Svelte</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎use-mapbox-gl-js-with-svelte/jsconfig.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"compilerOptions": {
3+
"moduleResolution": "bundler",
4+
"target": "ESNext",
5+
"module": "ESNext",
6+
/**
7+
* svelte-preprocess cannot figure out whether you have
8+
* a value or a type, so tell TypeScript to enforce using
9+
* `import type` instead of `import` for Types.
10+
*/
11+
"verbatimModuleSyntax": true,
12+
"isolatedModules": true,
13+
"resolveJsonModule": true,
14+
/**
15+
* To have warnings / errors of the Svelte compiler at the
16+
* correct position, enable source maps by default.
17+
*/
18+
"sourceMap": true,
19+
"esModuleInterop": true,
20+
"skipLibCheck": true,
21+
/**
22+
* Typecheck JS in `.svelte` and `.js` files by default.
23+
* Disable this if you'd like to use dynamic types.
24+
*/
25+
"checkJs": true
26+
},
27+
/**
28+
* Use global.d.ts instead of compilerOptions.types
29+
* to avoid limiting type declarations.
30+
*/
31+
"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
32+
}

0 commit comments

Comments
 (0)