Add a polygon layer and tweak the style of the tile-vector example

examples/tile-vector.html

@@ -24,7 +24,7 @@
 
       <div class="row-fluid">
         <div class="span12">
-          <div id="map" class="map"></div>
+          <div id="map" class="map" style="background: white;"></div>
         </div>
       </div>
 

examples/tile-vector.js

@@ -4,11 +4,33 @@ goog.require('ol.format.TopoJSON');
 goog.require('ol.layer.Vector');
 goog.require('ol.proj');
 goog.require('ol.source.TileVector');
+goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 goog.require('ol.tilegrid.XYZ');
 
-var vectorSource = new ol.source.TileVector({
+var waterLayer = new ol.layer.Vector({
+  source: new ol.source.TileVector({
+    format: new ol.format.TopoJSON({
+      defaultProjection: 'EPSG:4326'
+    }),
+    projection: 'EPSG:3857',
+    tileGrid: new ol.tilegrid.XYZ({
+      maxZoom: 19
+    }),
+    url: 'http://{a-c}.tile.openstreetmap.us/' +
+        'vectiles-water-areas/{z}/{x}/{y}.topojson'
+  }),
+  style: new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: '#9db9e8'
+    })
+  })
+});
+
+var roadStyleCache = {};
+var roadLayer = new ol.layer.Vector({
+  source: new ol.source.TileVector({
     format: new ol.format.TopoJSON({
       defaultProjection: 'EPSG:4326'
     }),
@@ -18,15 +40,13 @@ var vectorSource = new ol.source.TileVector({
     }),
     url: 'http://{a-c}.tile.openstreetmap.us/' +
         'vectiles-highroad/{z}/{x}/{y}.topojson'
-});
+  }),
-
+  style: function(feature, resolution) {
-var styleCache = {};
-var styleFunction = function(feature, resolution) {
     var kind = feature.get('kind');
     var railway = feature.get('railway');
     var sort_key = feature.get('sort_key');
     var styleKey = kind + '/' + railway + '/' + sort_key;
-  var styleArray = styleCache[styleKey];
+    var styleArray = roadStyleCache[styleKey];
     if (!styleArray) {
       var color, width;
       if (railway) {
@@ -47,18 +67,14 @@ var styleFunction = function(feature, resolution) {
         }),
         zIndex: sort_key
       })];
-    styleCache[styleKey] = styleArray;
+      roadStyleCache[styleKey] = styleArray;
     }
     return styleArray;
-};
+  }
-
-var vector = new ol.layer.Vector({
-  source: vectorSource,
-  style: styleFunction
 });
 
 var map = new ol.Map({
-  layers: [vector],
+  layers: [waterLayer, roadLayer],
   renderer: 'canvas',
   target: document.getElementById('map'),
   view: new ol.View2D({