diff --git a/html/graphics/graphics_toolbar.html b/html/graphics/graphics_toolbar.html
index 0959ba6..27d72da 100755
--- a/html/graphics/graphics_toolbar.html
+++ b/html/graphics/graphics_toolbar.html
@@ -29,11 +29,10 @@
       "esri/graphic", 
       "dojo/_base/Color", 
       "dojo/query",
-      "dojo/on", 
-      "dojo/_base/connect", 
+      "dojo/on",
       "dojo/dom", 
       "dojo/domReady!"], 
-      function(Map, Draw, SimpleMarkerSymbol, SimpleLineSymbol, CartographicLineSymbol, Graphic, color, query, on, conn, dom) {
+      function(Map, Draw, SimpleMarkerSymbol, SimpleLineSymbol, CartographicLineSymbol, Graphic, color, query, on, dom) {
         "use strict"
 
         var tb; 
@@ -57,7 +56,7 @@
         function initToolbar() {
           tb = new Draw(map);
           // Do something after graphics are sketched on the map 
-          conn.connect(tb, "onDrawEnd", addGraphic);
+          tb.on("draw-end", addGraphic);
           // Override the default marker symbol
           tb.markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 7, 
             new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new color([255,0,0]), 1), 
@@ -99,7 +98,8 @@
         }
 
         // Add the graphic with symbol
-        function addGraphic(geometry) {
+        function addGraphic(evt) {
+          var geometry = evt.geometry;
           var symbol = dom.byId("symbol").value;
           if (symbol) {
             symbol = eval(symbol);
diff --git a/html/symbols/symbols_lines.html b/html/symbols/symbols_lines.html
new file mode 100755
index 0000000..09377a1
--- /dev/null
+++ b/html/symbols/symbols_lines.html
@@ -0,0 +1,126 @@
+﻿<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
+  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
+  <title>Line Symbols</title>
+  <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
+  <!-- ArcGIS API for JavaScript CSS-->
+  <link rel="stylesheet" href="//js.arcgis.com/3.9/js/esri/css/esri.css">
+  <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
+  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
+  <style>
+    html, body, #mapDiv {
+      height: 100%;
+      width: 100%;
+    }
+  </style>
+  
+  <!-- ArcGIS API for JavaScript library references -->
+  <script src="//js.arcgis.com/3.9compact"></script>
+  <script>
+  /*
+  */
+    require(["esri/map",
+      "esri/InfoTemplate",
+      "esri/layers/FeatureLayer",
+      "esri/Color",
+      "esri/renderers/UniqueValueRenderer",
+      "esri/symbols/SimpleLineSymbol",
+      "dojo/on", 
+      "dojo/dom", 
+      "dojo/domReady!"], 
+      function(Map, InfoTemplate, FeatureLayer, Color, UniqueValueRenderer, SimpleLineSymbol, on, dom) {  
+        "use strict"
+
+        var originalRenderer;
+
+        // Create map
+        var map = new Map("mapDiv", {
+          basemap: "topo",
+          center: [-122.6561, 45.5210], //long, lat
+          zoom: 15
+        });
+
+        var bikeLanes = new FeatureLayer("http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/bike_rte/FeatureServer/0", {outFields: ["*"]});
+        
+        var defaultSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
+          //color and width of outline
+          new Color([0,255,0]), 4);
+
+        var sharrowSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
+          //color and width of outline
+          new Color([0,0,255]), 4);
+
+        var laneSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
+          //color and width of outline
+          new Color([255,255,0]), 4);
+
+        var categoryRenderer = new UniqueValueRenderer(defaultSymbol, "BIKEMODE");
+
+        categoryRenderer.addValue("High traffic through street" ,sharrowSymbol);
+        categoryRenderer.addValue("Bike lane" ,laneSymbol);
+
+        bikeLanes.setInfoTemplate(new InfoTemplate("type:", "${BIKEMODE}"));
+        map.addLayer(bikeLanes);
+        
+        bikeLanes.on("load", function(evt) {
+          originalRenderer = evt.layer.renderer;
+          evt.layer.setRenderer(categoryRenderer);
+          evt.layer.refresh();
+        });
+
+        // Set popup
+        var popup = map.infoWindow;
+        popup.highlight = false;
+        popup.titleInBody = false;
+
+        //wire an event listener to detect when someone has selected a new dropdown value
+        on(dom.byId("symbol"), "change", changeSymbol);
+
+        function changeSymbol() {
+          map.infoWindow.hide();
+          var e = dom.byId("symbol");
+          var sym = e.options[e.selectedIndex].value;
+
+          switch (sym) {            
+            case "cat":              
+              //substitute a unique value renderer to draw the graphics
+              bikeLanes.setRenderer(categoryRenderer);
+              break
+            case "default":
+              map.infoWindow.hide();
+              //replace the clientside renderer with what was originally defined for the service
+              bikeLanes.setRenderer(originalRenderer);              
+              break      
+          }
+          bikeLanes.refresh();
+        }
+      }
+    );
+  </script>
+</head>
+<body>
+  <div class="panel panel-primary panel-fixed">
+    <div class="panel-heading">
+      <h3 class="panel-title">Lines</h3>
+    </div>
+    <div class="panel-body">      
+      <div class="form-inline">
+        <div>
+        Apply different symbols based on feature attributes<br><br>
+        </div>
+        <div class="form-group">
+        <select class="form-control" id="symbol">
+          <option value="cat" selected="selected">bike lanes (by type)</option>
+          <option value="default" >default (defined in service)</option>
+        </select>    
+      </div>
+      </div>
+    </div>
+  </div>
+  <div id="mapDiv"></div>  
+</body>
+</html>
diff --git a/html/symbols/symbols_pts.html b/html/symbols/symbols_pts.html
new file mode 100755
index 0000000..e4d8295
--- /dev/null
+++ b/html/symbols/symbols_pts.html
@@ -0,0 +1,130 @@
+﻿<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
+  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
+  <title>Point Symbols</title>
+  <link rel="shortcut icon" href="//esri.github.io/quickstart-map-js/images/favicon.ico">
+  <!-- ArcGIS API for JavaScript CSS-->
+  <link rel="stylesheet" href="//js.arcgis.com/3.9/js/esri/css/esri.css">
+  <!-- Web Framework CSS - Bootstrap (getbootstrap.com) and Bootstrap-map-js (github.com/esri/bootstrap-map-js) -->
+  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="//esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
+  <style>
+    html, body, #mapDiv {
+      height: 100%;
+      width: 100%;
+    }
+  </style>
+  
+  <!-- ArcGIS API for JavaScript library references -->
+  <script src="//js.arcgis.com/3.9compact"></script>
+  <script>
+  /*
+  */
+    require(["esri/map",
+      "esri/InfoTemplate",
+      "esri/layers/FeatureLayer",
+      "esri/Color",
+      "esri/renderers/SimpleRenderer",
+      "esri/symbols/SimpleMarkerSymbol",
+      "esri/symbols/SimpleLineSymbol",
+      "esri/symbols/PictureMarkerSymbol",
+      "dojo/on", 
+      "dojo/dom", 
+      "dojo/domReady!"], 
+      function(Map, InfoTemplate, FeatureLayer, Color, SimpleRenderer, SimpleMarkerSymbol, SimpleLineSymbol, PictureMarkerSymbol, on, dom) {  
+        "use strict"
+
+        var originalRenderer;
+
+        // Create map
+        var map = new Map("mapDiv", {
+          basemap: "osm",
+          center: [-94.58, 39.10], //long, lat
+          zoom: 14
+        });
+
+        var pointFL = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0", {outFields: ["*"]});
+        
+        //we can define an image resource to use as an alternative symbol (within a simple renderer)
+        var bmpSymbol = new PictureMarkerSymbol("http://webarchive.okfn.org/okfn.org/201404/assets.okfn.org/p/opengovernment/img/icon-512.png", 12, 12);
+        var bmpRenderer = new SimpleRenderer(bmpSymbol);
+
+        //we can also define a simple SVG symbol for all points (green diamond with blue outline)
+        var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, 12,
+          new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
+          //color and width of outline
+          new Color([0,0,255]), 1.5),
+          //color of fill (r,g,b,alpha/transparency)
+          new Color([0,255,0,0.50]));
+
+        //if all features should be symobolized the same we use a simple renderer, other renderers give us the ability to differentiate based on attributess
+        var simpleRenderer = new SimpleRenderer(markerSymbol);
+
+        pointFL.setInfoTemplate(new InfoTemplate("Census Block: ${TRACT}/${BLOCK}", "Pop. in 2000: ${POP2000}"));
+        map.addLayer(pointFL);
+        
+        pointFL.on("load", function(evt) {
+          //once the feature layer has loaded, we can retrieve the renderer defined for the service itself (which displays larger circles )
+          originalRenderer = evt.layer.renderer;
+        });
+
+        // Set popup
+        var popup = map.infoWindow;
+        popup.highlight = false;
+        popup.titleInBody = false;
+
+        //wire an event listener to detect when someone has selected a new dropdown value
+        on(dom.byId("symbol"), "change", changeSymbol);
+
+        function changeSymbol() {
+          var e = dom.byId("symbol");
+          var sym = e.options[e.selectedIndex].value;
+
+          switch (sym) {            
+            case "bmp":
+              //substitute a PictureMarkerSymbol to draw the graphics
+              pointFL.setRenderer(bmpRenderer);
+              pointFL.refresh();
+              break
+            case "svg":
+              //substitute a SimpleMarkerSymbol to draw the graphics
+              pointFL.setRenderer(simpleRenderer);
+              pointFL.refresh();
+              break
+            case "default":
+              //replace the original renderer using the class breaks defined in the service itself
+              pointFL.setRenderer(originalRenderer);
+              pointFL.refresh();
+              break      
+          }          
+        }
+      }
+    );
+  </script>
+</head>
+<body>
+  <div class="panel panel-primary panel-fixed">
+    <div class="panel-heading">
+      <h3 class="panel-title">Points</h3>
+    </div>
+    <div class="panel-body">      
+      <div class="form-inline">
+        <div>
+        Apply different symbols to point graphics in the map<br><br>
+        </div>
+        <div class="form-group">
+        <select class="form-control" id="symbol">
+          <option value="default" selected="selected">default (defined in service)</option>
+          <option value="bmp">Picture Image</option>
+          <option value="svg">SVG Marker</option>          
+        </select>    
+      </div>
+      </div>
+    </div>
+  </div>
+  <div id="mapDiv"></div>  
+</body>
+</html>
