TileMill Quickly and Easily Design Maps for the Web Shaky Sherpa Matt Berg Modi Research Group The Earth Institute. Columbia University

Plan for tonight.. Importing a spreadsheet(from formhub) We we will walk through how to import a basic spreadsheet(csv) and ESRI Shapefile into TileMill. Importing a spreadsheet Styling data Here we show the basics of using Carto - a CSS-like language - to style your data in TileMill. Styling data Adding tooltips and legends Here we show how to add tooltip interactivity and legends to maps. Adding tooltips and legends Exporting your map Here we show how to export a map from TileMIll as a fully interactive map that can be shared on the web. Exporting your map

Geographic Information LOCATIONATTRIBUTE GEOGRAPHIC INFORMATION Where?What? Latitude (y) Longitude (x) Altitude (z) Information linked to location i.e. name, population, description Location represents where on the earth the items of interest are located Attribute provides information about what is occurring there Where? Latitude (y) Longitude (x) Altitude (z) What?Where? Latitude (y) Longitude (x) Altitude (z) Information linked to location i.e. name, population, description What?Where? Latitude (y) Longitude (x) Altitude (z) Where? Latitude (y) Longitude (x) Altitude (z) Information linked to location i.e. name, population, description What?

Basics GIS- Geographic Information System (Recording, Analysis or Display of Data that is related to a location) Map Projections (Refers to method used for representing a 3D object like Earth on a 2D surface like paper or computer) Coordinate systems (Provide ways of describing a specific location on the earth. Using latitude and longitude or using distance in meters from the Equator)

Features: Points, Lines, and Polygons Points households, populated place centroid, facility (school, health), water sources x,y coordinates Line roads, electricity grid, water pipelines, rivers series of x, y coordinates connected to form path/network Polygon boundary, administrative area, service area series of x, y coordinates connected to form enclosed area * Display Hierarchy: (1) Points, (2) Lines, and (3) Polygons

Shapefile Limitations: Cannot store null values Round up numbers Poor support for Unicode character strings Field names can not be longer than 10 characters Cannot store both a date and time in a field 2 GB size limit for any shapefile component file (max ~ 70 million point features) May take up three to five times as much space as a geodatabase Spatial queries take longer compared to a geodatabase feature class A vector data storage format for storing the location, shape, and attributes of geographic features. A shapefile is stored in a set of related files and contains one feature class. Source: ESRI ArcGIS Desktop Help and GIS Glossary What is a shapefile?

Interface tour 1. List of Projects 2. New Project

1. Main toolbar 2. Map Preview 3. Editing Tools 4. StyleSheet Editor Editing Interface

1. Map Preview 2. Zoom Controls and Full Page toggle M

1. Add Layer button 2. Geometry Icon 3.Layer Name 4. Inspect Layer Data 5. Edit Layer 6. Delete Layer

1. Active stylesheet 2. Inactive stylesheet 3. New stylesheet 4. Line numbers 5. Text Area 6. Color Palette

Adding Layers TileMill supports creating map layers from following types of files and databases CSV ESRI Shapefile KML(Google Earth) GeoTIFF(Raster Data) GeoJson SQLite(spatial database) PostGIS(spatial database)

Layer Settings ID – This is the name of the layer (can include letters, numbers, dashes or underscores) DataSource (local files or url) SRS(Spatial Reference System) -TileMill autodetects it but sometimes it needs be specified

Project Settings Tooltips (allows you to make your maps interactive with dynamic tooltips that appear when you hover or click on a feature (any point or polygon). Teaser – displays on hover Full – displays on click Legend (allows you to make your maps interactive with dynamic tooltips that appear when you hover or click on a feature (any point or polygon).

Carto Similar to CSS (Cascading Style Sheet for Web) Various types of Symbolizers:  Line (for lines & polygons)  Polygon (for polygons)  Point (for points)  Text (for points, lines, and polygons)  Shield (for points & lines)  Line Pattern (for lines & polygons)  Polygon Pattern (for polygons)  Raster (for rasters)  Markers (for points, lines, & polygons)  Buildings

Exporting MBTILES PNG PDF SVG

GIS Data Sources Natural Earth Global Administrative Areas (GADM) CloudMadeCloudMade (OSM data) NYC Open DataNYC Open Data (city agencies) geocommons