WhiteFriars Marks

by astanislaus

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>

<style>

</style>

<form id="options-form" automplete="off">
    <div class="radio">
      <label>
        <input type="radio" name="interaction" value="draw" id="draw" checked>
        Draw &nbsp;
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="interaction" value="modify">
        Modify &nbsp;
      </label>
    </div>
    <div class="form-group">
      <label>Draw type &nbsp;</label>
      <select name="draw-type" id="draw-type">

          <option value="LineString">LineString</option>
          <option value="Point">Point</option>
          <option value="Polygon">Polygon</option>
          <option value="Circle">Circle</option>
      </select>
    </div>
    <label for="speed">
  speed:&nbsp;
  <input id="speed" type="range" min="10" max="999" step="10" value="60">
</label>
<button id="start-animation">Start Animation</button>

    <div id="map" class="map"></div>
  </form>

CSS

.map {
    height: 400px;
    width: 100%;
  }

JavaScript

//import Feature from 'ol/Feature.js';
        var Feature = ol.Feature;
        //import Map from 'ol/Map.js';
        var Map = ol.Map;
        //import View from 'ol/View.js';
        var View = ol.View;
        //import Point from 'ol/geom/Point.js';
        var Point = ol.geom.Point;

        //import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
        var TileLayer = ol.layer.Tile;
        var VectorLayer = ol.layer.Vector;

        //import {Cluster, OSM, Vector as VectorSource} from 'ol/source.js';
        var Cluster = ol.source.Cluster;
        var OSM = ol.source.OSM;
        var VectorSource = ol.source.Vector;

        //="var " & B26 & "= ol.style." & B26 & ";"
        //import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style.js';
        var Circle = ol.style.Circle;
        var CircleStyle = ol.style.Circle;
        var Fill = ol.style.Fill;
        var Stroke = ol.style.Stroke;
        var Style = ol.style.Style;
        var Text = ol.style.Text;
        var Icon = ol.style.Icon


        //import {Draw, Modify, Select, Snap} from 'ol/interaction.js';
        var Draw = ol.interaction.Draw;
        var Modify = ol.interaction.Modify;
        var Select = ol.interaction.Select;
        var Snap = ol.interaction.Snap;


        var locations1 = [
            //[51.658665, -1.92788,"0"],  // Mark : 0
            [51.657782, -1.929267, "1"],  // Mark : 1
            [51.658665, -1.92788, "2"],  // Mark : 2
            [51.659887, -1.927568, "3"],  // Mark : 3
            [51.660719, -1.92771, "4"],  // Mark : 4
            [51.66126, -1.930908, "5"],  // Mark : 5
            [51.66246, -1.933075, "6"],  // Mark : 6
            [51.662223, -1.934958, "7"],  // Mark : 7
            [51.66131, -1.935907, "8"],  // Mark : 8
            [51.659638, -1.933742, "9"],  // Mark : 9
            [51.659233, -1.930221, "Hut"],  // Mark : Hut
            [51.658144, -1.934895, "A"], //Mark : A
            [51.658112, -1.936521,...