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,61 +4,77 @@ 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({
-  format: new ol.format.TopoJSON({
+  source: new ol.source.TileVector({
-    defaultProjection: 'EPSG:4326'
+    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'
   }),
-  projection: 'EPSG:3857',
+  style: new ol.style.Style({
-  tileGrid: new ol.tilegrid.XYZ({
+    fill: new ol.style.Fill({
-    maxZoom: 19
+      color: '#9db9e8'
-  }),
+    })
-  url: 'http://{a-c}.tile.openstreetmap.us/' +
+  })
-      'vectiles-highroad/{z}/{x}/{y}.topojson'
 });
 
-var styleCache = {};
+var roadStyleCache = {};
-var styleFunction = function(feature, resolution) {
+var roadLayer = new ol.layer.Vector({
-  var kind = feature.get('kind');
+  source: new ol.source.TileVector({
-  var railway = feature.get('railway');
+    format: new ol.format.TopoJSON({
-  var sort_key = feature.get('sort_key');
+      defaultProjection: 'EPSG:4326'
-  var styleKey = kind + '/' + railway + '/' + sort_key;
+    }),
-  var styleArray = styleCache[styleKey];
+    projection: 'EPSG:3857',
-  if (!styleArray) {
+    tileGrid: new ol.tilegrid.XYZ({
-    var color, width;
+      maxZoom: 19
-    if (railway) {
+    }),
-      color = '#7de';
+    url: 'http://{a-c}.tile.openstreetmap.us/' +
-      width = 1;
+        'vectiles-highroad/{z}/{x}/{y}.topojson'
-    } else {
+  }),
-      color = {
+  style: function(feature, resolution) {
-        'major_road': '#776',
+    var kind = feature.get('kind');
-        'minor_road': '#ccb',
+    var railway = feature.get('railway');
-        'highway': '#f39'
+    var sort_key = feature.get('sort_key');
-      }[kind];
+    var styleKey = kind + '/' + railway + '/' + sort_key;
-      width = kind == 'highway' ? 1.5 : 1;
+    var styleArray = roadStyleCache[styleKey];
+    if (!styleArray) {
+      var color, width;
+      if (railway) {
+        color = '#7de';
+        width = 1;
+      } else {
+        color = {
+          'major_road': '#776',
+          'minor_road': '#ccb',
+          'highway': '#f39'
+        }[kind];
+        width = kind == 'highway' ? 1.5 : 1;
+      }
+      styleArray = [new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          color: color,
+          width: width
+        }),
+        zIndex: sort_key
+      })];
+      roadStyleCache[styleKey] = styleArray;
     }
-    styleArray = [new ol.style.Style({
+    return styleArray;
-      stroke: new ol.style.Stroke({
-        color: color,
-        width: width
-      }),
-      zIndex: sort_key
-    })];
-    styleCache[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({