aafactory-ol5/map.html at master · AAFactory/aafactory-ol5 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
  <head>
    <title>Openlayers5</title>
    <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
    <link rel="stylesheet" href="css/map.css">

    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script src="js/openlayers/v5.3.0/ol.js"></script>
    <script src="js/turf/v5.1.6/turf.min.js"></script>
    <script src="js/immutable.js"></script>
    <script src="js/aaf-ol5.js"></script>
    <script src="js/map.js"></script>
  </head>
  <body>
    <div id="map"><div id="slider-container"></div></div>
    <div class="aaf-ol5-layer-toolbar">
      <div class="aaf-ol5-debug-flag">debug mode<input type="checkbox" checked="checked"></div>
      <h3>OpenStreetMap</h3>
      <input type="radio" name="baseMap" id="osm" /><span>base</span>
      <h3>VWorld</h3>
      <input type="radio" name="baseMap" checked="checked" id="base" /><span>base</span>
      <input type="radio" name="baseMap" id="midnight" /><span>midnight</span>
      <input type="radio" name="baseMap" id="gray" /><span>gray</span>
      <input type="radio" name="baseMap" id="satellite" /><span>satellite</span>
      <input type="checkbox" class="aaf-ol5-layer" id="hybrid" /><span>hybrid</span><br />
      <h3>Load geometry files</h3>
      <div class="buttonBox">
        <label for="overlayerKML">KML</label>
        <input type="file" id="overlayerKML" onchange="handleFiles(this.files, 'KML')">
      </div>
      <div class="buttonBox">
        <label for="overlayerGeoJSON">GeoJSON</label>
        <input type="file" id="overlayerGeoJSON" onchange="handleFiles(this.files, 'GeoJSON')">
      </div>
      <h3>Draw features</h3>
      <select id="type">
		    <option value="None">None</option>
		    <option value="Point">Point</option>
		    <option value="LineString">LineString</option>
		    <option value="Polygon">Polygon</option>
		    <option value="Circle">Circle</option>
		  </select>
		  <div class="buttonBox" id="clearFeatures">
        <label>Clear</label>
      </div>
		  <h3>Draw Shapes</h3>
      <select id="shapeType">
        <option value="None">None</option>
        <option value="Circle">Circle</option>
        <option value="Square">Square</option>
        <option value="Box">Box</option>
        <option value="Star">Star</option>
      </select>
      <div class="buttonBox" id="clearShapes">
        <label>Clear</label>
      </div>
      <h3>Measure</h3>
      <input class="measure" name="measure" id="distance" type="radio"><span>Distance</span>
      <input class="measure" name="measure" id="area" type="radio"><span>Area</span>
      <input class="measure" name="measure" id="none" type="radio" checked="checked"><span>None</span>
      <div class="buttonBox" id="clearMeasure">
        <label>Clear</label>
      </div>
    </div>
    <div class="aaf-ol5-vworld-logo"></div>
  </body>
</html>