Add padding to bounds to display all markers (#6)

ThomasSmyth · May 19, 2018 · 6a601c2 · 6a601c2
2 parents fe79a79 + d796da5
commit 6a601c2
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/html/js/webpage.js b/html/js/webpage.js
@@ -55,6 +55,7 @@ function showMap(){
   attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
   }).addTo(map);
 
+  map.setView([0, 0], 1);
 }
 
 function clearMap() {
@@ -79,15 +80,14 @@ function get_random_colour() {
 }
 
 function plotMarkers(bounds, markArray){
-  showMap();
-  map.fitBounds(bounds);
+  map.flyToBounds(bounds, {padding:[50,50]})
   clearMap();
 
   // loop over each marker and add to map
   marksLayerGroup = L.layerGroup();
 
   markArray.forEach(function(mark){
-    marksLayerGroup.addLayer(L.marker([mark[1],mark[2]]).bindPopup(mark[0])).addTo(map);
+    marker = new L.marker([mark[1],mark[2]]).bindPopup(mark[0]).addTo(map)
   });
 }
 
@@ -115,13 +115,9 @@ ws.onmessage = function (event) {
 
     // Enable submit button
     $('#submit').attr("disabled",false);
-    $('#map_placeholder').hide();
 
     // Map handling functionality
     if(edata.hasOwnProperty('markers')){
-      $('#map_placeholder').show();
-      $('#map_placeholder').html("").append('<div id="map"></div>');
-
       plotMarkers(bounds,markers);
     }
 
@@ -133,6 +129,7 @@ ws.onmessage = function (event) {
       if(name === 'init'){
         // stylise field val into field: val
         $('#processing').hide();
+        showMap();
       }
 
       // Output table data

diff --git a/html/setlistfm-mapper.html b/html/setlistfm-mapper.html
@@ -41,13 +41,12 @@ <h4>Enter username</h4>
       <div class="row">
         <div class="col-md-12" id="connecting"><h4 style="text-align:center;">Connecting...</h4></div>
         <div id="processing" style="display:none;"><h4 style="text-align:center;">Processing Query...</h4></div>
+        <center>
+        <div id="map"></div>
+        </center>
         <div class="col-md-12" style="display:none;" id="tableoutput"></div>
       </div>
     </div>
-<!-- Display map here -->
-<center>
-    <div id="map_placeholder" style="display:none;"></div>
-</center>
 <!-- Modal used to display errors -->
 <div class="modal fade" id="error-modal">
   <div class="modal-dialog">