Uncheck heavy layers by default

examples/tile-vector.html

@@ -12,6 +12,7 @@
     <style>
       #map {
         max-width: 600px;
+        margin: 0 auto;
       }
     </style>
   </head>
@@ -41,6 +42,16 @@
           <div id="docs">
             <p>See the <a href="tile-vector.js" target="_blank">tile-vector.js source</a> to see how this is done.</p>
           </div>
+          <div class="alert">
+            <strong>Warning</strong> Map is becoming unresponsive with too many layers.
+          </div>
+          <fieldset>
+            <legend>Layers</legend>
+            <label class="checkbox"><input type="checkbox" id="landuse"/> Landuse</label>
+            <label class="checkbox"><input type="checkbox" id="buildings"/> Buildings</label>
+            <label class="checkbox"><input type="checkbox" id="water" checked/> Water</label>
+            <label class="checkbox"><input type="checkbox" id="roads" checked/> Roads</label>
+          </fieldset>
           <div id="tags">tile-vector, openstreetmap</div>
         </div>
 

examples/tile-vector.js

@@ -77,10 +77,10 @@ var buildingStyle = [
   new ol.style.Style({
     fill: new ol.style.Fill({
       color: '#666',
-      opacity: .4
+      opacity: 0.4
     }),
     stroke: new ol.style.Stroke({
-      color: '#FFF',
+      color: '#444',
       width: 1
     })
   })
@@ -97,8 +97,9 @@ var buildingLayer = new ol.layer.Vector({
     url: 'http://{a-c}.tile.openstreetmap.us/' +
         'vectiles-buildings/{z}/{x}/{y}.topojson'
   }),
+  visible: false,
   style: function(f, resolution) {
-    return (resolution < 5) ? buildingStyle : [];
+    return (resolution < 10) ? buildingStyle : [];
   }
 });
 
@@ -115,6 +116,7 @@ var landuseLayer = new ol.layer.Vector({
     url: 'http://{a-c}.tile.openstreetmap.us/' +
         'vectiles-land-usages/{z}/{x}/{y}.topojson'
   }),
+  visible: false,
   style: function(feature, resolution) {
     var kind = feature.get('kind');
     var styleKey = kind;
@@ -140,7 +142,7 @@ var landuseLayer = new ol.layer.Vector({
         }),
         fill: new ol.style.Fill({
           color: color,
-          opacity: .5
+          opacity: 0.5
         })
       })];
       landuseStyleCache[styleKey] = styleArray;
@@ -159,3 +161,13 @@ var map = new ol.Map({
     zoom: 15
   })
 });
+
+$('input[type=checkbox]').on('change', function() {
+  var layer = {
+    landuse: landuseLayer,
+    buildings: buildingLayer,
+    water: waterLayer,
+    roads: roadLayer
+  }[$(this).attr('id')];
+  layer.setVisible(!layer.getVisible());
+});