A project to showcase how I love ESRI products by utilising their JavaScript SDK APIs. It is hosting on loveesri.netlify.app/ as a single tier app.
Tech stacks:
The ArcGIS JavaScript SDK (Software Development Kit) is a comprehensive library provided by Esri for building web applications that use geographic information system (GIS) technology. Below are the features introduced in this project.
Map Tab
:
- Switching between 3D scene and 2D map views
- Layer controls such as 3D buildings and 2D wind flow layer
- Satellite visualisation
- Geocoding for address searching tool
- Routing between multiple destinations
Playground Tab
which is more user controllable environment:
- Adding points on map for user preferences and fun
- Visualising time series MEO satellite positions and its orbit pattern from RINEX navigation file. (Although I am using mocked data here)
Only free tier location services are available at the moment and their usage are limited. You are encouraged to login using your own account, the default user is only to ease demostration purpose and it can be remove anytime soon.
In the project directory, you can either prepare below for local developments:
- Node.js
- Docker Desktop + wsl2 (Ubuntu recommended)
Runs the app in the development mode. Open http://localhost:3001/ to view it in the browser.
npm install
npm run dev
OR
docker-compose up --build
The page will reload if you make edits. You will also see any lint errors in the console.
The Vite Checker
is constantly checking if any typing issues exist in
our TypeScript codes by prompting messages in runtime.
To fix all formatting and linting using prettier
:
npm run style-check
npm run style-format
docker exec -it love-esri-love-esri-1 npm run style-format
To see if any errors prevent production build compilation:
npm run build
VITE_CLIENT_ID
: The OAuth application client ID
VITE_ESRI_API
: The normal api key provided when you register ArcGIS Developer
Your WebGL implementation doesn't seem to support hardware accelerated rendering. Check your browser settings or if your GPU is in a blocklist.
For Chrome:
- Go to chrome://flags/.
- Search for "WebGL".
- Enable WebGL-related flags if they are disabled.
This project is licensed under the MIT License - see the LICENSE file for details.