Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gavinr/esri-svelte-example

An example web application that shows how to use the ArcGIS API for JavaScript with Svelte
https://github.com/gavinr/esri-svelte-example

arcgis arcgis-api arcgis-js-api esri-svelte javascript svelte sveltejs vite vitejs

Last synced: 3 months ago
JSON representation

An example web application that shows how to use the ArcGIS API for JavaScript with Svelte

Host: GitHub
URL: https://github.com/gavinr/esri-svelte-example
Owner: gavinr-maps
License: apache-2.0
Created: 2019-10-16T21:38:34.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2024-03-01T22:14:49.000Z (10 months ago)
Last Synced: 2024-09-27T20:15:42.654Z (3 months ago)
Topics: arcgis, arcgis-api, arcgis-js-api, esri-svelte, javascript, svelte, sveltejs, vite, vitejs
Language: Svelte
Homepage: https://esri-svelte-example.gavinr.com
Size: 23.2 MB
Stars: 15
Watchers: 2
Forks: 5
Open Issues: 7
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Esri Svelte Example

![GitHub package.json dependency version (dev dep on branch)](https://img.shields.io/github/package-json/dependency-version/gavinr/esri-svelte-example/dev/@arcgis/core)

An example [Svelte](https://svelte.dev/) application that shows how use the [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/) to load a map.

[View the live app here](https://esri-svelte-example.gavinr.com/).

## Get Started

To get started, follow these instructions.

1. Run the [Vite init workflow](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) choosing the Svelte (or Svelte TypeScript) template:

   ```bash

   npm init vite@latest

   ```

2. Then install the dependencies and run:

   ```bash

   cd esri-svelte-project

   npm install

   npm install @arcgis/core --save-dev

   npm run dev

   ```

3. Copy contents of [`App.svelte` in this repository](https://github.com/gavinr/esri-svelte-example/blob/master/src/App.svelte) into your `App.svelte`.

   1. _Note: This `App.svelte` is not using TypeScript, so you must add back the `lang="ts"` line to the `` tag if you're using the TypeScript template._

## Links

- [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/)

- [Svelte with the ArcGIS API for JavaScript](https://odoe.net/blog/svelte-with-the-arcgis-api-for-javascript/)

- [Esri Svelte Basemaps Example](https://github.com/jwasilgeo/esri-svelte-basemaps-example)

## Need Calcite or a url router?

A more advanced list of steps is listed [in the wiki](https://github.com/gavinr/esri-svelte-example/wiki/Advanced-Setup:-Svelte-with-ArcGIS-API-for-JavaScript,-Calcite-Components,-and-Svelte-Router).