Add an icon example

2013-11-26 16:32:03 +01:00
parent 9365c227ab
commit 82e03ea508
3 changed files with 57 additions and 100 deletions
--- a/old/examples/icon.html
+++ b/old/examples/icon.html
@@ -13,9 +13,6 @@
      #map {
        position: relative;
      }
-      #popup {
-        padding-bottom: 45px;
-      }
    </style>
  </head>
  <body>
@@ -33,7 +30,6 @@
      <div class="row-fluid">
        <div class="span12">
          <div id="map" class="map">
-            <div id="popup"></div>
          </div>
        </div>        
      </div>
@@ -46,7 +42,7 @@
          <div id="docs">
            <p>See the <a href="icon.js" target="_blank">icon.js source</a> to see how this is done.</p>
          </div>
-          <div id="tags">vector, style, icon, marker, popup</div>
+          <div id="tags">vector, style, icon, marker</div>
        </div>

      </div>
--- a/examples/icon.js
+++ 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
+  })
+});
--- a/old/examples/icon.js
+++ b/old/examples/icon.js
@@ -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');
-      }
-    }
-  });
-});