openmptcprouter-feeds/luci-app-gpoint-main/luasrc/view/gpoint/js/js.htm

<%#
 Module for providing data from a mobile satellite navigation system ( mobile modems, etc.)
 -= Design and Development 2021-2022 =-
 Licensed to the public under the Apache License 2.0.
-%>

<script type="text/javascript">
//<![CDATA[

const icon = "<%=resource%>/icons/gpoint_icons/marker.png";

function onClick(id, callback) {
  document.getElementById(id).addEventListener('click', callback);
}

function flyTo(location, z, done) {
  var duration = 5000;
  var zoom = z;
  var parts = 2;
  var called = false;

  function callback(complete) {
    --parts;
    if (called) {
      return;
    }
    if (parts === 0 || !complete) {
      called = true;
      done(complete);
    }
  }

  view.animate({center: location, duration: duration,}, callback);
  view.animate({zoom: zoom - 1,duration: duration / 2,},
               {zoom: zoom,duration: duration / 2,}, callback);
}

function getAddress(lat, lon) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "https://nominatim.openstreetmap.org/reverse?lat="
                         +lat+"&lon="+lon+"&zoom=18&format=json", true);
  xhr.onload = function () {
    if (xhr.status == 200) {
      var data = JSON.parse(xhr.responseText);
      var e = document.getElementById('address');
      const gMap = "https://www.google.com/maps/place/"+lat+','+lon;
      e.innerHTML = String.format("<a style=\"color:gray; font-size: 18px; text-decoration: none;\"href=\"" + gMap + "\"><br>"
                                    + (data.address.state !== undefined ? data.address.state : "") 
                                    + (data.address.road !== undefined ? (", " + data.address.road ) : "") 
                                    + (data.address.house_number !== undefined ? (", " + data.address.house_number) : "") + "</a>");
    }
  }
  xhr.send(null);
}

function addMarker(longitude, latitude, icon) {

  if(spinerStatus) {
    map.removeOverlay(marker);
    zoom = 18;
    spinerStatus = false;
  }
  rasterLayer.setVisible(false);

  lon = longitude; 
  lat = latitude;
  
  coordinate = ol.proj.fromLonLat([lat, lon]);

  iconFeatures.length = 0; // deleting the layer
  vectorSource.clear(); // deleting array of features

  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([lat, lon], 'EPSG:4326', 'EPSG:3857')),
    name: 'COOR',
    population: 4000,
    rainfall: 500
  });

   iconFeatures.push(iconFeature);
   vectorSource.addFeatures(iconFeatures);
}

function addSpiner() {
    rasterLayer.setVisible(true);
    if(!spinerStatus) {
        map.addOverlay(marker);
        zoom = 3;
        spinerStatus = true;
    }    
}


function putData(data) {
  var id = ["latitude", "hdop", "longitude", "altitude", "cog", "spkm", "nsat", "date"];
  id.forEach(function(item, i, id) {
      var e = document.getElementById(item);
      if(e) {
          e.innerHTML = String.format(data.item);
     }
  });
}





var lon = 55.7522; 
var lat = 37.6156;
var zoom = 3;
var spinerStatus = true;

var iconFeatures=[];
var coordinate = ol.proj.fromLonLat([lat, lon]);

var vectorSource = new ol.source.Vector({
  features: iconFeatures  //add an array of features
});

var rasterLayer = new ol.layer.Tile({
  source: new ol.source.Stamen({
    layer: 'toner'
  })
});

var mapLayer = new ol.layer.Tile({
    preload: 4,
    source: new ol.source.OSM()
  });

var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
  anchor: [0.5, 46],
  anchorXUnits: 'fraction',
  anchorYUnits: 'pixels',
  opacity: 0.75,
  src: icon
  }))
});

var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: iconStyle
});

var view = new ol.View({
  center: coordinate,
  zoom: 3,
});

var map = new ol.Map({
  controls: ol.control.defaults({zoom: true, attribution: false, rotate: false}),
  target: 'map',
  layers: [mapLayer
    
    ],

    view: view
});

map.addLayer(vectorLayer);
map.addLayer(rasterLayer);

// To display a widget that shows the location of an object
const locate = document.createElement('div');
locate.className = 'ol-control ol-unselectable locate';
locate.innerHTML = '<button id="fmr" title="Find my Router">◎</button>';
locate.addEventListener('click', function(){ flyTo(coordinate, zoom, function () {}); });
map.addControl(new ol.control.Control({
  element: locate
}));

var marker = new ol.Overlay({
  position: coordinate,
  positioning: 'center-center',
  element: document.getElementById('marker'),
  stopEvent: false
});

map.addOverlay(marker);

//]]>
</script>