Your presenters

~Outline can be found on the repo wiki~

• Web Maps 101

What are web maps?

Giphy

Great map, but...

not a Web Map...

Web maps have these common elements:

• A map
• Functionality to interact with the map
• A user interface

Who was involved in creating web maps?

Let's travel back to 1990s...

In 1996, MapQuest introduced the first popular web map

MapQuest

It was like a road map and yellow pages combined. Its primary purpose was to find places and get directions.

Yahoo

In 2005, Google released their version of the web map

Google

Google Maps became more popular than MapQuest because the maps were faster

The maps were faster because of Google's use of map tiles

And Google also made its technologies available to developers through an API

Fast Forward to Today...

Open source tools and libraries are gaining popularity

Web map components

Basemap

A map that provides geographic context to help support a wide variety of overlays- typically raster tiles.

Basemaps are Tiles

Map Tiles

Pre-rendered images (tiles) that fit seamlessly together in geographic space in order to make maps load quickly.

Map tiles are 256x256 pixels and organized based on coordinates (x,y) and zoom levels (z).

Zoom Level

Defines the scale of the current map view. Ranges from 0 (entire world) to 21 (individual building level).

http://tile.openstreetmap.org/17/27306/49738.png

tile server  zoom level  x/y of tile in the grid

image format of the tile

Basemaps are available from many sources:

• Free: OSM, Stamen, Mapbox, CartoDB
• Paid: Google, Bing, Noki/Here, ESRI
• Custom: Mapbox, ESRI

Overlays

Themes of information, typically vector, overlaid on a basemap that help tell a story.

Data + Location + geometry = Geospatial data

There are a variety of data formats for overlays

GeoJSON

            
            {
            "type": "FeatureCollection",
            "features": [
              {
                "type": "Feature",
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    -104.987825,
                    39.7414659
                  ]
                },
                "properties": {
                  "name": "Modworks Coworking",
                  "address": "110 16th St #1300, Denver, CO 80202",
                  "site": "http://www.modworks.com/"
                }
              },
              {
                "type": "Feature",
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    -104.986191,
                    39.7589209
                  ]
                },
                "properties": {
                  "name": "Green Spaces",
                  "address": "1368 26th St, Denver, CO 80205",
                  "site": "http://www.greenspaces.com/"
                }
              }
            }
          

JavaScript libraries!

Leaflet

A modern open-source JavaScript library for mobile-friendly, interactive web maps.

var map = L.map('map', { center: [12.99766, -84.90838], zoom: 5 });
          

Leaflet Plugins

var map = new L.Map('map_canvas', { center: [0,0], zoom: 2 });
          

L.mapbox.accessToken = 'Access Token';
          var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -74.50], 9);
          

var NPMap = { center: { lat: 39.37, lng: -105.7}, div: 'map'};
          

Bootleaf

The future is exciting...

... we now have vector tiles

How do I get started?

giphy

Planning a web map

• What is the purpose of the map?
• Where can I get the data?
• Will the map be queried for additional information?
• Will the map be viewed on multiple devices?

Custom Stack:

There are a range of industries that need data collection...

Invasive Species

Bike Theft

Why use Fulcrum?

Work Offline

Link Records, or Lookup Tables

Use Calculated Fields

Real Time Data via Webhooks

Integration with a variety of tools

For example, We use Zapier to sync Fulcrum app with Slack

Why use CartoDB?

Using CartoDB you can:

• easily overlay data onto a map
• analyze the data to reveal spatial patterns
• tell stories by creating beautiful visualizations
• and then easily share them with the world!

CartoDB combines:

• the power of PostGIS and SQL
• CartoCSS for map styling
• Mapnik for tile rendering
• Leaflet for the viewing interface

These technologies are all packaged into one easy-to-use online interface.

Demo with Fulcrum and CartoDB integration

Ok! Let's start building the map!

• First, we collected co-working spaces and breweries in Fulcrum
• Then grab Denver neighborhood polygons and transportation stops (B-cycle stations, light rail and bus stops) from online
• Then we counted how many of these amenities (co-working spaces, breweries, transportation stops) were in each neighborhood
• Lastly, we customized the map and styled accordingly

Next, we followed the same steps for Denver breweries (collecting in Fulcrum and linking with data shares in CartoDB.

Then, we grabbed neighborhood polygons and transportation points from Denver gov and added those to CartoDB.

Spatial Join between Denver Neighborhoods and co-working spaces

Add numeric column and count the number of features in each neighborhood

          UPDATE 
           denver_neighborhoods
          SET 
           busstops_count = (SELECT count(*)
          FROM 
           busstops 
          WHERE 
           ST_Intersects(busstops.the_geom,denver_neighborhoods.the_geom))
          

Add a total_count field and sum all of the values to one field (to style the labels)

          UPDATE 
           denver_neighborhoods_with_counts
          SET 
           total_count =(bcycle_count+breweries_count+lightrail_count+busstops_count)
           

Change basemap

Style the points

Style the popups

Pop-up content

Color for co-working labels

            <h2> style="color:#ECBE13">{{name}}</h2>
          

Color for neighborhood labels

            <h2> style="color: #738C79;">{{nbhd_name}}</h2>
          

Resources

• http://maptime.io/lessons-resources/
• mapschool.io