1(function() { 2 "use strict"; 3 var boxes = []; 4 var cBox = -1; 5 var mapData = []; 6 var incidents = []; 7 8 // var liveurl = 'https://clientbeta.co.za/clients/www.bakwena.co.za/'; 9 var liveurl = 'https://www.bakwena.co.za/'; 10 11 /**Functions */ 12 var latLon = function(a, o) { 13 return ol.proj.transform([o, a], "EPSG:4326", "EPSG:3857"); 14 }; 15 16 var iconToll = new ol.style.Style({ 17 image: new ol.style.Icon({ 18 anchor: [0.5, 55], 19 anchorXUnits: "fraction", 20 // anchorXUnits: "pixels", 21 anchorYUnits: "pixels", 22 rotation: 0, 23 // offsetOrigin: 'bottom-center', 24 opacity: 0.8, 25 src: liveurl+"/wp-content/uploads/2024/03/pin.png" 26 }) 27}); 28 29 getData(); 30 async function getData() { 31 const URL = liveurl; 32 const response = await fetch(URL+"wp-json/wp/v2/liveroutemap?_embed&per_page=100"); 33 const data = await response.json(); 34 // console.log(data); 35 mapData = data; 36 // tolls = data.Data[0].tolls; 37 // incidents = data.Data[0].incidents; 38 loadBoxes(); 39 } 40 41 const currentview = latLon(-25.60677479095632, 28.266430802024498); 42 // const currentview = latLon(-25.712667, 28.264833); 43 44 var vectorSource = new ol.source.Vector(),vectorLayer = new ol.layer.Vector({ 45 source: vectorSource 46 }), 47 olview = new ol.View({ 48 center: [currentview[0], currentview[1]], 49 // center: [3100000.0818097047, -2950000.480255617], 50 // // center: [-25.5207545, 27.6730859], 51 zoom: 11, 52 minZoom: 11, 53 maxZoom: 13 54 }), 55 map = new ol.Map({ 56 controls: [], 57 target: document.getElementById("livemap"), 58 view: olview, 59 layers: [ 60 new ol.layer.Tile({ 61 style: "Aerial", 62 source: new ol.source.OSM() 63 }), 64 vectorLayer 65 ] 66 }); 67 var dragPan; 68 map.getInteractions().forEach(function(interaction) { 69 if (interaction instanceof ol.interaction.DragPan) { 70 dragPan = interaction; 71 } 72 }, this); 73 74 if (dragPan) { 75 // map.removeInteraction(dragPan); 76 } 77 map.removeControl("Zoom"); 78 79 function loadBoxes() { 80 var xOff; 81 var yOff; 82 var iWid; 83 var iHgt; 84 var dire; 85 86 if (mapData) { 87 for (var x = 0; x < mapData.length; x++) { 88 const locationType = mapData[x].map_categories[0] === 35 ? "toll" : ""; 89 if (locationType === 'toll') { 90 var markFeature = new ol.Feature({ 91 geometry: new ol.geom.Point( 92 latLon(parseFloat(mapData[x]['acf']['latitude']), parseFloat(mapData[x]['acf']['longitude'])) 93 ) 94 }); 95 96 markFeature.setStyle(iconToll); 97 xOff = -15; 98 yOff = -48; 99 iWid = 30; 100 iHgt = 48; 101 102 console.log( mapData[x]['acf']['prices']['class_1']); 103 vectorSource.addFeature(markFeature); 104 boxes.push({ 105 type: "toll", 106 name: mapData[x].title.rendered, 107 img: mapData[x]._embedded['wp:featuredmedia']['0'].source_url, 108 cat1: mapData[x]['acf']['prices']['class_1'], 109 cat2: mapData[x]['acf']['prices']['class_2'], 110 cat3: mapData[x]['acf']['prices']['class_3'], 111 cat4: mapData[x]['acf']['prices']['class_4'], 112 // dire: mapData[x].direction.substr(0, 1).toUpperCase(), 113 latitude: parseFloat(mapData[x]['acf']['latitude']), 114 longitude: parseFloat(mapData[x]['acf']['longitude']), 115 lola: latLon(parseFloat(mapData[x]['acf']['latitude']), parseFloat(mapData[x]['acf']['longitude'])), 116 xOff: xOff, 117 yOff: yOff, 118 iWid: iWid, 119 iHgt: iHgt 120 }); 121 } 122 } 123 } 124 } 125 126 map.on("click", function(evt) { 127 var xy = map.getPixelFromCoordinate(evt.coordinate); 128 var mP = { x: xy[0], y: xy[1] }; 129 var clicked = boxClicked(mP); 130 var desc; 131 if (clicked > -1) { 132 cBox = 1; 133 var box = boxes[clicked]; 134 var dire = "Both"; 135 if (!box.desc) { 136 box.desc = " "; 137 } 138 /*----------------------------------------------------------------------* 139 | | 140 | Toll Plazas | 141 | | 142 *----------------------------------------------------------------------*/ 143 if (box.type.toLowerCase() == "toll") { 144 document.getElementById("toll_name").innerHTML = box.name; 145 document.getElementById("toll_image").src= box.img; 146 document.getElementById("toll_c0").innerHTML = 147 "R" + parseFloat(box.cat1).toFixed(2); 148 document.getElementById("toll_c1").innerHTML = 149 "R" + parseFloat(box.cat2).toFixed(2); 150 document.getElementById("toll_c2").innerHTML = 151 "R" + parseFloat(box.cat3).toFixed(2); 152 document.getElementById("toll_c3").innerHTML = 153 "R" + parseFloat(box.cat4).toFixed(2);
154 var bP = map.getPixelFromCoordinate(box.lola); 155 if ( 156 bP[0] + 157 parseInt( 158 document.getElementById("toll").style.width.replace("px", "") 159 ) > 160 parseInt(document.getElementById("livemap").style.width.replace("px", "")) 161 ) { 162 var xPos = 163 parseInt( 164 document.getElementById("livemap").style.width.replace("px", "") 165 ) - 166 parseInt( 167 document.getElementById("toll").style.width.replace("px", "") 168 ) - 169 10; 170 } else { 171 var xPos = bP[0]; 172 } 173 document.getElementById("toll").style.left = xPos + "px"; 174 document.getElementById("toll").style.display = "block"; 175 } 176 } 177 }); 178 179 function closeBoxes() { 180 document.getElementById("toll").style.display = "none"; 181 cBox = -1; 182 } 183 184 window.closeBox = function(el) { 185 el.style.display = "none"; 186 cBox = -1; 187 }; 188 189 function boxClicked(mP, r) { 190 if (cBox >= 0) { 191 closeBoxes(); 192 return; 193 } 194 var message = "Mouse position: " + mP.x + "," + mP.y; 195 // console.log(message); 196 //showClick(); 197 for (var i = 0; i < boxes.length; i++) { 198 var bP = map.getPixelFromCoordinate(boxes[i].lola); 199 if ( 200 mP.x >= bP[0] + boxes[i].xOff && 201 mP.x <= bP[0] + boxes[i].xOff + boxes[i].iWid 202 ) { 203 if ( 204 mP.y >= bP[1] + boxes[i].yOff && 205 mP.y <= bP[1] + boxes[i].yOff + boxes[i].iHgt 206 ) { 207 208 return i; 209 } 210 } 211 } 212 return -1; 213 } 214})();
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.