API tools faq
paste
Advertisement
Guest User

index.html

a guest
Aug 23rd, 2016
78
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.09 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.     <meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
  4.    
  5.  
  6.     <!--<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  7.    <meta http-equiv="Pragma" content="no-cache" />
  8.    <meta http-equiv="Expires" content="0" />-->
  9.  
  10.     <style type="text/css">
  11.       html, body { height: 100%; margin: 0; padding: 0; }
  12.       #map { height: 100%; }
  13.       #filter {
  14.         position: absolute; right: 14px; top: 14px; width: 28px; height: 28px;
  15.         box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; border-radius: 2px;
  16.         cursor: pointer; background-color: white; text-align: center; vertical-align: middle;
  17.       }
  18.    
  19.       #filterdialog {
  20.         position: absolute; display: inline-block; height: 75%; overflow-y: scroll;
  21.         overflow-x: hidden; right: 14px; top: 42px; padding: 3px;
  22.         box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; border-radius: 2px;
  23.         cursor: pointer; background-color: white; font-family: Roboto,Arial,sans-serif;
  24.         font-size: 14px; font-weight: 400; display: none;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <div id="map"></div>
  30.     <div id="filter" title="Filter" onclick="showFilterDialog();"><img src="icons/map/ic_filter_list_black_24px.svg" onmouseover="this.style.opacity=0.5;" onmouseout="this.style.opacity=1;"></div>
  31.     <div id="filterdialog"></div>
  32.     <script type="text/javascript">
  33.  
  34. /////////////////////////////////////////////////////////////////////
  35.     var pokdats = {};
  36.     var map;
  37.     var markers = [];
  38.     var spawns = [];
  39.     var pokenames;
  40.     var pokefilter;
  41.     var LAT_C;
  42.     var LNG_C;
  43.     var LANGUAGE;
  44.     var scalesize;
  45.     var loadids;
  46.     var timenow;
  47.     var infowindow;
  48.     var iconSize;
  49.     var iconOrigin;
  50.     var iconAnchor;
  51.     var iconScaledSize;
  52.     var timelefttext;
  53.     var timehiddentext;
  54. /////////////////////////////////////////////////////////////////////
  55.     function getFile(path, asynch, callback) {
  56.         var xhr = new XMLHttpRequest();
  57.         xhr.open("GET", path, asynch);
  58.         xhr.onload = function (e) {
  59.             if (xhr.readyState === 4 && xhr.status === 200) {
  60.                callback(xhr.responseText);
  61.             }
  62.         };
  63.         xhr.send(null);
  64.     }
  65.  
  66. /////////////////////////////////////////////////////////////////////
  67.  
  68.     function refreshData() {
  69.         for (var fileN=0;fileN<loadids.length;fileN++){
  70.            timenow=Math.round((new Date()).getTime() / 1000);
  71.            filenow="data".concat(loadids[fileN].toString(),".json");
  72.            getFile(filenow, false, function(fileData) {
  73.                pokdats = JSON.parse(fileData);
  74.  
  75.                // Add updated markers
  76.                for (var i = 0; i < pokdats.length; i++) {
  77.                    var p = pokdats[i];
  78.  
  79.                    var timeleft = p[4]-timenow;
  80.                    if (timeleft>0) {
  81.                         if (p.length == 6)
  82.                             var newaddinfo = p[5];
  83.                         else
  84.                             var newaddinfo = 0;
  85.                         var cIcon= {
  86.                                   url: "icons/" + p[0] + ".png",
  87.                                   size: iconSize,
  88.                                   origin: iconOrigin,
  89.                                   anchor: iconAnchor,
  90.                                   scaledSize: iconScaledSize
  91.                                 };
  92.                         var s = 0;
  93.                         while (s< spawns.length && spawns[s]!=p[1]){s++;}
  94.                        if (s< spawns.length){
  95.                            if (markers[s].validTill != p[4]) {
  96.                                if (markers[s].validTill ==0 || markers[s].id != p[0]) {
  97.                                    markers[s].id=p[0];
  98.                                    markers[s].icon = cIcon;
  99.                                    markers[s].setOpacity(1.0);
  100.                                    markers[s].setMap(map);
  101.                                    markers[s].addinfo=newaddinfo;
  102.                                }
  103.                                markers[s].validTill = p[4];
  104.                            }
  105.                        }else{
  106.                                var marker = new google.maps.Marker({
  107.                                 map: map,
  108.                                 position: {lat: p[2], lng: p[3]},
  109.                                 optimized: false,
  110.                                 id: p[0],
  111.                                 validTill: p[4],
  112.                                 spawnID: p[1],
  113.                                 icon: cIcon,
  114.                                 addinfo: newaddinfo
  115.                             });
  116.                             marker.addListener('click', function() {
  117.                                 infowindow.close();
  118.                                 infowindow.setContent(this.infotext);
  119.                                 infowindow.open(map, this);
  120.                             });
  121.                             marker.addListener('dblclick', function() {
  122.                                if (this.getOpacity()==0.5)
  123.                                    this.setOpacity(1);
  124.                                else
  125.                                    this.setOpacity(0.5);
  126.                            });
  127.  
  128.                             markers.push(marker);
  129.                             spawns.push(p[1]);
  130.                         }
  131.                    }
  132.                 }
  133.                 // Update info text of markers and clear void ones
  134.                 for (var i = 0; i < markers.length; i++) {
  135.                     if (markers[i].validTill != 0) {
  136.                         var timeleft = markers[i].validTill-timenow;
  137.                         if (timeleft <= 0) {
  138.                             markers[i].setMap(null);
  139.                             markers[i].validTill = 0;
  140.                         }else
  141.                             if (markers[i].addinfo == 1 && timeleft > 1800) {
  142.                                 timeleft -= 1800;
  143.                                 markers[i].infotext= "<b>"+pokenames[markers[i].id]+"</b><br>"+ timelefttext + Math.floor(timeleft/60) + "m " + (timeleft%60) + "s<br>" + timereturntext;
  144.                             }else if (markers[i].addinfo == 1 && timeleft > 900) {
  145.                                 timeleft -= 900;
  146.                                 markers[i].infotext= "<b>"+pokenames[markers[i].id]+"</b><br><font color=\"#a9a9a9\">" + timehiddentext + Math.floor(timeleft/60) + "m " + (timeleft%60) + "s</font>";
  147.                             }else{
  148.                                 markers[i].infotext= "<b>"+pokenames[markers[i].id]+"</b><br>"+ timelefttext + Math.floor(timeleft/60) + "m " + (timeleft%60) + "s";
  149.                             }
  150.  
  151.                         markers[i].setVisible(!filteredOut(markers[i].id));    
  152.                     }
  153.                 }
  154.             });
  155.         }
  156.         anchor=infowindow.get('anchor');
  157.         if (anchor!=undefined&&anchor!==null) {
  158.            infowindow.setContent(anchor.infotext);
  159.         }
  160.     }
  161.  
  162. /////////////////////////////////////////////////////////////////////
  163.  
  164. function initMap() {
  165.  
  166.   map = new google.maps.Map(document.getElementById('map'), {
  167.     center: {lat: LAT_C, lng: LNG_C},
  168.     zoom: 15,
  169.     disableDoubleClickZoom: true
  170.   });
  171.   getFile(LANGUAGE+".json", false, function(tnames) {
  172.     pokenames=JSON.parse(tnames);
  173.   });
  174.  
  175.     // Load filter from Cookie
  176.     pokefilter = getCookie("pokefilter");
  177.     document.getElementById("filterdialog").style.display="none";
  178.  
  179.     for (i=1;i<152;i++) {
  180.         // Generate the filter interface
  181.         var div = document.createElement("div");
  182.         //div.style.width="100%";
  183.         div.innerHTML=pokenames[i];
  184.         if (filteredOut(i)) {
  185.             div.style.opacity=0.5;
  186.         }
  187.         else {
  188.             div.style.opacity=1;
  189.         }
  190.         div.id="filter"+i;
  191.        
  192.         var callback = function() {
  193.                          if (this.style.opacity<1) {
  194.                             this.style.opacity=1;
  195.                          }
  196.                          else {
  197.                             this.style.opacity=0.5;
  198.                          }
  199.                          updateFilter();
  200.                        }
  201.         div.addEventListener("click", callback, false)
  202.         document.getElementById("filterdialog").appendChild(div);
  203.     }
  204.  
  205.  if (LANGUAGE=="german") {
  206.    timelefttext = "Zeit &#252;brig: ";
  207.    timehiddentext = "Versteckt f&#252;r: ";
  208.     timereturntext = "(danach in 15m zur&#252;ck)";
  209.  }else if (LANGUAGE=="english") {
  210.    timelefttext = "Time left: ";
  211.    timehiddentext = "Hidden for: ";
  212.     timereturntext = "(then back in 15m)";
  213.  }
  214.  
  215.  infowindow = new google.maps.InfoWindow();
  216.  iconSize = new google.maps.Size(scalesize, scalesize);
  217.  iconOrigin= new google.maps.Point(0, 0);
  218.  iconAnchor= new google.maps.Point(Math.round(scalesize/2), Math.round(scalesize/2));
  219.  iconScaledSize= new google.maps.Size(scalesize, scalesize);
  220.  
  221.  
  222.  refreshData();
  223.  setInterval(refreshData, 5000);
  224.  google.maps.event.addListener(map, 'click', function(event) {
  225.        infowindow.close()
  226.    });
  227. }
  228.  
  229. function initSite() {
  230.  getFile("websettings.json", false, function(tsettings) {
  231.    var settings=JSON.parse(tsettings);
  232.     LAT_C=settings['html_coords']['lat'];
  233.     LNG_C=settings['html_coords']['lng'];
  234.    LANGUAGE=settings['language'];
  235.    scalesize = Math.ceil(72*settings['icon_scalefactor']);
  236.    loadids = settings['load_ids'];
  237.  
  238.    document.getElementsByName("viewport").content = "width=device-width, initial-scale="+settings['mobile_scalefactor'].toString()+", maximum-scale="+settings['mobile_scalefactor'].toString();
  239.    var script = document.createElement("script");
  240.    script.src = "https://maps.googleapis.com/maps/api/js?key="+settings['api_key']+"&libraries=drawing&callback=initMap";
  241.    script.async = true;
  242.    script.defer = true;
  243.    document.body.appendChild(script);
  244. });
  245. }
  246.  
  247. function setCookie() {
  248.     var cookieString = ""
  249.     if (pokefilter){
  250.         cookieString = "pokefilter="+pokefilter+";";
  251.     }
  252.     document.cookie = cookieString;
  253. }
  254.  
  255. function getCookie(name) {
  256.     var cookieString = "; " + document.cookie;
  257.     var chunks = cookieString.split("; " + name + "=");
  258.     if (chunks.length == 2) {
  259.         return chunks.pop().split(";").shift();
  260.     }
  261. }
  262.  
  263. function showFilterDialog() {
  264.     var dialog=document.getElementById("filterdialog");
  265.     if (dialog.style.display=="none") {
  266.         dialog.style.display="inherit";
  267.     }
  268.     else {
  269.         dialog.style.display="none";
  270.     };
  271. }
  272.  
  273. function filteredOut(id) {
  274.     var filtertest=","+pokefilter+",";
  275.     return (filtertest.indexOf(","+id+",") > -1)
  276. }
  277.  
  278. function updateFilter() {
  279.     var tmpstring = "";
  280.     for (i=1;i<152;i++) {
  281.         if (document.getElementById("filter"+i).style.opacity<1) {
  282.             tmpstring=tmpstring+","+i
  283.         }
  284.     }
  285.     if (tmpstring) {
  286.         pokefilter=tmpstring.substring(1);
  287.     }
  288.     setCookie();
  289.    
  290.     for (i=0; i<markers.length; i++) {
  291.         markers[i].setVisible(!filteredOut(markers[i].id));    
  292.     }
  293. }
  294.  
  295. initSite()
  296.  
  297. </script>
  298.  
  299. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!