+
+
+
+
+
+ 
OpenLayers 3 Examples
+
+
+
+
+
+
+
+
+
diff --git a/examples/drag-and-drop.js b/examples/drag-and-drop.js
new file mode 100644
index 0000000000..dc79f50a73
--- /dev/null
+++ b/examples/drag-and-drop.js
@@ -0,0 +1,60 @@
+goog.require('ol.Map');
+goog.require('ol.RendererHint');
+goog.require('ol.View2D');
+goog.require('ol.format.KML');
+goog.require('ol.interaction');
+goog.require('ol.interaction.DragAndDrop');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.BingMaps');
+
+
+var map = new ol.Map({
+ interactions: ol.interaction.defaults().extend([
+ new ol.interaction.DragAndDrop({
+ formatConstructors: [
+ ol.format.KML
+ ]
+ })
+ ]),
+ layers: [
+ new ol.layer.Tile({
+ source: new ol.source.BingMaps({
+ imagerySet: 'Aerial',
+ key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+ })
+ })
+ ],
+ renderer: ol.RendererHint.CANVAS,
+ target: 'map',
+ view: new ol.View2D({
+ center: [0, 0],
+ zoom: 2
+ })
+});
+
+var displayFeatureInfo = function(pixel) {
+ var features = [];
+ map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+ features.push(feature);
+ });
+ if (features.length > 0) {
+ var info = [];
+ var i, ii;
+ for (i = 0, ii = features.length; i < ii; ++i) {
+ info.push(features[i].get('name'));
+ }
+ document.getElementById('info').innerHTML = info.join(', ') || ' ';
+ } else {
+ document.getElementById('info').innerHTML = ' ';
+ }
+};
+
+$(map.getViewport()).on('mousemove', function(evt) {
+ var pixel = map.getEventPixel(evt.originalEvent);
+ displayFeatureInfo(pixel);
+});
+
+map.on('singleclick', function(evt) {
+ var pixel = evt.getPixel();
+ displayFeatureInfo(pixel);
+});
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Drag-and-Drop example
+Example of using the drag-and-drop interaction. Drag and drop KML files on to the map.
+
+
+
+ See the drag-and-drop.js source to see how this is done.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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
+
+
+
+
+
+
+
+
+
+
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/kml-timezones.js b/examples/kml-timezones.js
new file mode 100644
index 0000000000..b4f475512b
--- /dev/null
+++ b/examples/kml-timezones.js
@@ -0,0 +1,102 @@
+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.Fill');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+
+/*
+ * 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.
+ */
+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})$/);
+ if (match) {
+ var hours = parseInt(match[1], 10);
+ var minutes = parseInt(match[2], 10);
+ offset = 60 * hours + minutes;
+ }
+ var date = new Date();
+ var local = new Date(date.getTime() +
+ (date.getTimezoneOffset() + offset) * 60000);
+ // offset from local noon (in hours)
+ var delta = Math.abs(12 - local.getHours() + (local.getMinutes() / 60));
+ if (delta > 12) {
+ delta = 24 - delta;
+ }
+ var opacity = 0.75 * (1 - delta / 12);
+ return [new ol.style.Style({
+ fill: new ol.style.Fill({
+ color: [0xff, 0xff, 0x33, opacity]
+ }),
+ stroke: new ol.style.Stroke({
+ color: '#ffffff'
+ })
+ })];
+};
+
+var vector = new ol.layer.Vector({
+ source: new ol.source.KML({
+ url: 'data/kml/timezones.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);
+});
diff --git a/examples/kml.html b/examples/kml.html
new file mode 100644
index 0000000000..ec852da5e2
--- /dev/null
+++ b/examples/kml.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Timezones in KML
+Demonstrates rendering timezones from KML.
+
+
+
+ This example parses a KML file and renders the features as a vector layer. The layer is given a ol.style.Style that fills timezones yellow with an opacity calculated based on the current offset to local noon.
See the kml-timezones.js source to see how this is done.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/kml.js b/examples/kml.js
new file mode 100644
index 0000000000..452e4d4853
--- /dev/null
+++ b/examples/kml.js
@@ -0,0 +1,58 @@
+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.BingMaps');
+goog.require('ol.source.KML');
+
+var raster = new ol.layer.Tile({
+ source: new ol.source.BingMaps({
+ imagerySet: 'Aerial',
+ key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
+ })
+});
+
+var vector = new ol.layer.Vector({
+ source: new ol.source.KML({
+ reprojectTo: 'EPSG:3857',
+ url: 'data/kml/2012-02-10.kml'
+ })
+});
+
+var map = new ol.Map({
+ layers: [raster, vector],
+ renderer: ol.RendererHint.CANVAS,
+ target: 'map',
+ view: new ol.View2D({
+ center: [876970.8463461736, 5859807.853963373],
+ zoom: 10
+ })
+});
+
+var displayFeatureInfo = function(pixel) {
+ var features = [];
+ map.forEachFeatureAtPixel(pixel, function(feature, layer) {
+ features.push(feature);
+ });
+ if (features.length > 0) {
+ var info = [];
+ var i, ii;
+ for (i = 0, ii = features.length; i < ii; ++i) {
+ info.push(features[i].get('name'));
+ }
+ document.getElementById('info').innerHTML = info.join(', ') || ' ';
+ } else {
+ document.getElementById('info').innerHTML = ' ';
+ }
+};
+
+$(map.getViewport()).on('mousemove', function(evt) {
+ var pixel = map.getEventPixel(evt.originalEvent);
+ displayFeatureInfo(pixel);
+});
+
+map.on('singleclick', function(evt) {
+ var pixel = evt.getPixel();
+ displayFeatureInfo(pixel);
+});
diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc
index f98b9dfbe3..8c6ea96f23 100644
--- a/src/objectliterals.jsdoc
+++ b/src/objectliterals.jsdoc
@@ -260,6 +260,12 @@
* Possible values are `barometric`, `gps`, and `none`. Default is `none`.
*/
+/**
+ * @typedef {Object} olx.format.KMLOptions
+ * @property {boolean|undefined} extractAttributes Extract attributes.
+ * @property {boolean|undefined} extractStyles Extract styles.
+ */
+
/**
* @typedef {Object} olx.interaction.DoubleClickZoomOptions
* @property {number|undefined} duration Animation duration in milliseconds. Default is `250`.
@@ -268,6 +274,19 @@
* @todo stability experimental
*/
+/**
+ * @typedef {Object} olx.interaction.DragAndDropOptions
+ * @property {boolean|undefined} fitView Fit view. Default is `true`.
+ * @property {Array.
+
+
+
+
+
+
+
+
+
+
+
+ KML example
+Example of using the KML source.
+
+
+
+ See the kml.js source to see how this is done.
+
+
+
+
+
+
+