+
+
+
+
+
+
+
+
Icon example
+
Example using an icon to symbolize a point.
+
+
vector, style, icon, marker, popup
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/icon.js b/examples/icon.js
new file mode 100644
index 0000000000..3bb57bdf16
--- /dev/null
+++ b/examples/icon.js
@@ -0,0 +1,91 @@
+goog.require('ol.Map');
+goog.require('ol.Overlay');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+goog.require('ol.layer.TileLayer');
+goog.require('ol.layer.Vector');
+goog.require('ol.parser.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.TileLayer({
+ source: new ol.source.TileJSON({
+ url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
+ })
+});
+
+var data = {
+ type: 'FeatureCollection',
+ features: [{
+ type: 'Feature',
+ properties: {
+ name: 'Null Island',
+ population: 4000,
+ rainfall: 500
+ },
+ geometry: {
+ type: 'Point',
+ coordinates: [0, 0]
+ }
+ }]
+};
+
+var style = new ol.style.Style({
+ symbolizers: [
+ new ol.style.Icon({
+ url: 'icon.png'
+ })
+ ]
+});
+
+var vector = new ol.layer.Vector({
+ source: new ol.source.Vector({
+ parser: new ol.parser.GeoJSON(),
+ data: data
+ }),
+ style: style
+});
+
+var map = new ol.Map({
+ layers: [raster, vector],
+ renderer: ol.RendererHint.CANVAS,
+ target: 'map',
+ view: new ol.View2D({
+ center: [0, 0],
+ zoom: 3
+ })
+});
+
+var element = document.getElementById('popup');
+
+var popup = new ol.Overlay({
+ map: map,
+ element: element
+});
+
+
+map.on('click', function(evt) {
+ map.getFeatures({
+ pixel: evt.getPixel(),
+ layers: [vector],
+ success: function(layerFeatures) {
+ var feature = layerFeatures[0][0];
+ if (feature) {
+ var geometry = feature.getGeometry();
+ var coord = geometry.getCoordinates();
+ popup.setPosition(coord);
+ $(element).popover({
+ 'placement': 'top',
+ 'html': true,
+ 'content': feature.get('name')
+ });
+ $(element).popover('show');
+ } else {
+ $(element).popover('hide');
+ }
+ }
+ });
+});
diff --git a/examples/icon.png b/examples/icon.png
new file mode 100644
index 0000000000..c17aecd91c
Binary files /dev/null and b/examples/icon.png differ