The example loads TopoJSON geometries and uses d3 (d3.geo.path) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.
diff --git a/examples/geolocation.js b/examples/geolocation.js
index ceaee64199..0197b181bd 100644
--- a/examples/geolocation.js
+++ b/examples/geolocation.js
@@ -1,3 +1,7 @@
+// FIXME use an ol.geom.Circle to display a circle with accuracy
+// FIXME this circle will need to compensate for the pointResolution of the
+// FIXME EPSG:3857 projection
+
goog.require('ol.Geolocation');
goog.require('ol.Map');
goog.require('ol.Overlay');
diff --git a/examples/gpx.html b/examples/gpx.html
index fbb0d2b084..6e12988b2b 100644
--- a/examples/gpx.html
+++ b/examples/gpx.html
@@ -4,7 +4,6 @@
-
@@ -15,7 +14,7 @@
Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file. The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from OpenCycleMap.
This example uses a ol.source.ImageVector source. That source gets vector features from the
+ ol.source.Vector it's configured with, and draw these features to an HTML5 canvas element that
+ is then used as the image of an image layer.
Demonstrates the use of a Shape symbolizer to render earthquake locations.
- This example parses a KML file and renders the features as a vector layer. The layer is given a ol.style.Style that renders earthquake locations with a size relative to their magnitude. The style uses a ol.style.Shape symbolizer where the size comes from the magnitude attribute on the features.
+ This example parses a KML file and renders the features as a vector layer. The layer is given a styleFunction that renders earthquake locations with a size relative to their magnitude.
diff --git a/examples/kml-timezones.js b/examples/kml-timezones.js
index 8b88d27d93..6ce3ad4228 100644
--- a/examples/kml-timezones.js
+++ b/examples/kml-timezones.js
@@ -1,29 +1,26 @@
goog.require('ol.Map');
goog.require('ol.RendererHint');
goog.require('ol.View2D');
-goog.require('ol.expr');
goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector');
-goog.require('ol.parser.KML');
+goog.require('ol.source.KML');
goog.require('ol.source.Stamen');
-goog.require('ol.source.Vector');
goog.require('ol.style.Fill');
goog.require('ol.style.Stroke');
goog.require('ol.style.Style');
-/**
- * Register a function to be used in a symbolizer. Here we want the opacity
- * of polygons to be based on the offset from local noon. For example, a
- * timezone where it is currently noon would have an opacity of 0.75. And a
- * timezone where it is currently midnight would have an opacity of 0. This
- * doesn't account for daylight savings, so don't use it to plan your vacation.
+/*
+ * Compute the style of the feature. Here we want the opacity of polygons to
+ * be based on the offset from local noon. For example, a timezone where it is
+ * currently noon would have an opacity of 0.75. And a timezone where it is
+ * currently midnight would have an opacity of 0. This doesn't account for
+ * daylight savings, so don't use it to plan your vacation.
*/
-ol.expr.register('getOpacity', function() {
- var feature = this;
+var styleFunction = function(feature, resolution) {
var offset = 0;
var name = feature.get('name'); // e.g. GMT -08:30
- var match = name.match(/([-+]\d{2}):(\d{2})$/);
+ var match = name.match(/([\-+]\d{2}):(\d{2})$/);
if (match) {
var hours = parseInt(match[1], 10);
var minutes = parseInt(match[2], 10);
@@ -37,27 +34,22 @@ ol.expr.register('getOpacity', function() {
if (delta > 12) {
delta = 24 - delta;
}
- return 0.75 * (1 - delta / 12);
-});
-
-var style = new ol.style.Style({
- symbolizers: [
- new ol.style.Fill({
- color: '#ffff33',
- opacity: ol.expr.parse('getOpacity()')
+ var opacity = 0.75 * (1 - delta / 12);
+ return [new ol.style.Style({
+ fill: new ol.style.Fill({
+ color: [0xff, 0xff, 0x33, opacity]
}),
- new ol.style.Stroke({
+ stroke: new ol.style.Stroke({
color: '#ffffff'
})
- ]
-});
+ })];
+};
var vector = new ol.layer.Vector({
- source: new ol.source.Vector({
- parser: new ol.parser.KML(),
+ source: new ol.source.KML({
url: 'data/kml/timezones.kml'
}),
- style: style
+ styleFunction: styleFunction
});
var raster = new ol.layer.Tile({
@@ -87,29 +79,23 @@ var displayFeatureInfo = function(pixel) {
left: pixel[0] + 'px',
top: (pixel[1] - 15) + 'px'
});
- map.getFeatures({
- pixel: pixel,
- layers: [vector],
- success: function(layerFeatures) {
- var feature = layerFeatures[0][0];
- if (feature) {
- info.tooltip('hide')
- .attr('data-original-title', feature.get('name'))
- .tooltip('fixTitle')
- .tooltip('show');
- } else {
- info.tooltip('hide');
- }
- }
+ var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+ return feature;
});
+ if (feature) {
+ info.tooltip('hide')
+ .attr('data-original-title', feature.get('name'))
+ .tooltip('fixTitle')
+ .tooltip('show');
+ } else {
+ info.tooltip('hide');
+ }
};
$(map.getViewport()).on('mousemove', function(evt) {
- var pixel = map.getEventPixel(evt.originalEvent);
- displayFeatureInfo(pixel);
+ displayFeatureInfo(map.getEventPixel(evt.originalEvent));
});
map.on('singleclick', function(evt) {
- var pixel = evt.getPixel();
- displayFeatureInfo(pixel);
+ displayFeatureInfo(evt.getPixel());
});
diff --git a/examples/kml.html b/examples/kml.html
index 8dab466f48..2e123a4236 100644
--- a/examples/kml.html
+++ b/examples/kml.html
@@ -4,7 +4,6 @@
-
@@ -15,7 +14,7 @@
+ Layer rendering can be manipulated in precompose and postcompose event listeners.
+ These listeners get an event with a reference to the Canvas rendering context.
+ In this example, the precompose listener sets a clipping mask around the most
+ recent mouse position, giving you a spyglass effect for viewing one layer over another.
+
+
+ Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.
+
Demonstrates the use of a Shape symbolizer to render earthquake locations.
+
+
+ This example parses a KML file and renders the features as a vector layer. The layer is given a ol.style.Style that renders earthquake locations with a size relative to their magnitude. The style uses a ol.style.Shape symbolizer where the size comes from the magnitude attribute on the features.
+
OpenLayers 3 Examples