From e403f10de522aa33d8edcaa82cada035286fb3a2 Mon Sep 17 00:00:00 2001 From: Tom Payne Date: Thu, 7 Nov 2013 15:07:11 +0100 Subject: [PATCH] Add GeoJSON example --- examples/geojson.html | 50 +++++++++++++++++++++++++++++++++++++++ examples/geojson.js | 54 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 104 insertions(+) create mode 100644 examples/geojson.html create mode 100644 examples/geojson.js diff --git a/examples/geojson.html b/examples/geojson.html new file mode 100644 index 0000000000..1a2dc82bb4 --- /dev/null +++ b/examples/geojson.html @@ -0,0 +1,50 @@ + + + + + + + + + + + GeoJSON example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Simple example

+

Example of GeoJSON features.

+
+

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

+
+
geojson, openstreetmap
+
+ +
+ +
+ + + + + + diff --git a/examples/geojson.js b/examples/geojson.js new file mode 100644 index 0000000000..7e4cc090a5 --- /dev/null +++ b/examples/geojson.js @@ -0,0 +1,54 @@ +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.GeoJSON'); +goog.require('ol.source.OSM'); + +var geoJSONSource = new ol.source.GeoJSON( + /** @type {ol.source.GeoJSONOptions} */ ({ + geoJSON: { + 'type': 'FeatureCollection', + features: [ + { + 'type': 'Feature', + 'geometry': { + 'type': 'Point', + 'coordinates': [0, 0] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'LineString', + 'coordinates': [[-1e7, -1e7], [1e7, 1e7]] + } + }, + { + 'type': 'Feature', + 'geometry': { + 'type': 'LineString', + 'coordinates': [[-1e7, 1e7], [1e7, -1e7]] + } + } + ] + } + })); + +var map = new ol.Map({ + layers: [ + new ol.layer.Tile({ + source: new ol.source.OSM() + }), + new ol.layer.Vector({ + source: geoJSONSource + }) + ], + renderer: ol.RendererHint.CANVAS, + target: 'map', + view: new ol.View2D({ + center: [0, 0], + zoom: 2 + }) +});