Nikolas is a web developer, artist, and front-end system architect in Portland, Oregon.
nikolaswise / lower-albina Goto Github PK
View Code? Open in Web Editor NEWAn exploratory web mapping project.
Home Page: http://lower-albina.nikolas.ws/
An exploratory web mapping project.
Home Page: http://lower-albina.nikolas.ws/
Nikolas is a web developer, artist, and front-end system architect in Portland, Oregon.
Project Plan: Nikolas Wise
From a design perspective, contemporary tools for creating maps on the internet are restrictive. The current approach to cartographic maps more paint-by-numbers than informed by design decisions. Our Esri-style approach to out of the box data rendering over pre-baked basemaps is convenient to data analysts, but more or less fails for purposes that do not align or accept the base assumptions we make. Likewise, the Mapbox approach to 'designing' maps boils down to picking finishes.
We've been developing tools for more intensive cartography for web maps - Esri Leaflet bridges the gap between our powerful data and analytics and open source mapping tools; along with thing like Angular.js structures for smoother mapping work flows. Ideally, we will be able to arrive at an environment that lowers the technological barriers that stand between designers and cartographers and creative applications of web maps.
The Lower Albina project is an attempt to create such an environment - and a resultant map that accomplishes goals that current webmap systems are not.
Esrigoalâ„¢: Create a development environment and set of tools that allow for richer design process that currently available for web cartography.
NKgoalâ„¢: Create a compelling design object exploring the cultural sense of place within the Lower Albina commercial district.
To be determined.
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.
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.
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.
Upload your GeoJSON to a free CartoDB account.
Add your data to a new map. Pick your data carefully though - CartoDB only allows 4 datasets per map at the free level. So that's cool!
Now you can write CartoCSS in your CartoDB map 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. CartoDB 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.
To get rid of the basemap, upload a blank, transparent .png and set THAT as the basemap.
CartoDB exposes the json for your map through the 'Share' modal. Grab the endpoint un the cartodb.js option, and use cartodb to add your map to your leaflet project.
Turn leaflet off and add CartoDB.js instead
<!-- Load Leaflet from CDN-->
<!-- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> -->
<!-- <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> -->
<!-- CartoDB -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.13/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.13/cartodb.js"></script>
In your main js file, add your layer to your map.
cartodb.createLayer(map, url)
.addTo(map)
.on('done', function(layer) {
//do stuff
})
.on('error', function(err) {
alert("some error occurred: " + err);
});
If cartodb added your map as a layer in your leaflet app, we're on the right track. Open your network request panel, and find a tile from your map. Copy the URL. Mine looks like this:
http://2.ashbu.cartocdn.com/nikolaswise/api/v1/map/e84ce689c5a9a5090b90c0cb4dba4c9f:1429741486907.6099/16/10435/23435.png
To consume these tiles in Regular Leaflet without CartoDB.js, you need to variablize this URL. That means adding {s}, {x}, {y}, and {z} variables. My endpoint ends up looking like this:
http://{s}.ashbu.cartocdn.com/nikolaswise/api/v1/map/e84ce689c5a9a5090b90c0cb4dba4c9f:1429741486907.6099/{z}/{x}/{y}.png
Turn off CartoDB.js and turn Leaflet back on.
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!-- CartoDB -->
<!-- <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.13/themes/css/cartodb.css" /> -->
<!-- <script src="http://libs.cartocdn.com/cartodb.js/v3/3.13/cartodb.js"></script> -->
Use Leaflet to add a new Tile Layer with your tile endpoint url.
var referenceLayer = L.tileLayer('http://{s}.ashbu.cartocdn.com/nikolaswise/api/v1/map/e84ce689c5a9a5090b90c0cb4dba4c9f:1429741486907.6099/{z}/{x}/{y}.png')
referenceLayer.addTo(map);
Delete all that cartodb.createLayer()
junk. If your tile layer belongs on the bottom like a regular tile layer your done! If your crazy that me and want a tile layer to sit OVER the rest of the map, you have one more step.
Build a brand new pane for leaflet, bring it to the top of the pane stack, and move your tile layer's container element to it.
var referencePane = map._createPane('leaflet-reference-pane', map.getPanes().mapPane);
referencePane.appendChild(referenceLayer.getContainer());
referenceLayer.setZIndex(9);
And you have a tile layer sitting on top of your map!
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:
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:
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
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.
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.
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);
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.