How to show the routes on the map using coordinates using Ordinance Survey map leisure layer

Question

Here i want to create a map using ordnance survey leisure layer. Ordnance Survey (OS) is the national mapping agency for Great Britain. They produce digital map data, online route planning and sharing services and mobile apps, plus many other location-based products for business, government and consumers. Ordnance Survey mapping is usually classified as either "large-scale" (in other words, more detailed) or "small-scale".

For that I'm using "EPSG:27700". And i have able to create the routes on the map successfully and get the coordinates. But when I'm using the same coordinates to view the routes on the map, then it doesn't show anything i.e., coordinates are not reflecting on the map.

var apiKey = 'xxxxxxxxxxxxxxxxxxxxxxxxIKMO';

var serviceUrl = 'https://osdatahubapi.os.uk/OSMapsAPI/wmts/v1';

var parser = new ol.format.WMTSCapabilities();
var map;

// Setup the EPSG:27700 (British National Grid) projection.
proj4.defs("EPSG:27700", "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.999601 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.060,0.1502,0.2470,0.8421,-20.4894 +datum=OSGB36 +units=m +no_defs");
ol.proj.proj4.register(proj4);
var bng = ol.proj.get('EPSG:27700');
bng.setExtent([-238375.0, 0.0, 900000.0, 1376256.0]);


// console.log(ol.proj.fromLongLat(points, 'EPSG:27700'));

fetch(serviceUrl + '?key=' + apiKey + '&service=WMTS&request=GetCapabilities&version=2.0.0')
  .then(response => response.text())
  .then(text => {
    var result = parser.read(text);
    var options = ol.source.WMTS.optionsFromCapabilities(result, {
      layer: 'Leisure_27700'
    });

    var source = new ol.source.WMTS(options);
    var layer = new ol.layer.Tile({
      source: source
    });

    var viewOptions = {
      projection: options.projection,
      resolutions: options.tileGrid.getResolutions(),
      center: [337297, 503695],
      zoom: 7
    }

    // Set the default center of the map view.
    map = new ol.Map({
      layers: [layer],
      target: 'map',
      view: new ol.View(viewOptions)
    });

    var cord = new Array(['336555.3571805824', '503945.0759345037'], ['336630.3808312133', '504033.339052893'], ['336895.1701863812', '504055.4048324903'], ['337314.41999873036', '503945.0759345037'], ['337250.42923789815', '503808.2681010003']);
    var points = new Array();
    cord.forEach(function(element) {
      points.push(ol.proj.transform([parseFloat(element[1]), parseFloat(element[0])], 'EPSG:3857', 'EPSG:27700'));
    });

    var linieStyle = [
      // linestring
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: '#2ECC40',
          width: 5
        })
      })
    ];

    //create the line       
    var linie = new ol.layer.Vector({
      source: new ol.source.Vector({
        features: [new ol.Feature({
          geometry: new ol.geom.LineString(points)
        })]
      })
    });

    map.addLayer(linie);

    var features = new ol.Collection();
    var featureOverlay = new ol.layer.Vector({
      source: new ol.source.Vector({
        features: features
      }),
      style: new ol.style.Style({
        fill: new ol.style.Fill({
          color: '#2ECC40'
        }),
        stroke: new ol.style.Stroke({
          color: '#2ECC40',
          width: 5
        }),
        image: new ol.style.Circle({
          radius: 7,
          fill: new ol.style.Fill({
            color: '#2ECC40'
          })
        })
      })
    });

    featureOverlay.setMap(map);

    var modify = new ol.interaction.Modify({
      features: features,
      // the SHIFT key must be pressed to delete vertices, so
      // that new vertices can be drawn at the same position
      // of existing vertices
      deleteCondition: function(event) {
        return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
      }
    });
    map.addInteraction(modify);

    var draw; // global so we can remove it later
    function addInteraction() {
      draw = new ol.interaction.Draw({
        features: features,
        type: ('LineString'),
        /** #type {ol.geom.GeometryType} */
        style: new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: '#2ECC40',
            width: 4
          }),
          image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
              color: '#2ECC40'
            })
          })
        })
      });
      map.addInteraction(draw);
    }

    addInteraction();

    map.on('click', function(event) {
      var feature = map.getFeaturesAtPixel(event.pixel)[0];
      if (feature) {
        var coordinate = feature.getGeometry().getCoordinates();
      }
    });
  });

body {
  margin: 0;
  padding: 0;
}

form {
  display: block;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 800px;
  height: 500px;
}

.span12 {
  width: 800px;
  height: 500px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" />
<div class="container-fluid">
  <div class="">
    <div class="span12">
      <div id="map" class="map"></div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>