Merge pull request #32 from kchendv/map-fix

Map fix
illinois · Dec 10, 2021 · ed7d8f7 · ed7d8f7
2 parents 751e47c + e90a247
commit ed7d8f7
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 28 deletions.
diff --git a/app.py b/app.py
@@ -13,12 +13,12 @@
 
 
 # Route for "/" (frontend):
-@app.route('/kevin')
+@app.route('/')
 def index():
     return render_template("index.html")
 
 # Route for old (plain) frontend:
-@app.route('/')
+@app.route('/plain')
 def index_plain():
     return render_template("index_plain.html")
 

diff --git a/templates/index.html b/templates/index.html
@@ -5,9 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyApvmRBP7ii6WIkPv8vWKeRGOaaGpYXtok"></script>
-    <!-- Location picker  -->
-    <script src="https://unpkg.com/location-picker/dist/location-picker.min.js"></script>
+    <!-- Leaflet JS  -->
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+    crossorigin=""/>
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
+    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+    crossorigin=""></script>
     <!-- Masonry -->
     <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
     <!-- Tile Functions -->
@@ -16,9 +20,8 @@
     <title>MIX :: CS 240</title>
     <script>
       function sendPOST() {
-        var location = lp.getMarkerPosition();
-        var bound_lng = (location.lng % 360 + 540) % 360 - 180 // Restricts the longitude to [180,-180]
-        let formData = { location: location.lat + ',' + bound_lng};
+        let formData = { location: document.getElementById("displayLat").innerText
+                        + ',' + document.getElementById("displayLng").innerText};
 
         $.post("/MIX", formData)
         .done(function (data) {
@@ -66,10 +69,10 @@
   <body>
     <main class="container">
       <h1>Welcome to <span class="mix">MIX</span>!</h1>
-      <!-- Location picker display -->
+      <!-- Map display -->
       <div id="map"></div>
-      <p><b>Latitude: <span id="onIdleLat"></span></b>
-      <br><b>Longitude: <span id="onIdleLng"></span></b></p>
+      <p><b>Latitude: <span id="displayLat"></span></b>
+      <br><b>Longitude: <span id="displayLng"></span></b></p>
       <br>
       <button onclick="sendPOST();" class="btn btn-secondary">MIX it!</button>
       <br>
@@ -78,25 +81,33 @@ <h1>Welcome to <span class="mix">MIX</span>!</h1>
     </main>
 
     <script>
-      // Get element references
-      var onIdleLat = document.getElementById('onIdleLat');
-      var onIdleLng = document.getElementById('onIdleLng');
-      // Initialize locationPicker plugin
-      var lp = new locationPicker('map', {
-        setCurrentPosition: true, // You can omit this, defaults to true
-      }, {
-        zoom: 3 // You can set any google map options here
-      });
+      var defaultLat = 40.1125;
+      var defaultLng = -88.2284;
+      var displayLat = document.getElementById('displayLat');
+      var displayLng = document.getElementById('displayLng');
+      displayLat.innerHTML = defaultLat;
+      displayLng.innerHTML = defaultLng;
+      var map = L.map('map').setView([defaultLat, defaultLng], 1); // Set default center and zoom level
 
-      // Listen to map idle event, listening to idle event more accurate than listening to ondrag event
-      google.maps.event.addListener(lp.map, 'idle', function (event) {
-        // Get current location and show it in HTML
-        var location = lp.getMarkerPosition();
-        var bound_lng = (location.lng % 360 + 540) % 360 - 180 // Restricts the longitude to [180,-180]
-        onIdleLat.innerHTML = location.lat;
-        onIdleLng.innerHTML = bound_lng;
-      });
+      var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+            maxZoom: 18,
+            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
+              'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+            id: 'mapbox/streets-v11',
+            tileSize: 512,
+            zoomOffset: -1
+          }).addTo(map);
+
+      var marker = L.marker([defaultLat,defaultLng]).addTo(map)
 
+      function onMapClick(e) {
+        marker
+          .setLatLng(e.latlng);
+          displayLat.innerHTML = e.latlng.lat;
+          displayLng.innerHTML = (e.latlng.lng % 360 + 540) % 360 - 180; // Restricts the longitude to [180,-180]
+      }
+
+      map.on('click', onMapClick);
       var grid = document.querySelector('.grid');
       var msnry = new Masonry( grid, {itemSelector: '.grid-item'});
     </script>