From 581b2d345d844d89a9402a5e08bde0d404ab54a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Wed, 12 Feb 2014 14:26:00 +0100 Subject: [PATCH] Show how to use ol.Feature#setStyleFunction in the icon example --- examples/icon.js | 52 +++++++++++++++++++++++------------------------- 1 file changed, 25 insertions(+), 27 deletions(-) diff --git a/examples/icon.js b/examples/icon.js index 8a70c7a9b7..7b1f6af21b 100644 --- a/examples/icon.js +++ b/examples/icon.js @@ -1,18 +1,21 @@ +goog.require('ol.Feature'); goog.require('ol.Map'); goog.require('ol.Overlay'); goog.require('ol.View2D'); +goog.require('ol.geom.Point'); goog.require('ol.layer.Tile'); goog.require('ol.layer.Vector'); -goog.require('ol.source.GeoJSON'); goog.require('ol.source.TileJSON'); +goog.require('ol.source.Vector'); goog.require('ol.style.Icon'); goog.require('ol.style.Style'); -var raster = new ol.layer.Tile({ - source: new ol.source.TileJSON({ - url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp' - }) +var iconFeature = new ol.Feature({ + geometry: new ol.geom.Point([0, 0]), + name: 'Null Island', + population: 4000, + rainfall: 500 }); var styleArray = [new ol.style.Style({ @@ -24,31 +27,26 @@ var styleArray = [new ol.style.Style({ })) })]; -var vector = new ol.layer.Vector({ - source: new ol.source.GeoJSON(/** @type {olx.source.GeoJSONOptions} */ ({ - object: { - 'type': 'FeatureCollection', - 'features': [{ - 'type': 'Feature', - 'properties': { - 'name': 'Null Island', - 'population': 4000, - 'rainfall': 500 - }, - 'geometry': { - 'type': 'Point', - 'coordinates': [0, 0] - } - }] - } - })), - styleFunction: function(feature, resolution) { - return styleArray; - } +iconFeature.setStyleFunction(function(resolution) { + return styleArray; +}); + +var vectorSource = new ol.source.Vector({ + features: [iconFeature] +}); + +var vectorLayer = new ol.layer.Vector({ + source: vectorSource +}); + +var rasterLayer = new ol.layer.Tile({ + source: new ol.source.TileJSON({ + url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp' + }) }); var map = new ol.Map({ - layers: [raster, vector], + layers: [rasterLayer, vectorLayer], renderer: 'canvas', target: document.getElementById('map'), view: new ol.View2D({