Simplify vector-layer example and always render labels

examples/vector-layer.html

@@ -3,8 +3,8 @@ layout: example.html
 title: Vector Layer
 shortdesc: Example of a countries vector layer with country information.
 docs: >
-  The countries are loaded from a GeoJSON file. Information about countries is shown on hover and click. Zoom in a few times to see country name labels.
+  The countries are loaded from a GeoJSON file. Information about countries is shown on hover and click.
-tags: "vector, osm, xml, loading, server"
+tags: "vector, geojson"
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

examples/vector-layer.js

@@ -1,9 +1,7 @@
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.format.GeoJSON');
-goog.require('ol.layer.Tile');
 goog.require('ol.layer.Vector');
-goog.require('ol.source.OSM');
 goog.require('ol.source.Vector');
 goog.require('ol.style.Fill');
 goog.require('ol.style.Stroke');
@@ -36,19 +34,14 @@ var vectorLayer = new ol.layer.Vector({
     url: 'data/geojson/countries.geojson',
     format: new ol.format.GeoJSON()
   }),
-  style: function(feature, resolution) {
+  style: function(feature) {
-    style.getText().setText(resolution < 5000 ? feature.get('name') : '');
+    style.getText().setText(feature.get('name'));
     return style;
   }
 });
 
 var map = new ol.Map({
-  layers: [
+  layers: [vectorLayer],
-    new ol.layer.Tile({
-      source: new ol.source.OSM()
-    }),
-    vectorLayer
-  ],
   target: 'map',
   view: new ol.View({
     center: [0, 0],
@@ -56,36 +49,32 @@ var map = new ol.Map({
   })
 });
 
-var highlightStyleCache = {};
+var highlightStyle = new ol.style.Style({
+  stroke: new ol.style.Stroke({
+    color: '#f00',
+    width: 1
+  }),
+  fill: new ol.style.Fill({
+    color: 'rgba(255,0,0,0.1)'
+  }),
+  text: new ol.style.Text({
+    font: '12px Calibri,sans-serif',
+    fill: new ol.style.Fill({
+      color: '#000'
+    }),
+    stroke: new ol.style.Stroke({
+      color: '#f00',
+      width: 3
+    })
+  })
+});
 
 var featureOverlay = new ol.layer.Vector({
   source: new ol.source.Vector(),
   map: map,
-  style: function(feature, resolution) {
+  style: function(feature) {
-    var text = resolution < 5000 ? feature.get('name') : '';
+    highlightStyle.getText().setText(feature.get('name'));
-    if (!highlightStyleCache[text]) {
+    return highlightStyle;
-      highlightStyleCache[text] = new ol.style.Style({
-        stroke: new ol.style.Stroke({
-          color: '#f00',
-          width: 1
-        }),
-        fill: new ol.style.Fill({
-          color: 'rgba(255,0,0,0.1)'
-        }),
-        text: new ol.style.Text({
-          font: '12px Calibri,sans-serif',
-          text: text,
-          fill: new ol.style.Fill({
-            color: '#000'
-          }),
-          stroke: new ol.style.Stroke({
-            color: '#f00',
-            width: 3
-          })
-        })
-      });
-    }
-    return highlightStyleCache[text];
   }
 });