Permalink
Browse files

remove merge orig

  • Loading branch information...
1 parent 6e9a0e7 commit ca78a4946647ba51025b185843f329276551a9e5 @dhcole committed Apr 2, 2012
Showing with 0 additions and 164 deletions.
  1. +0 −164 index.html.orig
View
164 index.html.orig
@@ -1,164 +0,0 @@
-
-<!DOCTYPE html>
-<html><head>
- <title></title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
- <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
- <link href='medium.css' rel='stylesheet' type='text/css' />
- <link href='prettyprint.css' rel='stylesheet' type='text/css' />
- <meta charset='utf8' />
- <script src='medium.js'></script>
- <script src='prettify.js'></script>
- <script type='text/javascript'>window.addEventListener('load', prettyPrint);</script>
- </head>
-<body>
-
-<!-- Intro to web mapping: what can you make? -->
-<div><h3>An Open Web Mapping Toolbox</h3>
-<span style='font-size:85px;line-heivertical-align:top;'>Dave Cole &amp; Tom MacWright</span>
-</div>
- <div>What kind of web maps can you make?</div>
- <div><h3>A base map:</h3>
- <img src="img/base-map-features.png">
- </div>
- <div><h3>Or tiled overlays</h3>
- <img src="img/tile-overlay.png">
- </div>
- <div><h3>Or tiled overlays</h3>
- <img src="img/tile-overlay-grid.png">
- </div>
-
- <div><h3>With dynamic features</h3>
- <img src="img/base-map.png">
- </div>
-
-<!-- What are the steps -->
-<div><h3>Process:</h3></div>
-<div><h3><strong>1.</strong> Sourcing data</h3> Where do you find reliable open data?</div>
-<div><h3><strong>2.</strong> Processing data</h3> Adding geographic information, projections, summarization</h3></div>
-<div><img src='design_bg.png' /><h3><strong>3.</strong> Design</h3> visualizing the data; telling a story</div>
-<div><h3><strong>4.</strong> Map distribution</h3> rendering &rarr; serving tiles &rarr; interfaces on web &amp; mobile</div>
-
-<!-- Making a base layer: tiled -->
-<div><h3>Where to find open data:</h3></div>
- <div><h3>OpenStreetMap</h3>openstreetmap.org</div>
- <div><h3>US Census</h3>census.gov/<br>geo/www/tiger</div>
- <div><h3>Local government open data</h3></div>
- <div><h3>Natural Earth</h3>naturalearthdata.com</div>
- <div><h3>Data you create</h3>Like a <strong>spreadsheet</strong> or <strong>list</strong> of addresses</div>
-<div><h3>Processing data:</h3></div>
- <div><h3>Tools</h3>QGIS, ORG / GDAL, PostGIS, scripting</div>
- <div><h3>Formats</h3> shp, geojson, kml, geotiff, csv</div>
- <div><h3>Geocoding</h3> <strong>55 4th Street, San Francisco, CA 94103</strong> -> <pre class='prettyprint'>
- {
- lng: -122.404883,
- lat: 37.785034
- }
- </pre></div>
- <div><h3>Projections</h3>Converting a 3d globe to a flat map</div>
- <div><h3>Spherical <strong>mercator</strong></h3>
- <img src='img/mercator.png'></div>
- <div><h3><strong>Albers</strong> equal area</h3>
- <img src='img/albers.png'></div>
- <div><h3>Summarization</h3>Viewing data in aggregate</div>
- <div><h3>Pivot tables</h3>Aggregate records of data on an attribute</div>
- <div><h3>Pivot tables</h3><img src='img/unsummed.png' style='width:100%;'></div>
- <div><h3>Pivot tables</h3><img src='img/summed.png' style='width:100%;'></div>
- <div><h3>Points in areas</h3><img src='img/points-in-poly.png'></div>
- <div><h3>Nearest neighbors</h3><img src='img/nearest.png'></div>
-<<<<<<< HEAD
- <div><h3>Gridding</h3><img src='img/gridded.png'></div>
-<div><h3>Designing the map</h3></div>
- <div><h3>Basic styling with QGIS</h3></div>
-=======
- <div><h3>Gridding</h3><img src='img/gridding.jpg'></div>
-<div>Designing the map</div>
- <div>Applying styles to data: TileMill and Carto</div>
->>>>>>> 944c495848f20cfe8b9bd4472253df67a937bb3a
- <div>Zoom-dependent design: What to show and when</div>
- <div>Interactive features: overlays add context</div>
-
-
-<!-- Tile-based overlays -->
-<div>Tiled overlays: when design and scale matter</div>
- <div>Chrolopleths across thousands of features</div>
- <div>Load data, classify on a certain field</div>
- <div>Use color or patterns to quantify values</div>
- <div>Show millions of points precisely without sacrificing speed</div>
- <div>Other possibilities: dot densities; custom shapes</div>
- <div>Serving tiles == serving images</div>
- <div>(and maybe interactivity)</div>
- <div>Mapnik -> cached images</div>
-
-
-<!-- Adding client-side features -->
-
-<div><h3>The Client Side</h3> putting web maps on web pages</div>
-<div>generally <strong>Javascript</strong> libraries that deal in <strong>images</strong></div>
-<div>lots of options:</div>
-<div><h3>OpenLayers</h3>established, monolithic, 'hefty'</div>
-<div><h3>Leaflet</h3> OpenLayers post-web renassiance &amp; workout time</div>
-<div><h3>Modest Maps</h3> nothing but tiles: wafer thin &amp; light</div>
-<div><h3>'Theme'</h3> open source libraries &gt; their &copy; equivalents</div>
-<div><pre class='prettyprint'>
-// The world-famous
-// Google Maps API
-new google.maps.Map($('map')[0], {
- zoom: 8,
- center: new google.maps.LatLng(
- -34.397, 150.644),
- mapTypeId: google.maps.MapTypeId.ROADMAP
-});</pre></div>
-<div><img src='img/google_maps_one.png' /></div>
-
-
-<div><pre class='prettyprint'>
-// Leaflet with MapBox Streets
-var mylayer = 'http://a.tiles.mapbox.com/v3/tmcw.map-rnesfyru';
-var map = new L.Map('map', {
- center: new L.LatLng(-34.397, 150.644),
- zoom: 8,
- layers: [new L.TileLayer(mylayer + '/{z}/{x}/{y}.png')]
-});</pre></div>
-
-<div><img src='img/leaflet_one.png' /></div>
-<div>'red dot fever'</div>
-<div><pre class='prettyprint'>
-// Making a marker in Google Maps
-var marker = new google.maps.Marker({
- position: new google.maps.LatLng(-34.397, 150.644),
- map: map
-});</pre></div>
-<div><img src='img/google_maps_two.png'></div>
-
-<div><pre class='prettyprint'>
-// Making a marker in Leaflet
-map.addLayer(new L.Marker(new L.LatLng(-34.397, 150.644)));
-</pre></div>
-<div><img src='img/leaflet_two.png' /></div>
-
-<div><h3>Performance</h3> Multiple kinds.</div>
-<div><h3>Client-side</h3> <center><img src='img/netbook.png' /></center></div>
-<div><h3>Client-side</h3> Minimize page weight via magic.</div>
-<div><h3>Client-side</h3> page weight = #/<em>elements</em> + kb/<em>data</em> + ms/<em>javascript</em></div>
-<div><h3>Client-side</h3> magic = MapBox's UTFGrid, Canvas</div>
-<div><h3>Server-side</h3> <center><img src='img/gaming_rig.png' /></center></div>
-<div><h3>Server-side</h3> Maximize clients &times; (maps/sec) </div>
-<div><h3>Server-side</h3> Cache, optimize, distribute</div>
-<div><h3>Server-side</h3> TileMill renders maps - then 'just' distribute tiles</div>
-<div><h3>Server-side</h3> Never <strong>WMS</strong> again; tiles are cacheable and distributable</div>
-
-<div><h3>The future</h3> <span style='display:block;background:#fff;text-align:center;'><img src='img/future.png' /></span></div>
-<div><h3>The future</h3> vectors - first on mobile</div>
-<div><h3>The future</h3> vectors - first on mobile <strong>&amp; driven by data improvements</strong></div>
-<div><h3>The future</h3> mix &amp; match components</div>
-<div><h3>The future</h3> mix &amp; match components <strong>&rarr; you don't need Google</strong></div>
-
-<div><h3>Thanks!</h3>
- <a href='http://mapbox.com/'>MapBox</a>
- <a href='http://twitter.com/mapbox/'>@mapbox</a>
- <a href='http://twitter.com/mapbox/'>@dhcole</a>
- <a href='http://twitter.com/mapbox/'>@tmcw</a></div>
-
-</body>
-</html>

0 comments on commit ca78a49

Please sign in to comment.