Merge pull request #8747 from fredj/faq_modules

Update doc/faq.md

doc/faq.md

@@ -54,9 +54,12 @@ The projection of your map can be set through the `view`-property. Here are some
 examples:
 
 ```javascript
+import Map from 'ol/Map';
+import View from 'ol/View';
+
 // OpenLayers comes with support for the World Geodetic System 1984, EPSG:4326:
-var map = new ol.Map({
+const map = new Map({
-  view: new ol.View({
+  view: new View({
     projection: 'EPSG:4326'
     // other view properties like map center etc.
   })
@@ -65,23 +68,29 @@ var map = new ol.Map({
 ```
 
 ```javascript
+import Map from 'ol/Map';
+import View from 'ol/View';
+import proj4 from 'proj4';
+import {register} from 'ol/proj/proj4';
+import {get as getProjection} from 'ol/proj';
+
 // To use other projections, you have to register the projection in OpenLayers.
 // This can easily be done with [https://proj4js.org](proj4)
 //
 // By default OpenLayers does not know about the EPSG:21781 (Swiss) projection.
 // So we create a projection instance for EPSG:21781 and pass it to
-// ol.proj.addProjection to make it available to the library for lookup by its
+// register to make it available to the library for lookup by its
 // code.
 proj4.defs('EPSG:21781',
   '+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 ' +
   '+x_0=600000 +y_0=200000 +ellps=bessel ' +
   '+towgs84=660.077,13.551,369.344,2.484,1.783,2.939,5.66 +units=m +no_defs');
-ol.proj.proj4.register(proj4);
+register(proj4);
-var swissProjection = ol.proj.get('EPSG:21781');
+const swissProjection = getProjection('EPSG:21781');
 
 // we can now use the projection:
-var map = new ol.Map({
+const map = new Map({
-  view: new ol.View({
+  view: new View({
     projection: swissProjection
     // other view properties like map center etc.
   })
@@ -104,15 +113,20 @@ coordinates for the center have to be provided in that projection. Chances are
 that your map looks like this:
 
 ```javascript
-var washingtonLonLat = [-77.036667, 38.895];
+import Map from 'ol/Map';
-var map = new ol.Map({
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+
+const washingtonLonLat = [-77.036667, 38.895];
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: washingtonLonLat,
     zoom: 12
   })
@@ -128,31 +142,38 @@ The solution is easy: Provide the coordinates projected into Web Mercator.
 OpenLayers has some helpful utility methods to assist you:
 
 ```javascript
-var washingtonLonLat = [-77.036667, 38.895];
+import Map from 'ol/Map';
-var washingtonWebMercator = ol.proj.fromLonLat(washingtonLonLat);
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import {fromLonLat} from 'ol/proj';
 
-var map = new ol.Map({
+const washingtonLonLat = [-77.036667, 38.895];
+const washingtonWebMercator = fromLonLat(washingtonLonLat);
+
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: washingtonWebMercator,
     zoom: 8
   })
 });
 ```
 
-The method `ol.proj.fromLonLat()` is available from version 3.5 onwards.
+The method `fromLonLat()` is available from version 3.5 onwards.
 
 If you told OpenLayers about a custom projection (see above), you can use the
 following method to transform a coordinate from WGS84 to your projection:
 
 ```javascript
+import {transform} from 'ol/proj';
 // assuming that OpenLayers knows about EPSG:21781, see above
-var swissCoord = ol.proj.transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781');
+const swissCoord = transform([8.23, 46.86], 'EPSG:4326', 'EPSG:21781');
 ```
 
 
@@ -189,18 +210,24 @@ So the next step would be to put the decimal coordinates into an array and use
 it as center:
 
 ```javascript
-var schladming = [47.394167, 13.689167]; // caution partner, read on...
+import Map from 'ol/Map';
-// since we are using OSM, we have to transform the coordinates...
+import View from 'ol/View';
-var schladmingWebMercator = ol.proj.fromLonLat(schladming);
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import {fromLonLat} from 'ol/proj';
 
-var map = new ol.Map({
+const schladming = [47.394167, 13.689167]; // caution partner, read on...
+// since we are using OSM, we have to transform the coordinates...
+const schladmingWebMercator = fromLonLat(schladming);
+
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: schladmingWebMercator,
     zoom: 9
   })
@@ -219,18 +246,24 @@ e.g. try to change the map center.
 Ok, then let's flip the coordinates:
 
 ```javascript
-var schladming = [13.689167, 47.394167]; // longitude first, then latitude
+import Map from 'ol/Map';
-// since we are using OSM, we have to transform the coordinates...
+import View from 'ol/View';
-var schladmingWebMercator = ol.proj.fromLonLat(schladming);
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+import {fromLonLat} from 'ol/proj';
 
-var map = new ol.Map({
+const schladming = [13.689167, 47.394167]; // longitude first, then latitude
+// since we are using OSM, we have to transform the coordinates...
+const schladmingWebMercator = fromLonLat(schladming);
+
+const map = new Map({
   layers: [
-    new ol.layer.Tile({
+    new TileLayer({
-      source: new ol.source.OSM()
+      source: new OSM()
     })
   ],
   target: 'map',
-  view: new ol.View({
+  view: new View({
     center: schladmingWebMercator,
     zoom: 9
   })
@@ -244,7 +277,7 @@ first, and then the latitude. This behaviour is the same as we had in OpenLayers
 2, and it actually makes sense because of the natural axis order in WGS84.
 
 If you cannot remember the correct order, just have a look at the method name
-we used: `ol.proj.fromLonLat`; even there we hint that we expect longitude
+we used: `fromLonLat`; even there we hint that we expect longitude
 first, and then latitude.
 
 
@@ -254,8 +287,11 @@ Suppose you want to load a KML file and display the contained features on the
 map. Code like the following could be used:
 
 ```javascript
-var vector = new ol.layer.Vector({
+import VectorLayer from 'ol/layer/Vector';
-  source: new ol.source.KML({
+import KMLSource from 'ol/source/KML';
+
+const vector = new VectorLayer({
+  source: new KMLSource({
     projection: 'EPSG:3857',
     url: 'data/kml/2012-02-10.kml'
   })
@@ -266,13 +302,16 @@ You may ask yourself how many features are in that KML, and try something like
 the following:
 
 ```javascript
-var vector = new ol.layer.Vector({
+import VectorLayer from 'ol/layer/Vector';
-  source: new ol.source.KML({
+import KMLSource from 'ol/source/KML';
+
+const vector = new VectorLayer({
+  source: new KMLSource({
     projection: 'EPSG:3857',
     url: 'data/kml/2012-02-10.kml'
   })
 });
-var numFeatures = vector.getSource().getFeatures().length;
+const numFeatures = vector.getSource().getFeatures().length;
 console.log("Count right after construction: " + numFeatures);
 ```
 
@@ -284,9 +323,9 @@ been populated with features), you should use an event listener function on the
 
 ```javascript
 vector.getSource().on('change', function(evt){
-  var source = evt.target;
+  const source = evt.target;
   if (source.getState() === 'ready') {
-    var numFeatures = source.getFeatures().length;
+    const numFeatures = source.getFeatures().length;
     console.log("Count after change: " + numFeatures);
   }
 });
@@ -315,16 +354,17 @@ map.renderSync();
 
 ## Why are my features not found?
 
-You are using `ol.Map#forEachFeatureAtPixel` or `ol.Map#hasFeatureAtPixel`, but
+You are using `Map#forEachFeatureAtPixel` or `Map#hasFeatureAtPixel`, but
 it sometimes does not work for large icons or labels? The *hit detection* only
 checks features that are within a certain distance of the given position. For large
 icons, the actual geometry of a feature might be too far away and is not considered.
 
-In this case, set the `renderBuffer` property of `ol.layer.Vector` (the default
+In this case, set the `renderBuffer` property of `VectorLayer` (the default value is 100px):
-value is 100px):
 
 ```javascript
-var vectorLayer = new ol.layer.Vector({
+import VectorLayer from 'ol/layer/Vector';
+
+const vectorLayer = new VectorLayer({
   ...
   renderBuffer: 200
 });