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 app's style contains a few ideosyncracies that should be noted.
The main data-fetching explanation, mostly done in router/index.js, of atlas.phila.gov
All of the data that atlas shows is official City of Philadelphia data, maintained in the CityGeo database Databridge.
While Databridge is the central source of truth, these datasets are daily pushed to Carto or ArcGIS Online, where they can be accessed through APIs. The APIs for those 2 services are different. A description of the Carto API is here. A description of the ArcGIS Online API is here.
A quick explanation of how slippy maps work.
The map is created using Maplibre, specifically the Maplibre GL JS API. A short description of how it works is here.
A quick explanation of how map tiles work.
A quick explanation of how Maplibre styles work, using the styling rules documented in the Maplibre GL JS Style Specification.
You can use Turf.js or an ArcGIS Online GeometryServer for basic geometry functions. You can use the npm package proj4 to transform point coordinates from one coordinate system to another.
A simple way to do some kind of geometry calculation in your js is to use Turf.js. A quick explanation of how we use Turf.js.
A simple explanation of how we use proj4.
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 containing the map styling described above.
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.
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.
Automated tests run when a PR is merged into the main branch
The app deploys to both atlas.phila.gov and cityatlas.phila.gov.
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).