Update projection FAQ for v5

doc/faq.md

@@ -5,7 +5,7 @@ layout: doc.hbs
 
 # Frequently Asked Questions (FAQ)
 
-Certain questions arise more often than others when users ask for help. This 
+Certain questions arise more often than others when users ask for help. This
 document tries to list some of the common questions that frequently get asked,
 e.g. on [Stack Overflow](http://stackoverflow.com/questions/tagged/openlayers).
 
@@ -65,20 +65,19 @@ var map = new ol.Map({
 ```
 
 ```javascript
-// To use other projections, you have to register the projection in OpenLayers:
+// 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
 // code.
-var swissProjection = new ol.proj.Projection({
-  code: 'EPSG:21781',
-  // The extent is used to determine zoom level 0. Recommended values for a
-  // projection's validity extent can be found at https://epsg.io/.
-  extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
-  units: 'm'
-});
-ol.proj.addProjection(swissProjection);
+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);
+var swissProjection = ol.proj.get('EPSG:21781');
 
 // we can now use the projection:
 var map = new ol.Map({
@@ -287,7 +286,7 @@ been populated with features), you should use an event listener function on the
 vector.getSource().on('change', function(evt){
   var source = evt.target;
   if (source.getState() === 'ready') {
-    var numFeatures = source.getFeatures().length; 
+    var numFeatures = source.getFeatures().length;
     console.log("Count after change: " + numFeatures);
   }
 });