API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Oct 19th, 2014
294
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.20 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Hotspot Map</title>
  5.     <meta content="en" http-equiv="content-language">
  6.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"/>
  7.     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  8.     <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
  9.     <script type="text/javascript" src="js/jquery.leanModal.min.js"></script>
  10.     <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
  11.     <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
  12.     <script type="text/javascript" src="js/myJS.js"></script>
  13.     <link rel="stylesheet" type="text/css" href="css/index.css"/>
  14.     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  15.  
  16.     <script type="text/javascript">
  17.        
  18.         $(document).on("pageinit", "#map_page", function () {
  19.  
  20.             initialize();
  21.         });
  22.          //Variables
  23.        
  24.         var geocoder;
  25.          var journal;
  26.          var tubeArray = [
  27.                 ['UQ', -27.495134, 153.013502, "http://www.youtube.com/embed/uZ2SWWDt8Wg",  
  28.                     [
  29.                     ["http://www.brisbanetimes.com.au/queensland/brisbane-students-protest-university-fee-hikes-20140521-zrk8o.html", "Brisbane students protest university fee hikes"],
  30.                     ["http://www.abc.net.au/pm/content/2012/s3578878.htm", "Angry protests over UQ student union election"],
  31.                     ]
  32.                 ],
  33.                 ['New York', 40.715520, -74.002036, "http://www.youtube.com/embed/JG0wmXyi-Mw",
  34.                     [
  35.                     ["http://nypost.com/2014/10/19/ny-taxpayers-risky-wall-street-bet-why-the-comptroller-race-matters/" , "NY taxpayers’ risky Wall Street bet: Why the comptroller race matters"]
  36.                     ]
  37.                 ],
  38.                 ['To The Skies', 47.09399, 15.40548, "http://www.youtube.com/embed/tfEjTgUmeWw",
  39.                     [
  40.                     ["http://www.abc.net.au/news/2014-10-19/battle-for-kobane-intensifies/5825324","Battle for Kobane intensifies as Islamic State uses car bombs, Syrian fighters execute captives"],
  41.                     ["http://news.yahoo.com/kurds-thwart-jihadist-bid-cut-off-syria-town-091610878.html","Jihadists take heavy losses in battle for Syria's Kobane"]
  42.                     ]
  43.                 ],
  44.                 ['Fallujah', 33.101509, 44.047308, "http://www.youtube.com/embed/V2EOMzZsTrE",
  45.                     [
  46.                     ["http://www.abc.net.au/news/2014-05-15/cat-saves-boy-from-dog-attack/5454226","Video captures family cat saving California boy from dog attack"],
  47.                     ["http://www.telegraph.co.uk/lifestyle/pets/11170604/Fines-of-20000-for-dogs-that-chase-the-postman.html","Fines of £20,000 for dogs that chase the postman"]
  48.                     ]
  49.                 ]
  50.             ];
  51.  
  52.             var usersArray = [
  53.                 ["UQ", -27.47201, 153.02445, "http:////www.youtube.com/embed/R5j-Vbt_vmg",]
  54.                
  55.             ];
  56.        var superArray;
  57.         superArray = [];
  58.         for(i=0;i<tubeArray.length ; i++)superArray.push(tubeArray[i]);
  59.        for(i=0;i<usersArray.length ; i++)superArray.push(usersArray[i]);
  60.        var markerArray = [];
  61.  
  62.  
  63.        function initialize() {
  64.            for(i=0;i<superArray.length ; i++)console.log(superArray[i]);
  65.            
  66.            getCurrentLocation();
  67.            var zoom = Math.floor(($('body').width() / 512) + 2);
  68.  
  69.           var mapCenter = new google.maps.LatLng(-27.4073899,153.0028595);
  70.  
  71.          
  72.        
  73.        
  74.         //FOR SEARCH FUNCTIONALITY
  75.         geocoder = new google.maps.Geocoder();
  76.            var myOptions = {
  77.                zoom: zoom,
  78.                mapTypeId: google.maps.MapTypeId.ROADMAP,
  79.                center: mapCenter
  80.            }
  81.          
  82.  
  83.            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  84.  
  85.  
  86.            var getmap = $('body').width();
  87.            var setheight = ($(document).height()/4);
  88.  
  89.            for (i = 0; i < superArray.length; i++) {
  90.            
  91.                
  92.                var source = superArray[i][3];
  93.                 var id = superArray[i][0];
  94.                var contentString = '<div id="content">' +
  95.                         '<div id="siteNotice">' +
  96.                         '</div>' +
  97.                         '<h1 id="firstHeading" class="firstHeading">' + superArray[i][0] + '</h1>' +
  98.                         '<div id="bodyContent">' +
  99.                         '<iframe id="windowframe" width="100%" height="' + setheight + '" src="' + source + '" frameborder="0" allowfullscreen></iframe>' +
  100.                         '<div id="articlesDiv">' +
  101.                         '<a href="#articles" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="flip" data-icon="info" data-theme="e">' +
  102.                         '<img   class="newsImg" src="img/newspaper1.png" onclick="myFunctionId(this.id);" id="' + id + '" >' +
  103.                         '</a>' +
  104.                         '</div>' +
  105.                         '<div id="reportDiv">' +
  106.                         '<a href="#">' +
  107.                         '<img id="reportImg" src="img/flag1.png" onclick="reportResponse()">' +
  108.                         '</a>' +
  109.                         '</div>' +
  110.                         '</div>' +
  111.                         '</div>';
  112.                
  113.                 var infowindow = new google.maps.InfoWindow({
  114.                     content: contentString });
  115.  
  116.                 var image = new google.maps.MarkerImage(
  117.                         'http://maps.gpsvisualizer.com/google_maps/icons/blankcircle/red.png',
  118.                         //'http://plebeosaur.us/etc/map/bluedot_retina.png',
  119.                         null, // size
  120.                         null, // origin
  121.                         new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
  122.                         new google.maps.Size( 17, 17 ) // scaled size (required for Retina display icon)
  123.                 );
  124.  
  125.                 marker = new google.maps.Marker({
  126.                     flat: true,
  127.                     icon: image,
  128.                     optimized: false,
  129.                     visible: true,
  130.                     position: new google.maps.LatLng(superArray[i][1], superArray[i][2]),
  131.                     map: map,
  132.                     title: 'Hotspot'
  133.                 });
  134.  
  135.                 google.maps.event.addListener(marker, 'click', (function (content) {
  136.                     return function () {
  137.                        // map.setCenter(marker.getPosition());
  138.                         map.setZoom(10);
  139.                         infowindow.setContent(content);
  140.                         infowindow.open(map, this);
  141.                     }
  142.                 })(contentString));
  143.             }homepos();
  144.         }
  145.        
  146.         //SEARCH FUNCTIONALITY
  147.         /*function geocode() {
  148.         var address = document.getElementById("address").value;
  149.         geocoder.geocode({
  150.             'address': address,
  151.             'partialmatch': true}); */
  152.        
  153.         function getCurrentLocation() {
  154.  
  155.             navigator.geolocation.getCurrentPosition(locationSuccess, onError);
  156.         }
  157.  
  158.         function locationSuccess(position) {
  159.             var lat = position.coords.latitude;
  160.            var  long = position.coords.longitude;
  161.             console.log( position.coords.latitude);
  162.             console.log(position.coords.longitude) ;
  163.  
  164.         }
  165.  
  166.         function onError(position) {
  167.             console.log( "fail");
  168.  
  169.  
  170.         }
  171.  
  172.         function homepos(){
  173.             navigator.geolocation.getCurrentPosition(setPos, onError);
  174.            
  175.  
  176.         }
  177.  
  178.         function setPos(position) {
  179.             var lat = position.coords.latitude;
  180.             var  long = position.coords.longitude;
  181.             var center1 = new google.maps.LatLng( lat, long);
  182.             map.setCenter(center1);
  183.             map.setZoom(5);
  184.  
  185.         }
  186.  
  187.        
  188.        
  189.         function myFunctionId (id) {
  190.             journal = id;
  191.            
  192.                         $('#articleLinks').append("<a href='"+innerArray[0]+"'>"+innerArray[1]+'</a>'); // use CSS to break lines
  193.                    
  194.         }
  195.        
  196.        
  197.        
  198.  
  199.         window.onload = function() {
  200.             var changeMarkersInput1 = document.getElementById("changeMarkers1");
  201.             changeMarkersInput1.addEventListener('click', function(e) {
  202.                 var type = "all";
  203.                 displayMapMarkers(type);
  204.  
  205.             }, false);
  206.  
  207.             var changeMarkersInput2 = document.getElementById("changeMarkers2");
  208.             changeMarkersInput2.addEventListener('click', function(e) {
  209.                 var type = "tube";
  210.                 displayMapMarkers(type);
  211.             }, false);
  212.  
  213.             var changeMarkersInput2 = document.getElementById("changeMarkers3");
  214.             changeMarkersInput2.addEventListener('click', function(e) {
  215.                 var type = "users";
  216.                 displayMapMarkers(type);
  217.             }, false);
  218.  
  219.         }
  220.        
  221.         function displayMapMarkers(type) {
  222.             if (type== "all")
  223.             {  superArray = [];
  224.                 for(i=0;i<tubeArray.length ; i++)superArray.push(tubeArray[i]);
  225.                for(i=0;i<usersArray.length ; i++)superArray.push(usersArray[i]);
  226.                initialize();
  227.            }
  228.            if (type== "tube")
  229.            {  superArray = [];
  230.                for(i=0;i<tubeArray.length ; i++)superArray.push(tubeArray[i]);
  231.  
  232.                initialize();
  233.            }
  234.            if (type== "users")
  235.            {  superArray = [];
  236.  
  237.                for(i=0;i<usersArray.length ; i++)superArray.push(usersArray[i]);
  238.                initialize();
  239.            }
  240.  
  241.  
  242.        }
  243.  
  244.        function showMarkers() {
  245.  
  246.            google.maps.event.trigger(map, 'resize');
  247.        }
  248.        function reportResponse() {
  249.             alert("Your report has been received, thank you for making HotSpot a better place!");
  250.        }
  251.    
  252.         //SEARCH FUNCTIONALITY
  253.         //NEED
  254.         function geocode() {
  255.             var address = document.getElementById("address").value;
  256.             geocoder.geocode({
  257.                 'address': address,
  258.                 'partialmatch': true}, geocodeResult);
  259.             }
  260.         //NEED
  261.         function geocodeResult(results, status) {
  262.             if (status == 'OK' && results.length > 0) {
  263.                 map.fitBounds(results[0].geometry.viewport);
  264.             } else {
  265.                 alert("Geocode was not successful for the following reason: " + status);
  266.             }
  267.         }
  268.         //NEED
  269.     function addMarkerAtCenter() {
  270.         var marker = new google.maps.Marker({
  271.             position: map.getCenter(),
  272.             map: map
  273.         });
  274.     }
  275.    
  276.     ;
  277.    
  278.    
  279.     </script>
  280. </head onload="initialize()">
  281. <div data-role="page" id="map_page">
  282.     <div data-role="panel" id="navpanel" data-theme="b" data-display="overlay" data-position="left">
  283.         <div data-role="controlgroup" data-corners="false">
  284.            
  285. <!-- Navigation Buttons //-->
  286.             <!-- Search -->
  287.            <div class="panelitem" data-role="collapsible" data-collapsed="true">
  288.             <!-- Set Location -->
  289.                 <h4>Search Region</h4>
  290.                 <ul data-role="listview">
  291.                     <li><a href="#"><input type="text" id="address"/><input type="button" value="Go" onclick="geocode()"></a></li>
  292.                    
  293.                 </ul>
  294.             </div>
  295.            
  296.            <!-- /TEST -->
  297.            <!-- Set Location -->
  298.             <div class="panelitem" data-role="collapsible" data-collapsed="true">
  299.            
  300.                 <h4>Quick Location</h4>
  301.                 <ul data-role="listview">
  302.                     <li><a href="#" class="posSelector" >North America</a></li>
  303.                     <li><a href="#" class="posSelector" >South America</a></li>
  304.                     <li><a href="#" class="posSelector">Africa</a></li>
  305.                     <li><a href="#" class="posSelector">Southeast Asia</a></li>
  306.                     <li><a href="#" class="posSelector">Middle East</a></li>
  307.                     <li><a href="#" class="posSelector">Europe</a></li>
  308.                 </ul>
  309.                 <script>
  310.                 $('.posSelector').click(function () {
  311.  
  312.                 var posName = $(this).text();
  313.                 if( posName =="North America"){
  314.                 var center1 = new google.maps.LatLng( 41.5008195,-99.680902 );
  315.                 map.setCenter(center1);
  316.                 map.setZoom(4);
  317.                 }
  318.                 if( posName =="South America"){
  319.                 var center1 = new google.maps.LatLng( -21.7351043,-63.28125 );
  320.                 map.setCenter(center1);
  321.                 map.setZoom(4);
  322.                 }
  323.                 if( posName =="Africa"){
  324.                 var center1 = new google.maps.LatLng( 0.2136714,16.98485 );
  325.                 map.setCenter(center1);
  326.                 map.setZoom(4);
  327.                 }
  328.                 if( posName =="Southeast Asia"){
  329.                 var center1 = new google.maps.LatLng( 8.7197676,116.607154 );
  330.                 map.setCenter(center1);
  331.                 map.setZoom(4);
  332.                 }
  333.                 if( posName =="Middle East"){
  334.                 var center1 = new google.maps.LatLng( 27.0821,44.0150557 );
  335.                 map.setCenter(center1);
  336.                 map.setZoom(4);
  337.                 }
  338.                 if( posName =="Europe"){
  339.                 var center1 = new google.maps.LatLng(49.5,22);
  340.                 map.setCenter(center1);
  341.                 map.setZoom(4);
  342.                 }              
  343.                 });
  344.                 </script>
  345.             </div>
  346.            
  347.             <!-- Filter -->
  348.             <div class="panelitem" data-role="collapsible" data-collapsed="true">
  349.                 <h4>Filter</h4><ul data-role="listview">
  350.                 <li><a id="changeMarkers1" href="#">All</a></li>
  351.                 <li><a id="changeMarkers2" href="#">Youtube</a></li>
  352.                 <li><a id="changeMarkers3" href="#">User Video</a></li>
  353.             </ul>
  354.             </div>
  355.             <!-- Upload -->
  356.             <a href="addvideo.html" data-role="button" rel="external" data-transition="flip">Add Video</a>
  357.         </div>
  358.          
  359.     </div>
  360.    
  361.            
  362.    
  363.     <!-- Title -->
  364.     <div id="header" data-role="header" data-position="fixed" data-theme="b">
  365.         <a id="bars-button" data-icon="bars" class="ui-btn-left" style="margin-top:10px;" href="#navpanel">Menu</a>
  366.         <br><div id="container"> <img src="img/hotspot.png" id="hotspotlogo"/><h1 id="heading">&nbsp;HOTSPOT</h1></div>
  367.     </div>
  368.    
  369.     <!-- Google Maps -->
  370.     <div id="frame" data-role="content">
  371.     <div>
  372.         <div id="map_canvas"></div>
  373.     </div>
  374.     </div>
  375.    
  376.     <!-- Footer -->
  377.     <div id="footer" data-role="footer" data-position="fixed" data-theme="b" class="ui-bar">
  378.         <a href="#about" data-rel="popup" data-position-to="window" data-role="button" data-inline="true"
  379.           data-transition="flip" data-icon="info" data-theme="e">About</a>
  380.     </div>
  381.     <!-- /About -->
  382.     <div data-role="popup" id="about" data-overlay-theme="a" data-theme="c" data-dismissible="false"
  383.         style="max-width:300px;" class="ui-corner-all">
  384.  
  385.         <div data-role="header" class="ui-header ui-bar-c"><a href="#" data-rel="back" data-role="button" data-theme="a"
  386.        data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
  387.         <h1>HotSpot<br></h1>
  388.         </div>
  389.         <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
  390.             <p>A Team 27 Application <b>2014</b>
  391.            
  392.         </div>
  393.     </div>
  394.      <!-- /Articles -->
  395.    
  396.     <div data-role="popup" id="articles" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
  397.     <div data-role="header" data-theme="a"><a href="#" data-rel="back" data-role="button" data-theme="a"
  398.        data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
  399.     <h1>Articles</h1>
  400.     </div>
  401.     <div role="main" class="ui-content">
  402.     <!--<h3 class="ui-title">Are you sure you want to delete this page?</h3>
  403.    <p>This action cannot be undone.</p>-->
  404.      <a href="addvideo.html" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" >Upload Article</a><br>
  405.      <div id="articleLinks">
  406.      <a href="http:/www.google.com">Dummy Link</a><br><br>
  407.     </div>
  408.      
  409.      
  410.     </div>
  411.    </div>
  412.    
  413. </div>
  414. </body>
  415. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  416. <script type="text/javascript" src="cordova.js"></script>
  417. <script type="text/javascript" src="js/index.js"></script>
  418. <script type="text/javascript">
  419.     app.initialize();
  420. </script>
  421. <script type="text/javascript">
  422.     /* $(document).ready(function(){
  423.      alert("Jquery is working");
  424.      });*/
  425. </script>
  426. <script>
  427.     var getmap = $('body').width();
  428.     console.log(getmap);
  429.     var check = $(document).height();
  430.     var check2 = $('#header').height();
  431.     var check3 = $('#footer').height();
  432.     var setHeight = check - (check2 + check3);
  433.     $("#map_canvas").css({'height': setHeight + "px" });
  434. </script>
  435. </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!