From 82e03ea5088a3f7ddda856345c1bd76ca808fc36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 26 Nov 2013 16:32:03 +0100 Subject: [PATCH] Add an icon example --- {old/examples => examples}/icon.html | 6 +- examples/icon.js | 56 ++++++++++++++++ old/examples/icon.js | 95 ---------------------------- 3 files changed, 57 insertions(+), 100 deletions(-) rename {old/examples => examples}/icon.html (92%) create mode 100644 examples/icon.js delete mode 100644 old/examples/icon.js diff --git a/old/examples/icon.html b/examples/icon.html similarity index 92% rename from old/examples/icon.html rename to examples/icon.html index 0471245a5d..f9c2d645bc 100644 --- a/old/examples/icon.html +++ b/examples/icon.html @@ -13,9 +13,6 @@ #map { position: relative; } - #popup { - padding-bottom: 45px; - } @@ -33,7 +30,6 @@
-
@@ -46,7 +42,7 @@

See the icon.js source to see how this is done.

-
vector, style, icon, marker, popup
+
vector, style, icon, marker
diff --git a/examples/icon.js b/examples/icon.js new file mode 100644 index 0000000000..97ccd1d67f --- /dev/null +++ b/examples/icon.js @@ -0,0 +1,56 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.format.GeoJSON'); +goog.require('ol.icon'); +goog.require('ol.layer.Tile'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.TileJSON'); +goog.require('ol.source.Vector'); +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 vectorSource = new ol.source.Vector(); + +new ol.format.GeoJSON().readObject({ + 'type': 'FeatureCollection', + 'features': [{ + 'type': 'Feature', + 'properties': { + 'name': 'Null Island', + 'population': 4000, + 'rainfall': 500 + }, + 'geometry': { + 'type': 'Point', + 'coordinates': [0, 0] + } + }] +}, vectorSource.addFeature, vectorSource); + +var styleArray = [new ol.style.Style({ + image: ol.icon.renderIcon('data/icon.png') +})]; + +var vector = new ol.layer.Vector({ + source: vectorSource, + styleFunction: function(feature, resolution) { + return styleArray; + } +}); + +var map = new ol.Map({ + layers: [raster, vector], + renderer: ol.RendererHint.CANVAS, + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 3 + }) +}); diff --git a/old/examples/icon.js b/old/examples/icon.js deleted file mode 100644 index 07ef45ce88..0000000000 --- a/old/examples/icon.js +++ /dev/null @@ -1,95 +0,0 @@ -goog.require('ol.Map'); -goog.require('ol.Overlay'); -goog.require('ol.OverlayPositioning'); -goog.require('ol.RendererHint'); -goog.require('ol.View2D'); -goog.require('ol.layer.Tile'); -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.Tile({ - 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: 'data/icon.png', - yOffset: -22 - }) - ] -}); - -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({ - element: element, - positioning: ol.OverlayPositioning.BOTTOM_CENTER, - stopEvent: false -}); -map.addOverlay(popup); - - -map.on('singleclick', 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('destroy'); - } - } - }); -});