From 9c824584b3fac91023a1c9cad3d2cfc5a271872b Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Mon, 26 Aug 2013 16:56:15 -0600 Subject: [PATCH] Example using an icon symbolizer and displaying a popup I'm adding this example to demonstrate a few things that should change: * the icon symbolizer should accept xOffset and yOffset in pixels * the `ol.geom.Geometry.prototype.getCoordinates` method should be exported * overlays should have a `panIntoView` method --- examples/icon.html | 67 +++++++++++++++++++++++++++++++++ examples/icon.js | 91 +++++++++++++++++++++++++++++++++++++++++++++ examples/icon.png | Bin 0 -> 3903 bytes 3 files changed, 158 insertions(+) create mode 100644 examples/icon.html create mode 100644 examples/icon.js create mode 100644 examples/icon.png diff --git a/examples/icon.html b/examples/icon.html new file mode 100644 index 0000000000..0fabb2a712 --- /dev/null +++ b/examples/icon.html @@ -0,0 +1,67 @@ + + + + + + + + + + + Vector Icon Example + + + + +
+
+
+ OpenLayers 3 Examples +
    +
    • +
    • +
    • +
+
+
+
+ +
+ +
+
+
+ + +
+ +
+

Icon example

+

Example using an icon to symbolize a point.

+
+

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

+
+
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 0000000000000000000000000000000000000000..c17aecd91c013e65ec01e407da375135a3440d82 GIT binary patch literal 3903 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 piBy1((8>Rgc%w{xkpv(FFy