https://mendipring.org.uk/scripts/mendipRing.js?20220826a

1var apiKey = 'BVz40tftf4IwUAUSYeGZHrwmx6YbuxXm';
2var serviceUrl = 'https://api.os.uk/maps/raster/v1/zxy';
3
4var osMap, selectedMarker;
5var cursorPoint, selectedRoute;
6var plusRouteLeg, routeCount;
7
8/*class osEastNorth {
9  constructor(lat, lng) {
10    var coord = [Number(lng), Number(lat)];
11    var value = ol.proj.transform(coord, 'EPSG:4326', 'EPSG:27700');
12    this.easting = value[0];
13    this.northing = value[1];
14  }
15}
16*/
17function osDisplay(lat, lng, files, leg, plusRoute) {
18  if (typeof plusRoute === "undefined") {
19    plusRoute = '';
20  }
21  plusRouteLeg = plusRoute;
22  // Setup the EPSG:27700 (British National Grid) projection.
23  proj4.defs("EPSG:27700", "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs");
24  ol.proj.proj4.register(proj4);
25
26  var tilegrid = new ol.tilegrid.TileGrid({
27    resolutions: [896.0, 448.0, 224.0, 112.0, 56.0, 28.0, 14.0, 7.0, 3.5, 1.75],
28    origin: [-238375.0, 1376256.0]
29  });
30
31  // Initialize the map object.
32  osMap = new ol.Map({
33    layers: [
34      new ol.layer.Tile({
35        source: new ol.source.XYZ({
36          url: serviceUrl + '/Leisure_27700/{z}/{x}/{y}.png?key=' + apiKey,
37          projection: 'EPSG:27700',
38          tileGrid: tilegrid
39        })
40      })
41    ],
42    target: 'map_canvas',
43    view: new ol.View({
44      projection: 'EPSG:27700',
45      resolutions: tilegrid.getResolutions(),
46      minZoom: 0,
47      maxZoom: 9,
48      center:ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:27700'),
49      zoom: 4
50    })
51  });
52
53  // draw the routes
54  var fileObjects = JSON.parse(files);
55  routeCount = fileObjects.length;  
56  fileObjects.forEach(drawRoute);
57  
58/*  // add static marker
59  var styleMarker = new ol.style.Style({
60    image: new ol.style.Icon({
61      scale: .7, anchor: [0.5, 1],
62      src: 'graphics/marker.png'
63    })
64  });
65  var marker1 = new ol.geom.Point(ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:27700'));
66  var featureMarker1 = new ol.Feature(marker1);
67  var markers = new ol.layer.Vector({
68    source: new ol.source.Vector({
69  	  features: [featureMarker1]
70    }),
71    style: [styleMarker]
72  });
73  osMap.addLayer(markers);
74*/
75
76/*  // add dragable marker
77  var styleMarker = new ol.style.Style({
78    image: new ol.style.Icon({
79      scale: .7, anchor: [0.5, 1],
80      src: 'graphics/marker.png'
81    })
82  });
83  
84  var marker1 = new ol.geom.Point(ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:27700'));
85  var featureMarker1 = new ol.Feature(marker1);
86  var markers = new ol.layer.Vector({
87    source: new ol.source.Vector({
88  	  features: [featureMarker1]
89    }),
90    style: [styleMarker]
91  });
92  osMap.addLayer(markers);
93  var translate1 = new ol.interaction.Translate({
94	features: new ol.Collection([featureMarker1])
95  });
96  translate1.on('translateend', function (evt) {
97    var coordinates = ol.proj.transform(evt.coordinate, 'EPSG:27700', 'EPSG:4326');
98    alert(coordinates);
99  });
100  osMap.addInteraction(translate1);
101*/  
102  var tooltipContainer = document.getElementById('tooltip');
103  var tooltipContent = document.getElementById('tooltip-content');
104  var tooltip = new ol.Overlay({
105    element: tooltipContainer,
106    autoPan: true,
107    autoPanAnimation: {
108      duration: 250
109    }
110  });
111  osMap.addOverlay(tooltip);
112  
113  osMap.on('pointermove', function(evt){
114    var featureName;
115    var pixel = osMap.getEventPixel(evt.originalEvent);
116    var hit = osMap.hasFeatureAtPixel(pixel);
117    osMap.getViewport().style.cursor = hit ? 'pointer' : '';
118    if (hit) {
119      var feature = osMap.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
120        if (featureName== feature.get('name')) {
121          return feature;
122        };
123        featureName= feature.get('name');
124        if (typeof layer.get('legDesc') === "undefined") { 
125          tooltipContent.innerHTML = '<p>' + featureName+ '</p>';
126        } else {
127          tooltipContent.innerHTML = '<p>' + layer.get('legDesc') + '</p>';
128        }
129        var coordinates = osMap.getCoordinateFromPixel(evt.pixel);
130        tooltip.setPosition(coordinates);
131        return feature;
132      });
133    } else {
134        featureName = '';
135        tooltip.setPosition(undefined);
136    }
137  });
138  
139  osMap.on('singleclick', function(evt) {
140    var featureName;
141    var pixel = osMap.getEventPixel(evt.originalEvent);
142    var hit = osMap.hasFeatureAtPixel(pixel);
143    if (hit) {

144      var feature = osMap.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
145        if (typeof layer.get('legId') === "undefined") { 
146        } else {
147          window.location = "mendipRing.php?leg=" + layer.get('legId'); 
148        } 
149        return feature;
150      });
151    } else {
152        featureName = '';
153        tooltip.setPosition(undefined);
154    }
155  });
156}
157
158function drawRoute(route, index) {
159  if (plusRouteLeg.length == 0) {
160    var routeFile = 'gpx/' + route.leg + '.gpx';
161  } else {
162    var routeFile = 'mendipRingPlus/' + route.leg + '/' + plusRouteLeg + '.gpx';
163  }
164  var gpxFormat = new ol.format.GPX({
165    dataProjection: 'EPSG:4326',
166    featureProjection: 'EPSG:27700'
167  });
168  var gpxLayer = new ol.layer.Vector({
169    source: new ol.source.Vector({
170      url: routeFile,
171      format: gpxFormat
172    }),
173    style: new ol.style.Style({
174      stroke: new ol.style.Stroke({
175        color: 'rgba(255,0,0,0.5)',
176        width: 6,
177      })
178    }),
179    legDesc: route.legDesc,
180    legId: route.legId,
181    plusRouteLeg: plusRouteLeg
182  });
183  osMap.addLayer(gpxLayer);
184  
185  //gpxLayer.once("postrender", e => {
186  //   alert("postRender " + gpxLayer.get('legdesc'));
187  //});
188  
189  if (routeCount==1) {
190    gpxLayer.once("change", e => {
191      var extent = gpxLayer.getSource().getExtent();
192      var padding = [50, 50, 50, 50];
193      osMap.getView().fit(extent, { maxZoom: 7, padding: padding });
194    });
195  }
196}
197function resizeMap() {
198   var newHeight = window.innerHeight - 265;
199   document.getElementById("map_canvas").style.height = newHeight.toString().concat("px");
200}