Add ScaleLine control to wms-custom-proj example

This requires using Proj4js, and configuring it with an extent.

examples/wms-custom-proj.html

@@ -46,6 +46,8 @@
 
     </div>
 
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/proj4js-compressed.js" type="text/javascript"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/1.1.0/defs/EPSG21781.js" type="text/javascript"></script>
     <script src="loader.js?id=wms-custom-proj" type="text/javascript"></script>
 
   </body>

examples/wms-custom-proj.js

@@ -6,18 +6,18 @@ goog.require('ol.Projection');
 goog.require('ol.ProjectionUnits');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
+goog.require('ol.control.ScaleLine');
+goog.require('ol.control.ScaleLineUnits');
+goog.require('ol.control.defaults');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.projection');
 goog.require('ol.source.TiledWMS');
 
 
-var epsg21781 = new ol.Projection({
+var projection = ol.projection.configureProj4jsProjection({
   code: 'EPSG:21781',
-  units: ol.ProjectionUnits.METERS,
-  // Validity extent from http://spatialreference.org
   extent: new ol.Extent(485869.5728, 76443.1884, 837076.5648, 299941.7864)
 });
-ol.projection.addProjection(epsg21781);
 
 var extent = new ol.Extent(420000, 30000, 900000, 350000);
 var layers = [
@@ -49,11 +49,16 @@ var layers = [
 ];
 
 var map = new ol.Map({
+  controls: ol.control.defaults({}, [
+    new ol.control.ScaleLine({
+      units: ol.control.ScaleLineUnits.METRIC
+    })
+  ]),
   layers: layers,
   renderers: ol.RendererHints.createFromQueryData(),
   target: 'map',
   view: new ol.View2D({
-    projection: epsg21781,
+    projection: projection,
     center: new ol.Coordinate(660000, 190000),
     zoom: 2
   })