Home
This project is a remake of the 2017 atlas.phila.gov using Vue 3. Most of the vue files are written using the Vue3 Composition API.
A demo of the app can be seen at https://d1dycpzd1ntl2z.cloudfront.net/
Click here to see what is needed in env.local
The 2 panels (Topic and Map) of the App Structure are described here
The main data-fetching explanation, mostly done in router/index.js, of atlas.phila.gov
Map.vue - the longest and most complicated file of the app - is described here
There is a config.js file which is imported as $config whenever needed, for json structure that the app's map needs for correct map styling. The styling rules used are documented in the Maplibre GL JS Style Specifications.
Many of the imagery layers added to the Maplibre GL JS map are stored in ArcGIS Online. A description of how we made that work is here.
CityGeo did an experiment with using GeoServer for the Zoning map tiles, and it worked better than using ArcGIS Online, so some of the other tiled layers may be moved to GeoServer. A description of the small code change is here.
Many of the data-sources used for filling out data in Atlas are data stored in Carto. A description of how the City of Philadelphia uses Carto is here
The app's style contains a few ideosyncracies that should be noted.
The app deploys to both atlas.phila.gov and cityatlas.phila.gov
Cyclomedia is the company that provides street view imagery. An explanation of how we use their api is here.
Eagleview is the new name (formerly Pictometry) of the company that provides oblique aerial imagery. An explanation of how we use their api is here.
It uses Vue Router 4. Most of the logic in the app is in "router/index.js." As noted on the Router page, we are attempting to make nearly all actions make changes to the route, and then all changes to the app follow the route change (except for changes such as showing imagery or opening cyclomedia, which are not reflected in the route).