scrapacar/riversmap.html at master · simonredding/scrapacar · 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html>
<!--

  Created using /viewer/
  Source can be edited via /viewer/iwatet/25/edit

-->
<head>
<meta charset="utf-8">
<title>Basic Map</title>

<!-- Remember to insert your own API key in the URL below -->

<script type="text/javascript" src="http://osopenspacepro.ordnancesurvey.co.uk/osmapapi/openspace.js?key=43659536296237352656577659934363"></script>

<!-- If you use OS OpenSpace Pro or OS OnDemand WMTS then use the relevant following URL instead:

OS OpenSpace Pro - <script type="text/javascript" src="http://osopenspacepro.ordnancesurvey.co.uk/osmapapi/openspace.js?key=INSERT_YOUR_API_KEY_HERE"></script>

OS OnDemand WMTS - <script type="text/javascript" src="http://ondemandapi.ordnancesurvey.co.uk/osmapapi/openspace.js??key=INSERT_YOUR_API_KEY_HERE"></script>

-->

<style>
  html, body { height: 100%;}
  #map {width: 100%; height: 100%; border:1px solid
  black;}
</style>

</head>

<body onload="init()">

<!-- The div below holds the map -->

<div id="map"></div>
<form onsubmit="return searchGazetteer();">
<input type="text" value="" id="placename" size="50" maxlength="255"/>
<input type="button" value="Search" onclick="searchGazetteer();"/>
</form>
<script>
// Define the osMap variable

var osMap,gazetteer;

// This function creates the map and is called by the div in the HTML

function init()

  {

// Create new map

    osMap = new OpenSpace.Map('map');

// Set map centre in National Grid Eastings and Northings and select zoom level 0

    osMap.setCenter(new OpenSpace.MapPoint(360000, 171000), 4);

// Assign gazetteer search

    gazetteer = new OpenSpace.Gazetteer();

// Define where the markers file is

    var markersFile = "obstructions.csv";

// Load the markers file

    OpenLayers.loadURL(markersFile, null, this, parseFile, onFail);

  }

  // This function parses through the text file to create the markers

function parseFile(result)

  {

    var text = result.responseText;

// Split the file by line

    var lines = text.split('\n');

/* Cycle through each line and split it by comma into columns then if there are exactly 3 resulting columns, pass the first one to the x variable, the second to the y variable. Create the marker position from these then add the popup text from the last column. Finally create the marker */

    for (var i = 0; i < lines.length; i++)

    {

      var columns = lines[ i ].split(',');
      if (columns.length >= 3)

        {
          var x = parseFloat(columns[ 0 ]);
          var y = parseFloat(columns[ 1 ]);
          var pos = new OpenSpace.MapPoint(x, y);
		  var headdrop = new Number (columns[3]);
          var popupText = "This obstruction is a " + columns[ 2 ] + " on the " + columns[9] + " with a head drop of " + headdrop.toPrecision(2) + " metres";

          osMap.createMarker(pos, null, popupText);


         }
      }
	   // Create clustering so markers near each other are given one numbered marker

	  clusterControl = new OpenSpace.Control.ClusterManager();
	  osMap.addControl(clusterControl);
	  clusterControl.activate();
    }

// This function creates an alert if the markers file fails to load

function onFail(e)

  {
      alert("Cannot load markers file");
  }

  // This function takes the placename element of the form and then queries it's value

function searchGazetteer()

  {

    var query = document.getElementById("placename");
                OpenLayers.Console.log("query: ", query.value);

                gazetteer.getLonLat(query.value, onResult);
                return false;
  }

// This function takes the result from the function above and then centres the map on it

function onResult(mapPoint)

  {

    if (mapPoint !== null)
    osMap.setCenter(mapPoint, 5);

  }

</script>
</body>
</html>