First GISCloud demo working.

Author: JasonSanford

demos/gis-cloud/index.html

@@ -60,7 +60,7 @@ <h2>Blah</h2>
                         <div id="map-container-1" class="map">
                             <div class="layer-buttons">
                                 <div class="row layer-button-row"><a href="javascript:giscloud_sewer_line.setMap(map1);" class="btn success">Sewer Line On</a> <a href="javascript:giscloud_sewer_line.setMap(null);" class="btn danger">Sewer Line Off</a></div>
-                                <div class="row layer-button-row" style="float: right;"><a href="javascript:giscloud_sewer_man_hole.setMap(map1);" class="btn success">Man Hole On</a> <a href="javascript:giscloud_sewer_man_hole.setMap(null);" class="btn danger">Man Hole Off</a></div>
+                                <div class="row layer-button-row" style="float: right;"><a href="javascript:giscloud_man_hole.setMap(map1);" class="btn success">Man Hole On</a> <a href="javascript:giscloud_man_hole.setMap(null);" class="btn danger">Man Hole Off</a></div>
                             </div>
                         </div>
                     </div>
@@ -130,11 +130,11 @@ <h2>Blah</h2>
         <script src="../../dist/gvector.js" type="text/javascript"></script>
         <script type="text/javascript">
             var map1;
-            var giscloud;
+            var giscloud_sewer_line, giscloud_man_hole;
             $(document).ready(function() {
 
                 map1 = new google.maps.Map(document.getElementById("map-container-1"), {
-                    center: new google.maps.LatLng(35.05642206622684, -80.66948943389895),
+                    center: new google.maps.LatLng(34.95162940282452, -80.76188617004397),
                     zoom: 16,
                     mapTypeId: google.maps.MapTypeId.ROADMAP,
                     noClear: true
@@ -143,21 +143,53 @@ <h2>Blah</h2>
                 giscloud_sewer_line = new gvector.GISCloud({
                     mapID: 27322,
                     layerID: 117755,
+                    scaleRange: [15, 20],
+                    symbology: {
+                        type: "range",
+                        property: "pipe_dia",
+                        ranges: [
+                            {
+                                range: [0, 8],
+                                vectorOptions: {
+                                    strokeWeight: 4,
+                                    strokeColor: "#46461f",
+                                    strokeOpacity: 0.8
+                                }
+                            },
+                            {
+                                range: [8.00001, 47.9999],
+                                vectorOptions: {
+                                    strokeWeight: 7,
+                                    strokeColor: "#ff7800",
+                                    strokeOpacity: 0.8
+                                }
+                            },
+                            {
+                                range: [48, 100],
+                                vectorOptions: {
+                                    strokeWeight: 10,
+                                    strokeColor: "#000000",
+                                    strokeOpacity: 1
+                                }
+                            }
+                        ]
+                    },
+                    infoWindowTemplate: '<div class="iw-content"><h3>Sewer Line</h3><table class="condensed-table zebra-striped bordered-table"><tr><th>Diameter</th><td>{pipe_dia} in.</td></tr><tr><th>Material</th><td>{pipe_mat}</td></tr><tr><th>Flows To</th><td>{wwtp} WWTP</td></tr></table></div>',
+                    singleInfoWindow: true
+                });
+                
+                giscloud_man_hole = new gvector.GISCloud({
+                    mapID: 27322,
+                    layerID: 117756,
+                    scaleRange: [16, 20],
                     symbology: {
                         type: "single",
                         vectorOptions: {
-                            strokeWeight: 4,
-                            strokeColor: "#46461f",
-                            strokeOpacity: 0.8
+                            icon: new google.maps.MarkerImage("../../docs-demo/img/markers/manhole.png", new google.maps.Size(16, 16), new google.maps.Point(0, 0), new google.maps.Point(8, 8))
                         }
                     },
-                    infoWindowTemplate: function(properties) {
-                        var html = '';
-                        for(var prop in properties) {
-                            html += '<strong>' + prop + '</strong>: ' + properties[prop] + '<br />';
-                        }
-                        return html;
-                    }
+                    infoWindowTemplate: '<div class="iw-content"><h3>Man Hole</h3><table class="condensed-table"><tr><th>Diameter</th><td>{mh_dia} ft.</td></tr><tr><th>Depth</th><td>{mh_depth} ft.</td></tr><tr><th>Address</th><td>{street_add}</td></tr><tr><th>Flows To</th><td>{wwtp} WWTP</td></tr></table></div>',
+                    singleInfoWindow: true
                 });
 
             });