OpenStreetMap Reprojection with ScaleLine Control

Demonstrates client-side reprojection of OpenStreetMap to NAD83 Indiana East.

This example shows client-side reprojection of OpenStreetMap to NAD83 Indiana East, including a ScaleLine control with US units.

<!DOCTYPE html>
    <title>OpenStreetMap Reprojection with ScaleLine Control</title>
    <link rel="stylesheet" href="" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src=",Element.prototype.classList,URL"></script>

    <div id="map" class="map"></div>
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import {ScaleLine} from 'ol/control.js';
      import TileLayer from 'ol/layer/Tile.js';
      import {fromLonLat, transformExtent} from 'ol/proj.js';
      import {register} from 'ol/proj/proj4.js';
      import OSM from 'ol/source/OSM.js';
      import proj4 from 'proj4';

      proj4.defs('Indiana-East', 'PROJCS["IN83-EF",GEOGCS["LL83",DATUM["NAD83",' +
          'SPHEROID["GRS1980",6378137.000,298.25722210]],PRIMEM["Greenwich",0],' +
          'UNIT["Degree",0.017453292519943295]],PROJECTION["Transverse_Mercator"],' +
          'PARAMETER["false_easting",328083.333],' +
          'PARAMETER["false_northing",820208.333],' +
          'PARAMETER["scale_factor",0.999966666667],' +
          'PARAMETER["central_meridian",-85.66666666666670],' +
          'PARAMETER["latitude_of_origin",37.50000000000000],' +

      var map = new Map({
        layers: [
          new TileLayer({
            source: new OSM()
        target: 'map',
        view: new View({
          projection: 'Indiana-East',
          center: fromLonLat([-85.685, 39.891], 'Indiana-East'),
          zoom: 7,
          extent: transformExtent([-172.54, 23.81, -47.74, 86.46],
            'EPSG:4326', 'Indiana-East'),
          minZoom: 6

      map.addControl(new ScaleLine({units: 'us'}));