03 slides

Author: maptastik

slides/03_cartoCSS-tilemill/images/carto-multi.png

@@ -4,13 +4,48 @@
   <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
   <link href='../big.css' rel='stylesheet' type='text/css' />
   <style>
-    .gdb {
-  		background-image: url(./images/gdb.png);
+    .carto-multi {
+  		background-image: url(./images/carto-multi.png);
+    	background-repeat: no-repeat;
+    	background-position: center 1px;
+    	background-size:60%;
+  	}
+    .carto-ref1 {
+  		background-image: url(./images/carto-ref1.png);
+    	background-repeat: no-repeat;
+    	background-position: center 1px;
+    	background-size:100%;
+  	}
+    .carto-ref2 {
+  		background-image: url(./images/carto-ref2.png);
+    	background-repeat: no-repeat;
+    	background-position: center 1px;
+    	background-size:100%;
+  	}
+    .carto-ref3 {
+  		background-image: url(./images/carto-ref3.png);
+    	background-repeat: no-repeat;
+    	background-position: center 1px;
+    	background-size:100%;
+  	}
+    .carto-ref4 {
+  		background-image: url(./images/carto-ref4.png);
+    	background-repeat: no-repeat;
+    	background-position: center 1px;
+    	background-size:100%;
+  	}
+    .carto-ref5 {
+  		background-image: url(./images/carto-ref5.png);
+    	background-repeat: no-repeat;
+    	background-position: center 1px;
+    	background-size:100%;
+  	}
+    .mb-studio1 {
+  		background-image: url(./images/mb-studio1.png);
     	background-repeat: no-repeat;
     	background-position: center 1px;
     	background-size:100%;
   	}
-    
 
   	/*Text Style*/
   	body {
@@ -40,6 +75,10 @@
 	.imageTextLight {
   		text-shadow:0px 0px 7.5px rgba(34,34,34,0.95);
 	}
+    code {
+        font-family: "courier new";
+        font-size: 64;
+    }
   </style>
   <script src='../big.js'></script>
 </head>
@@ -64,13 +103,69 @@ <h2>Goals:</h2>
 		</ul>
 	</div>
 	<div>What is CartoCSS?</div>
-	<div>Look at HTML/CSS relationship</div>
-	<div>What does CartoCSS do?</div>
-	<div>Look at the reference</div>
+	<div>A styling language used in TileMill/Mapbox Studio</div>
+	<div>It may be helpful to look at HTML/CSS relationship</div>
+	<div>Use CSS to select HTML and element/tag/class/id and add style</div>
+	<div><a href="http://codepen.io/maptastik/pen/jEbdRm" target="_blank">example</a></div>
+	<div>CartoCSS is similar in <em>syntax</em> &amp; <em>function</em></div>
+	<div>
+	    <code>#layer {
+	        symbolizer: value;
+	    }
+	    </code></div>
+	<div>Allows you to target map features...</div>
+	<div>...and manipulate various aspects of their appearance</div>
+	<div>You can style...</div>
+	<div>points, lines, &amp; polygons</div>
+	<div>rasters</div>
+	<div>text</div>
+	<div>buildings</div>
+	<div>and more!</div>
+	<div>And there are lots of symbolizing options for different types of features<br>(<a href="https://github.com/mapbox/carto/blob/master/docs/latest.md" target="_blank">see Reference</a>)</div>
+	<div data-bodyclass="carto-ref1"></div>
+	<div data-bodyclass="carto-ref2"></div>
+	<div data-bodyclass="carto-ref3"></div>
+	<div data-bodyclass="carto-ref4"></div>
+	<div data-bodyclass="carto-ref5"></div>
+	<div>Read on a painter's model</div>
+	<div class="center-text"><p><em>top</em><br>&darr;<br><em>bottom</em></p></div>
+	<div>You can stack styles for the same layer</div>
+	<div data-bodyclass="carto-multi"></div>
 	<div>What is TileMill?</div>
+	<div>Map design program</div>
+	<div>Can handle a variety of geographic data formats</div>
+	<div>
+	    <h2>Vector</h2>
+	    <ul>
+	        <li>shp</li>
+	        <li>kml</li>
+	        <li>csv</li>
+	        <li>geoJSON</li>
+	        <li>PostGIS</li>
+	    </ul>
+    </div>
+    <div>Raster: GeoTIFF</div>
+    <div>
+        <h4>Exports to a variety of formats</h4>
+        <ul>
+            <li>png</li>
+            <li>svg</li>
+            <li>pdf</li>
+            <li>mapnik XML</li>
+            <li><em>mbtiles</em></li>
+        </ul>
+    </div>
 	<div>What about Mapbox Studio?</div>
+	<div data-bodyclass="mb-studio1"></div>
+	<div data-bodyclass="mb-studio1 imageTextLight">
+	    <ul>
+	        <li>vector tiles</li>
+	        <li>Style OSM data directly</li>
+	    </ul>
+	</div>
 	<div>Activity 1: Make an interactive choropleth map</div>
 	<div>Activity 2: Put our choropleth on top of a basemap</div>
+	<div>Activity 3: Remake the whole map using geoJSON &amp; Leaflet</div>
 
 </body>
 </html>