Lower Albina looks at using classical analog-era metaphors to address web cartography and creating of the 'map'. At it's root, this conceptual model requires 3 layers:
- Base Layer
- Study Layer
- Reference Layer
This is similar to the ideas behind basemap/layers/labels, but simplified. Each layer has it's own, very narrow, scope.
The base layer and the reference layer can both exist as single objects or tile layers in the web map to avoid issues of overwhelming the map with data, and simplify the amount of control needed over layering. One tile layer for the base, one tile layer for the Reference.
The base layer will underlay the rest of the map. It is related to the basemap, but has much less going on. The base layer only holds as much information as needed to ground the study layer (or each individual study layer) with the geography. For Lower Albina, the Base Layer only has two data sets:
- 5 Foot Contours, classified by elevation.
- County Taxlots
The Reference Layer contains data that sits over the study layer. This layer provides precise context about geography that is further up the conceptual hierarchy than the data in the study layer. The reference layer for Lower Albina includes
- Bridges
- Light and Heavy Rail lines
- Roads
- Neighborhood information
- Water Bodies
This is complicated. There are a lot of good stuff out there. To get at them all though, one has to do a lot of meandering to get around plenty of probs.
- Easy Reprojection of data
- High quality demographic data available.
- High Quality cartographic data rendering tools
- Layer Compositing and Tile Generation
- City of Portland data sets are huge, bigger than our study area.
- Proprietary data formats from local government GIS departments.
- ArcGIS Online has no support tile layers that contain multiple layers.
- MapBox Studio has no tools for examining, classifying, and styling data across ramps.
- AGO exports GeoJSON with x,y as meters from Null Island in WGS84 .
- MBS can't handle WGS:84 as meters from Null Islands. Needs to be reprojected as lat/long in decimal degrees.
- Neither AGO or MBS provide reprojection tools.
- AGO doesn't support sub-pixel rendering
- AGO raster tiles look a little rough.
- MBS wont let go of tiles, either in vector or raster.
I dealt with the trubs so you don't have to. Looking at one layer of data, here's how we make high quality (raster for now) tiles and consume them in our Leaflet app. Repeat data layer steps as needed until your base or reference layer is done.
This is important. Lower Albina uses the Portland Streets Centerlines data to create a layer that sits on reference layer. Download your data.
This is gives us access to the ArcGIS's pretty excellent data manipulation tools and cartographic abilities. If you have an ArcGIS org running, and an account with your org, you can just use that. If you don't, this step has it's own gotchas, so we'll go through that step by step really quick.
a. Get free developer account at Arcgis for Developers This will give you access to AGO, along with some free credits every month you can use to run analysis tools and hit service endpoints in your app later on. Don't sign up for a Public Account with AGO - these things are useless and don't let you create or store any content, or provide any credits to use the tools, or any way to acquire credits.
b.* Once you get confirmation of your new developer account, Sign in to ArcGIS Online. This is weird. Don't ask.
c. Navigate to 'My Content', and 'Create' a new item 'From my Computer' Grab your data set - this means the entire .zip file in the case of shapefiles
d. Done! AGO will create a Feature Layer of your data!
We don't need ALL the streets in Portland for our Reference Layer in Lower Albina. We need to crop down the data so we only need to deal with the bits that we're concerned this. This is a little complicated also.
a. Open > Add layer to new map to get the feature layer on the Map Viewer, where we can start working with it. If your data set is large, it won't draw completely. A modal might pop up telling you this - this is okay! Your data is in there, but AGO is just drawing the first 1000 features to try and avoid destroying your browser. Thanks AGO.
b. Add > Add Map notes Layer to draw out your area of study.
c. Pop back to the details tab, and find the Secret Dropdown Menu of Ultimate Power on your data layer.
d. Select Perform Analysis.
e. To crop the data to just our study area, we need to 'Find Locations' > 'Find Existing Locations'. Add an expression that has a geographic query with your map notes layer.
f. Run the analysis with the current extent. This will keep your cost down. You can see how many credits this will burn with the 'show credits button.' My analysis is going to cost 4.643 out of my free 50 credits a month. This is about 46 cents in USD. Analysis will probably take a while.
Turn off your source and map notes layer, and use the Secret Dropdown Menu of Ultimate Power on the basemap layer to turn the transparency all the way up. Now we have our layer, and can do some good stuff to it.
Use the Secret Dropdown Menu of Ultimate Power to 'Change Style' on your layer, and go nuts in there.
For these streets, I wont be pushing the limits of AGO's rendering tools. But I want to see what structure types there are, and set different widths of my lines. This shows each structure type as it's own color. Im going to set all my colors to white, and just change the widths. I'll do this in the next step, since AGO doesn't support sub-pixel rendering of line widths, which I will want to do. For now, Im going to pretend I want these colors so we can move on.
This is the end of the line for our use of AGO to work with the data. From this point on, we're just focusing on getting the stuff we want OUT of the ArcGIS system. We'll use the hard work that AGO did to examine, classify, create ramps for, and otherwise be really smart about our data set to re-create the renderer by hand in CartoCSS. We'll use this screenshot to get the field names, values, colors, and other good stuff we need to make this happen.
A better example of the power that AGO's renderers give us is with the Contour data Lower ALbina uses in it's base layer. AGO gives us a histogram of the distribution of elevations in our study area, creates a classification of 10 natural breaks in the data, and assigned each class a step from our defined color ramp. In this step, we could use any of the (very good) default color ramps, and each class in the data would automatically get the correct color value.
Using the Secret Dropdown Menu of Ultimate Power, view your layers item details page. Here we can convert our data to GeoJSON and download it.
a. 'Export' > Export File as GeoJSON. This will create a new item in our 'My Content' zone that's a GeoJSON file rather than a Feature Layer. This might take a while. AGO will forward you to this items details page.
b. 'Open' > 'Download'. This will download your Geojson. Dont ask.
We're gonna use (Ogr2Ogr CLI)[http://www.gdal.org/ogr2ogr.html] for this.
$ogr2ogr streetsLatLong.geojson -t_srs 'WGS84' -f 'GeoJSON' Streets-Lower-Albina.geojson;
Sign up for a Free Account with Mapbox. Get your hands on MapBox Studio and start a new Source Project from Custom Vector Tiles.
Add a new layer, and select the GeoJSON that Ogr2Ogr gave us. Save that, and upload it to MapBox.
Once the data uploads, go find it in MapBox. Copy the source ID, and head back to mapbox studio.
Create a new Style Project in MapBox Studio. As your data source, plug your uploaded Source ID into the little input at the bottom and hit 'Create'.
Now you can write CartoCSS in MapBox Studio to style the data. Grab your screenshot of AGO's render rules, and go to town implementing AGO Styles in CartoCSS. For the streets data set, I want to style some features in a way that the underlying data doesn't exactly reflect. MBS lets us go in and inspect feature by feature, and add a CartoCSS rule that addresses consistency at this level, which can't be done in AGO.
Once your style is uploaded, you can head over to MapBox and preview the tile.
Make sure the tile are public in the API, and grab the preview url. For my Base Layer, it looks like this:
https://api.tiles.mapbox.com/v4/nikolaswise.65959181/page.html?access_token=pk.eyJ1Ijoibmlrb2xhc3dpc2UiLCJhIjoieVJJcE1QUSJ9.f8co32wYW_YTeh_KM6PGLA#15/45.5356/-122.6707
Consume your tiles in your Leaflet app, and add em to your map!
L.tileLayer('https://{s}.tiles.mapbox.com/v4/nikolaswise.65959181/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoibmlrb2xhc3dpc2UiLCJhIjoieVJJcE1QUSJ9.f8co32wYW_YTeh_KM6PGLA#15').addTo(map);