diff --git a/examples/vector-layer.html b/examples/vector-layer.html index b44c4ed8bb..c3a457b62e 100644 --- a/examples/vector-layer.html +++ b/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. -tags: "vector, osm, xml, loading, server" + The countries are loaded from a GeoJSON file. Information about countries is shown on hover and click. +tags: "vector, geojson" ---
 
diff --git a/examples/vector-layer.js b/examples/vector-layer.js index 26fde998e6..4495d7d889 100644 --- a/examples/vector-layer.js +++ b/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.getText().setText(resolution < 5000 ? feature.get('name') : ''); + style: function(feature) { + style.getText().setText(feature.get('name')); return style; } }); var map = new ol.Map({ - layers: [ - new ol.layer.Tile({ - source: new ol.source.OSM() - }), - vectorLayer - ], + layers: [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) { - var text = resolution < 5000 ? feature.get('name') : ''; - if (!highlightStyleCache[text]) { - 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]; + style: function(feature) { + highlightStyle.getText().setText(feature.get('name')); + return highlightStyle; } });