Merge pull request #1 from openlayers/master

Sync from original

CONTRIBUTING.md

@@ -38,7 +38,7 @@ Contributor License Agreement](https://docs.google.com/spreadsheet/viewform?form
 ## Setting up development environment
 
 You will obviously start by
-[forking](https://github.com/openlayers/ol3/fork_select) the ol3 repository.
+[forking](https://github.com/openlayers/ol3/fork) the ol3 repository.
 
 ### Travis CI
 

config/jsdoc/api/index.md

@@ -35,6 +35,5 @@ Interactions for [vector features](ol.Feature.html)
 <td><p>Changes to all [ol.Objects](ol.Object.html) can observed by calling the [object.on('propertychange')](ol.Object.html#on) method.  Listeners receive an [ol.ObjectEvent](ol.ObjectEvent.html) with information on the changed property and old value.</p>
 <td>[ol.DeviceOrientation](ol.DeviceOrientation.html)<br>
 [ol.Geolocation](ol.Geolocation.html)<br>
-[ol.Overlay](ol.Overlay.html)<br>
-[ol.FeatureOverlay](ol.FeatureOverlay.html)<br></td>
+[ol.Overlay](ol.Overlay.html)<br></td>
 </tr></table>

doc/quickstart.hbs

@@ -35,7 +35,7 @@ Below you'll find a complete working example.  Create a new file, copy in the co
           })
         ],
         view: new ol.View({
-          center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
+          center: ol.proj.fromLonLat([37.41, 8.82]),
           zoom: 4
         })
       });
@@ -89,7 +89,7 @@ The map in the application is contained in a [`<div>` HTML element](http://en.wi
       })
     ],
     view: new ol.View({
-      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
+      center: ol.proj.fromLonLat([37.41, 8.82]),
       zoom: 4
     })
   });
@@ -125,9 +125,9 @@ The next part of the `Map` object is the `View`. The view allow to specify the c
 
 ```js
     view: new ol.View({
-      center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
+      center: ol.proj.fromLonLat([37.41, 8.82]),
       zoom: 4
     })
 ```
 
-You will notice that the `center` specified is in lat/lon coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates.
+You will notice that the `center` specified is in lon/lat coordinates (EPSG:4326). Since the only layer we use is in Spherical Mercator projection (EPSG:3857), we can reproject them on the fly to be able to zoom the map on the right coordinates.

examples/jsts.html

@@ -0,0 +1,19 @@
+---
+template: example.html
+title: JSTS Example
+shortdesc: Example on how to use JSTS with OpenLayers 3.
+docs: >
+  Example showing the integration of <a href="https://github.com/bjornharrtell/jsts">JSTS</a>
+  with OpenLayers 3.
+tags: "vector, jsts, buffer"
+resources:
+  - https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/javascript.util.min.js
+  - https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/lib/0.16.0/jsts.min.js
+
+
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/jsts.js

@@ -0,0 +1,53 @@
+// NOCOMPILE
+// this example uses JSTS for which we don't have an externs file.
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.proj');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.Vector');
+
+
+var source = new ol.source.Vector();
+$.ajax('data/geojson/roads-seoul.geojson').then(function(response) {
+  var format = new ol.format.GeoJSON();
+  var features = format.readFeatures(response,
+      {featureProjection: 'EPSG:3857'});
+
+  var parser = new jsts.io.olParser();
+
+  for (var i = 0; i < features.length; i++) {
+    var feature = features[i];
+    // convert the OpenLayers geometry to a JSTS geometry
+    var jstsGeom = parser.read(feature.getGeometry());
+
+    // create a buffer of 40 meters around each line
+    var buffered = jstsGeom.buffer(40);
+
+    // convert back from JSTS and replace the geometry on the feature
+    feature.setGeometry(parser.write(buffered));
+  }
+
+  source.addFeatures(features);
+});
+var vectorLayer = new ol.layer.Vector({
+  source: source
+});
+
+var rasterLayer = new ol.layer.Tile({
+  source: new ol.source.MapQuest({
+    layer: 'osm'
+  })
+});
+
+var map = new ol.Map({
+  layers: [rasterLayer, vectorLayer],
+  target: document.getElementById('map'),
+  view: new ol.View({
+    center: ol.proj.fromLonLat([126.979293, 37.528787]),
+    zoom: 15
+  })
+});

examples/turf.html

@@ -0,0 +1,19 @@
+---
+template: example.html
+title: turf.js Example
+shortdesc: Example on how to use turf.js with OpenLayers 3.
+docs: >
+  Example showing the integration of <a href="http://turfjs.org">turf.js</a>
+  with OpenLayers 3. The turf.js function <code>along</code> is used to
+  display a marker every 200 meters along a street.
+tags: "vector, turfjs, along, distance"
+resources:
+  - https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js
+
+
+---
+<div class="row-fluid">
+  <div class="span12">
+    <div id="map" class="map"></div>
+  </div>
+</div>

examples/turf.js

@@ -0,0 +1,57 @@
+// NOCOMPILE
+// this example uses turf.js for which we don't have an externs file.
+goog.require('ol.Feature');
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.format.GeoJSON');
+goog.require('ol.layer.Tile');
+goog.require('ol.layer.Vector');
+goog.require('ol.proj');
+goog.require('ol.source.MapQuest');
+goog.require('ol.source.Vector');
+
+
+var source = new ol.source.Vector();
+$.ajax('data/geojson/roads-seoul.geojson').then(function(response) {
+  var format = new ol.format.GeoJSON();
+  var features = format.readFeatures(response);
+  var street = features[0];
+
+  // convert to a turf.js feature
+  var turfLine = format.writeFeatureObject(street);
+
+  // show a marker every 200 meters
+  var distance = 0.2;
+
+  // get the line length in kilometers
+  var length = turf.lineDistance(turfLine, 'kilometers');
+  for (var i = 1; i <= length / distance; i++) {
+    var turfPoint = turf.along(turfLine, i * distance, 'kilometers');
+
+    // convert the generated point to a OpenLayers feature
+    var marker = format.readFeature(turfPoint);
+    marker.getGeometry().transform('EPSG:4326', 'EPSG:3857');
+    source.addFeature(marker);
+  }
+
+  street.getGeometry().transform('EPSG:4326', 'EPSG:3857');
+  source.addFeature(street);
+});
+var vectorLayer = new ol.layer.Vector({
+  source: source
+});
+
+var rasterLayer = new ol.layer.Tile({
+  source: new ol.source.MapQuest({
+    layer: 'osm'
+  })
+});
+
+var map = new ol.Map({
+  layers: [rasterLayer, vectorLayer],
+  target: document.getElementById('map'),
+  view: new ol.View({
+    center: ol.proj.fromLonLat([126.980366, 37.526540]),
+    zoom: 15
+  })
+});

externs/olx.js

@@ -4241,7 +4241,7 @@ olx.source.ImageMapGuideOptions.prototype.projection;
 
 /**
  * Ratio. `1` means image requests are the size of the map viewport, `2` means
- * twice the width and height of the map viewport, and so on. Must be `1` or 
+ * twice the width and height of the map viewport, and so on. Must be `1` or
  * higher. Default is `1`.
  * @type {number|undefined}
  * @api stable
@@ -4524,7 +4524,7 @@ olx.source.ImageVectorOptions.prototype.projection;
 
 /**
  * Ratio. 1 means canvases are the size of the map viewport, 2 means twice the
- * width and height of the map viewport, and so on. Must be `1` or higher. 
+ * width and height of the map viewport, and so on. Must be `1` or higher.
  * Default is `1.5`.
  * @type {number|undefined}
  * @api
@@ -4708,7 +4708,7 @@ olx.source.ImageWMSOptions.prototype.projection;
 
 /**
  * Ratio. `1` means image requests are the size of the map viewport, `2` means
- * twice the width and height of the map viewport, and so on. Must be `1` or 
+ * twice the width and height of the map viewport, and so on. Must be `1` or
  * higher. Default is `1.5`.
  * @type {number|undefined}
  * @api stable
@@ -6216,7 +6216,7 @@ olx.style.TextOptions.prototype.textBaseline;
 
 
 /**
- * Fill style.
+ * Fill style. If none is provided, we'll use a dark fill-style (#333).
  * @type {ol.style.Fill|undefined}
  * @api
  */

src/ol/style/textstyle.js

@@ -1,6 +1,9 @@
 goog.provide('ol.style.Text');
 
 
+goog.require('ol.style.Fill');
+
+
 
 /**
  * @classdesc
@@ -54,7 +57,8 @@ ol.style.Text = function(opt_options) {
    * @private
    * @type {ol.style.Fill}
    */
-  this.fill_ = goog.isDef(options.fill) ? options.fill : null;
+  this.fill_ = goog.isDef(options.fill) ? options.fill :
+      new ol.style.Fill({color: ol.style.Text.DEFAULT_FILL_COLOR_});
 
   /**
    * @private
@@ -76,6 +80,16 @@ ol.style.Text = function(opt_options) {
 };
 
 
+/**
+ * The default fill color to use if no fill was set at construction time; a
+ * blackish `#333`.
+ *
+ * @const {string}
+ * @private
+ */
+ol.style.Text.DEFAULT_FILL_COLOR_ = '#333';
+
+
 /**
  * Get the font name.
  * @return {string|undefined} Font.

test/spec/ol/style/textstyle.test.js

@@ -0,0 +1,31 @@
+goog.provide('ol.test.style.Text');
+
+
+describe('ol.style.Text', function() {
+
+  describe('#constructor', function() {
+
+    it('uses a default fill style if none passed', function() {
+      var style = new ol.style.Text();
+      expect(style.getFill().getColor()).to.be('#333');
+    });
+
+    it('uses a provided fill style if one passed', function() {
+      var style = new ol.style.Text({
+        fill: new ol.style.Fill({color: '#123456'})
+      });
+      expect(style.getFill().getColor()).to.be('#123456');
+    });
+
+    it('can always be resetted to no color', function() {
+      var style = new ol.style.Text();
+      style.getFill().setColor();
+      expect(style.getFill().getColor()).to.be(undefined);
+    });
+
+  });
+
+});
+
+goog.require('ol.style.Fill');
+goog.require('ol.style.Text');