API tools faq
paste
bocajbee

index.hmtl

bocajbee
Aug 19th, 2020 (edited)
157
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.24 KB | None | 0 0
raw download clone embed print report
  1. {% extends "layout.html" %}
  2.  
  3. <!-- title of page -->
  4. {% block title %}
  5. Park Map
  6. {% endblock %}
  7.  
  8. {% block main %}
  9.  
  10. <!-- alert for when user logs in -->
  11. <div class ="alert-messages">
  12.   {% if success_login %}
  13.   <div class="alert alert-primary fade show p-1" role="alert" style="position:abolute;z-index:999;">
  14.     <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true"></span></button>
  15.     {{ success_login }}
  16.   </div>
  17.   {% endif %}
  18. </div>
  19.  
  20. <!-- Div that holds the temp boostrap notification -->
  21. <div id="alert_placeholder"></div>
  22.  
  23. <!-- JS script to hide and show the login error -->
  24. <script src="static/js/DismissLogin.js"></script>
  25.  
  26. <body>
  27.   <!-- script to init the google map -->
  28.   <!-- https://www.youtube.com/watch?v=Zxf1mnP5zcw&t=131s -->
  29.   <!-- https://www.youtube.com/watch?v=oVr6unKZbg4 -->
  30.   <script>
  31.     // https://pietschsoft.com/post/2015/09/05/javascript-basics-how-to-create-a-dictionary-with-keyvalue-pairs
  32.     // create a dict to store the markers that get generated by the add_markers function
  33.     // creates variable for keeping track of currently highlighted div
  34.     var markers_dict = new Object();
  35.     var currently_highlighted;
  36.     var marker_selected;
  37.  
  38.     function initMap(){
  39.       var options = {
  40.         zoom:12,
  41.         center:{lat:49.2827, lng:-123.1207},
  42.         disableDefaultUI: true
  43.       }
  44.  
  45.       var map = new google.maps.Map(document.getElementById('map'), options);
  46.  
  47.       // use jinja to loop through the index_park_info python dict we created our divs from
  48.       {% for dictionary in index_park_info %}
  49.       var park_id = "{{ dictionary["place_id"] }}";
  50.       addMarker({lat:{{ dictionary["location_lat"] }},lng:{{ dictionary["location_long"] }}}, park_id);
  51.       {% endfor %}
  52.  
  53.       // add marker function to add markers to our map
  54.       function addMarker(coords, park_id){
  55.         var info_box_park = document.getElementById("Park " + park_id);
  56.         var marker = new google.maps.Marker({
  57.           position:coords,
  58.           map:map,
  59.           icon: 'https://i.imgur.com/5rNpwiF.png'
  60.         });
  61.  
  62.         // my own "scroll" function, so we don't end up repeating it's code when  called/needed
  63.         // un-higlights old element if the currently highlighted global variable is set to anything, then change that selected divs backround colour to white
  64.         // highlights new element, takes the id string from the "info_box_park" & stores it inside of the var "currently_highlighted", to identify that selected dom, sets that selected doms colour to grey
  65.        // https://stackoverflow.com/questions/11064081/javascript-change-google-map-marker-color
  66.        function zoom(){
  67.          map.setZoom(12);
  68.           map.panTo(marker.getPosition());
  69.           info_box_park.scrollIntoView({ behavior: 'smooth',});
  70.  
  71.           if (currently_highlighted) document.getElementById(currently_highlighted).style.backgroundColor = "white";
  72.           currently_highlighted = info_box_park.id;
  73.           info_box_park.style.backgroundColor = "#f2f2f2";
  74.  
  75.           if (marker_selected) marker_selected.setIcon('https://i.imgur.com/5rNpwiF.png')
  76.           marker_selected = marker;
  77.           marker.setIcon('https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-blue.png&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1')
  78.        }
  79.  
  80.        // my own "scroll" function, does the same as zoom - scrolling the park into view upon being called
  81.        function scroll(){
  82.          map.setZoom(12);
  83.           map.panTo(marker.getPosition());
  84.  
  85.           if (currently_highlighted) document.getElementById(currently_highlighted).style.backgroundColor = "white";
  86.           currently_highlighted = info_box_park.id;
  87.           info_box_park.style.backgroundColor = "#f2f2f2";
  88.  
  89.           if (marker_selected) marker_selected.setIcon('https://i.imgur.com/5rNpwiF.png')
  90.           marker_selected = marker;
  91.           marker.setIcon('https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-blue.png&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1')
  92.        }
  93.  
  94.        // listener to call the zoom function for when a marker is clicked on
  95.        marker.addListener('click', function(){zoom();});
  96.  
  97.         // listener we put on the info_box_park div when clicked on, it'll centre the map on the marker
  98.         info_box_park.addEventListener('click', function(){scroll();});
  99.       }
  100.     }
  101.   </script>
  102.   <!-- script to load the google maps JS API to use on the front end of our web app -->
  103.   <!-- this will try to load a function called init map -->
  104.   <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAdojekZi5cr_AdmgSpt_4KIS_JA0x8Ax0&callback=initMap">
  105.   </script>
  106.   <!-- https://www.w3schools.com/css/css3_flexbox.asp -->
  107.   <!-- div to place the map on the left side of the window -->
  108.   <div class="flex-container">
  109.     <!-- div to place the text on the right hand side of the window -->
  110.     <!-- also use jinja to dynamically name each heading and paragraph of each park in this generated list for us to loop through later with JS -->
  111.     <div class="col-md-4">
  112.       <div class="margin: auto 1.5em; display: inline-block">
  113.         <div class="Skatepark list">
  114.           <!-- jinja forloop to create unique divs for each park from my python dict-->
  115.           {% for dictionary in index_park_info %}
  116.           <div class="list_item" id="Park {{ dictionary["place_id"] }}">
  117.             <h5 class="{{ dictionary["place_id"] }}">
  118.               {{ dictionary["name"] }}
  119.             </h5>
  120.             <p class="{{ dictionary["place_id"] }}">
  121.               {{ dictionary["formatted_address"] }}
  122.             </p>
  123.             {% if dictionary["phone"] is not none %}
  124.             <p class="{{ dictionary["place_id"] }}">
  125.               {{ dictionary["phone"] }}
  126.             </p>
  127.             {% endif %}
  128.             {% if dictionary["website"] is not none %}
  129.             <p class="{{ dictionary["place_id"] }}">
  130.               <a href= "{{ dictionary["website"] }}" > Website </a>
  131.             </p>
  132.             {% endif %}
  133.             <!-- boostrap buttons to add that park to the users saved park and also navigate them to the reviews tab!-->
  134.             <!-- create a button that calls a python function in my flask webserver when its pressed -->
  135.             <button type="button" class="btn btn-outline-primary add_to_parks_buttons" id="{{ dictionary["place_id"] }}">Add to My Parks</button>
  136.             <button type="button" class="btn btn-outline-info" id="{{ dictionary["place_id"] }}">Reviews</button>
  137.           </div>
  138.           {% endfor %}
  139.           <!-- call MapAjax.js script to loop through all of my divs & take the "park_id" from the buttons in these divs, & send that id to flask with ajax -->
  140.           <script src="static/js/AjaxMapErrors.js"></script>
  141.         </div>
  142.       </div>
  143.     </div>
  144.     <!-- https://www.youtube.com/watch?v=tiV4hJ30zIc -->
  145.     <div class="col-md-8">
  146.       <div class="margin: auto 1.5em; display: inline-block">
  147.         <!-- https://www.youtube.com/watch?v=x99gNzHtm0k -->
  148.         <!-- https://stackoverflow.com/questions/16466240/adjusting-and-image-size-to-fit-a-div-bootstrap -->
  149.         <div id="map"></div>
  150.       </div>
  151.     </div>
  152.   </body>
  153.   {% endblock %}
  154.  
Add Comment
Please, Sign In to add comment
Public Pastes
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!