Skip to content

Instantly share code, notes, and snippets.

@andy-esch
Last active November 18, 2015 21:56
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andy-esch/3de894166a8da45e36c3 to your computer and use it in GitHub Desktop.
Save andy-esch/3de894166a8da45e36c3 to your computer and use it in GitHub Desktop.
Webinar: Celebrating all things GIS -- November 18, 2015

Future of GIS

Andy Eschbacher, Map Scientist, CartoDB

Questions

  1. Tweet any questions to me and I'll do my best to answer them: @MrEPhysics
  2. Leave questions in the webinar chat

Find this doucment at: http://bit.ly/cartodb-future-gis

Introduction to CartoDB

Cartophant to motivate the talk

cartophant

CartoDB is... Maps + Database + A lot of magic glue in the cloud.

One of our favorites: Tweets mentioning sunrise.

Analysis in the Cloud

All the traditional GIS work can easily be done in CartoDB using the PostGIS extension to SQL. Chris Whong walks us through a couple of common GIS functions in this blog post. You can also check out our Map Academy lessons on SQL and PostGIS.

Using CartoDB's APIs, you can build custom applications that leverage the cloud and all of the GIS functionality CartoDB offers.

Want a workflow with R? Kyle Walker at TCU wrote one up. Want to integrate with Python? We have a repo for that. Check out the SQL API documentation for other languages.

Where is the skillset?

Editor

  • visualize data in seconds
  • baked-in visualizations but extensible
  • map recommendation engine
  • much more, and much much more coming soon ;)

Let's make a quick map pulling Twitter activity related to 'GIS'.

APIs

  • Build custom applications
  • SQL for data analysis and processing, PostGIS for spatial functions (buffer, intersection, etc.)
  • Programmatically query the database using SQL API (build charts, interactive maps, and more)
  • JavaScript library that works with Leaflet and Google Maps

Example Map using the APIs

Urban Reviewer is built from our APIs and JavaScript Library, and external ones as well.

Search for "ST_ConvexHull" in the repository to see some of the dynamic SQL that is run to create the borders on groups of parcels. I love this piece of the code because it shows how user interaction triggers dynamic SQL queries that are tied to visualizing the data. CartoDB => Dynamic GIS for the web.

Student Projects

Make a map

We're going to visualize sea surface temperature data as collected by NOAA. Our model is a map made by CartoDB's Senior Cartographer, Mamata Akella:

Sea Surface Temperatures

Two ways to get the data:

  1. If you're already logged into your CartoDB account, visit this page and click the blue button "Create Map". This will pull the data over to your account from mine.
  2. OR, directly import it into your account using the following URL:
https://eschbacher.cartodb.com:443/api/v2/sql?q=select%20*%20from%20eschbacher.sst_io_20151115&format=geojson&filename=sea_surface_temps_nov_15_2015

Rename your data layer to sea_surface_temps_nov_15_2015 if it is not already named that.

Next, let's try to mimic the color scale for the Sea Surface temperature maps:

traditional sea surface temp map

Mamata found a color scale that suits our needs:

color gradient

We can turn this into CartoCSS variables like this:

@1:#8A6FA5;
@2:#488AA8;
@3:#07A5AB;
@4:#83B95D;
@5:#FFCE0F;
@6:#FB933C;
@7:#F75869;

Next, let's overwrite our CartoCSS values by

  1. clicking on the "CSS" tab while in Map view, and
  2. deleting the CartoCSS there, and
  3. replacing it with the following
/** choropleth visualization */

@1:#8A6FA5;
@2:#488AA8;
@3:#07A5AB;
@4:#83B95D;
@5:#FFCE0F;
@6:#FB933C;
@7:#F75869;

#layer{
  polygon-fill: #1a9850;
  polygon-opacity: 1;
  line-color: #FFF;
  line-width: 0;
  line-opacity: 1;
}
#layer [ contour <= 32] {
   polygon-fill: @7;
}
#layer [ contour <= 24] {
   polygon-fill: @6;
}
#layer [ contour <= 20] {
   polygon-fill:@5;
}
#layer [ contour <= 16] {
   polygon-fill: @4;
}
#layer [ contour <= 12] {
   polygon-fill: @3;
}
#layer [ contour <= 8] {
   polygon-fill: @2;
}
#layer [ contour <= 4] {
   polygon-fill: @1;
}

Notice that this uses values from the database (namely, countour) to conditionally style the polygons that represent specific regions of sea surface temperature.

Next, let's add a new layer to our map that overlays over our sea surface polygons. To get a layer of continents, do the following:

  1. Click "+ Add Layer",
  2. Search in the Data Library for a dataset called "Land",
  3. Select that data set and click "Add Layer"

Now we have a multilayer map! Let's style our continents to compliment the sea surface theme better. I'm going to choose a dark grey styling for the continents and use the following CartoCSS:

#ne_50m_land {
  polygon-fill: #333333;
}

Finally, if we have time, let's project this data. We are going to use the World Robinson projection, which we can put into our database by running the following SQL query:

SELECT 
  contour, 
  ST_Transform(the_geom,54030) As the_geom_webmercator 
FROM 
  sea_surface_temps_nov_15_2015

We need to do the same for the land layer, but referencing the correct table in the database:

SELECT 
  ST_Transform(the_geom,54030) As the_geom_webmercator 
FROM 
  ne_50m_land

If you get an error projecting your data, you need to put the projection into your database by running the following query once:

INSERT into spatial_ref_sys (srid, auth_name, auth_srid, proj4text, srtext) values ( 54030, 'ESRI', 54030, '+proj=robin +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs ', 'PROJCS["World_Robinson",GEOGCS["GCS_WGS_1984",DATUM["WGS_1984",SPHEROID["WGS_1984",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]],PROJECTION["Robinson"],PARAMETER["False_Easting",0],PARAMETER["False_Northing",0],PARAMETER["Central_Meridian",0],UNIT["Meter",1],AUTHORITY["EPSG","54030"]]');

Finally, let's share our maps to celebrate all things GIS.

Voila! Happy mapping!

Resources

Want to find out more about projections in CartoDB? Check out the following blog posts:

Want more learning resources? Check these out:

  1. Map Academy
    • CartoDB.js -- build a web app to visualize your data, allowing for user interaction
    • SQL and PostGIS -- geospatial slicing and dicing
  2. CartoDB Tutorials
  3. CartoDB Editor Documentation
  4. CartoDB APIs
  5. Community help on StackExchange
  6. CartoDB Map Gallery
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment