diff --git a/examples/kml-earthquakes.html b/examples/kml-earthquakes.html new file mode 100644 index 0000000000..754e2439f4 --- /dev/null +++ b/examples/kml-earthquakes.html @@ -0,0 +1,75 @@ + + + + + + + + + + + Earthquakes in KML + + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Earthquakes in KML

+

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 styleFunction that renders earthquake locations with a size relative to their magnitude. +

+

See the kml-earthquakes.js source to see how this is done.

+
+
KML, vector, style
+
+
+ +
+ + + + + + + + diff --git a/examples/kml-earthquakes.js b/examples/kml-earthquakes.js new file mode 100644 index 0000000000..5ace2b436c --- /dev/null +++ b/examples/kml-earthquakes.js @@ -0,0 +1,96 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.layer.Tile'); +goog.require('ol.layer.Vector'); +goog.require('ol.source.KML'); +goog.require('ol.source.Stamen'); +goog.require('ol.style.Circle'); +goog.require('ol.style.Fill'); +goog.require('ol.style.Stroke'); +goog.require('ol.style.Style'); + + +var styleCache = {}; +var styleFunction = function(feature, resolution) { + // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a + // standards-violating tag in each Placemark. We extract it from + // the Placemark's name instead. + var name = feature.get('name'); + var magnitude = parseFloat(name.substr(2)); + var radius = 5 + 20 * (magnitude - 5); + var style = styleCache[radius]; + if (!style) { + style = [new ol.style.Style({ + image: new ol.style.Circle({ + radius: radius, + fill: new ol.style.Fill({ + color: 'rgba(255, 153, 0, 0.4)' + }), + stroke: new ol.style.Stroke({ + color: 'rgba(255, 204, 0, 0.2)', + width: 1 + }) + }) + })]; + styleCache[radius] = style; + } + return style; +}; + +var vector = new ol.layer.Vector({ + source: new ol.source.KML({ + reprojectTo: 'EPSG:3857', + url: 'data/kml/2012_Earthquakes_Mag5.kml' + }), + styleFunction: styleFunction +}); + +var raster = new ol.layer.Tile({ + source: new ol.source.Stamen({ + layer: 'toner' + }) +}); + +var map = new ol.Map({ + layers: [raster, vector], + renderer: ol.RendererHint.CANVAS, + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 2 + }) +}); + +var info = $('#info'); +info.tooltip({ + animation: false, + trigger: 'manual' +}); + +var displayFeatureInfo = function(evt) { + var pixel = map.getEventPixel(evt.originalEvent); + info.css({ + left: pixel[0] + 'px', + top: (pixel[1] - 15) + 'px' + }); + 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) { + displayFeatureInfo(evt); +}); + +map.on('singleclick', function(evt) { + displayFeatureInfo(evt); +});