sopyanx

mikrotiklocation.html

Aug 9th, 2019
277
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html >
  2.   <head>
  3.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  4.     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  5.     <title>Mikrotik Location</title>
  6.     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
  7.     <script type="text/javascript">
  8.     //<![CDATA[
  9.  
  10.     var customIcons = {
  11.       LTE: {
  12.         icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
  13.       },
  14.       UMTS: {
  15.         icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
  16.       },
  17.       GSM: {
  18.         icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
  19.       },
  20.     };
  21.  
  22.     function load() {
  23.       var map = new google.maps.Map(document.getElementById("map"), {
  24.         center: new google.maps.LatLng(-6.9738832,108.5261142),
  25.         zoom: 11,
  26.         mapTypeId: 'roadmap'
  27.       });
  28.       var infoWindow = new google.maps.InfoWindow;
  29.  
  30.       // Change this depending on the name of your PHP file
  31.       downloadUrl("mikrotik_genxml.php", function(data) {
  32.         var xml = data.responseXML;
  33.         var markers = xml.documentElement.getElementsByTagName("marker");
  34.         for (var i = 0; i < markers.length; i++) {
  35.           var identity = markers[i].getAttribute("identity");
  36.           var mac = markers[i].getAttribute("mac");
  37.           var date = markers[i].getAttribute("date");
  38.           var technology = markers[i].getAttribute("technology");
  39.           var dbm = markers[i].getAttribute("dbm");
  40.           var point = new google.maps.LatLng(
  41.               parseFloat(markers[i].getAttribute("lat")),
  42.               parseFloat(markers[i].getAttribute("lng")));
  43.           var speed = markers[i].getAttribute("speed");
  44.           var altitude = markers[i].getAttribute("altitude");
  45.           var satellites = markers[i].getAttribute("satellites");
  46.           var html = "<b>" + identity + "</b> <br/>" + mac + " <br/>" + date + " <br/>" + technology + "&nbsp;" + dbm + "&nbsp;dBm <br/> Speed:&nbsp;" + speed + "&nbsp;km/h<br/> Altitude:&nbsp;" + altitude + "&nbsp;meters<br/>Satellites in view:&nbsp" + satellites + "";
  47.           var icon = customIcons[technology] || {};
  48.           var marker = new google.maps.Marker({
  49.             map: map,
  50.             position: point,
  51.             icon: icon.icon
  52.           });
  53.           bindInfoWindow(marker, map, infoWindow, html);
  54.         }
  55.       });
  56.     }
  57.  
  58.     function bindInfoWindow(marker, map, infoWindow, html) {
  59.       google.maps.event.addListener(marker, 'click', function() {
  60.         infoWindow.setContent(html);
  61.         infoWindow.open(map, marker);
  62.       });
  63.     }
  64.  
  65.     function downloadUrl(url, callback) {
  66.       var request = window.ActiveXObject ?
  67.           new ActiveXObject('Microsoft.XMLHTTP') :
  68.           new XMLHttpRequest;
  69.  
  70.       request.onreadystatechange = function() {
  71.         if (request.readyState == 4) {
  72.           request.onreadystatechange = doNothing;
  73.           callback(request, request.status);
  74.         }
  75.       };
  76.  
  77.       request.open('GET', url, true);
  78.       request.send(null);
  79.     }
  80.  
  81.     function doNothing() {}
  82.  
  83.     //]]>
  84.  
  85.   </script>
  86.  
  87.   </head>
  88.  
  89.   <body onload="load()">
  90.     <div id="map" style="width: 1000px; height: 500px"></div>
  91.   </body>
  92.  
  93. </html>
RAW Paste Data