Add a "recenter on building" button on map

A public path is added in webpack.config.js because of a problem with font loading.
cf. coryhouse/react-slingshot#125

Author: tpetillon

entry.js

@@ -10,12 +10,19 @@ var Session = require('./session.js');
 var BuildingService = require('./buildingservice.js');
 var LoadingStatus = require('./loadingstatus.js');
 
+require('leaflet-easybutton');
+
 require('leaflet/dist/leaflet.css');
+require('leaflet/dist/images/marker-icon.png');
+require('leaflet/dist/images/marker-icon-2x.png');
+require('leaflet/dist/images/marker-shadow.png');
+require('leaflet-easybutton/src/easy-button.css');
+require('font-awesome/css/font-awesome.css');
 require('./style.css');
 
 // since leaflet is bundled into the browserify package it won't be able to detect where the images
 // solution is to point it to where you host the the leaflet images yourself
-//L.Icon.Default.imagePath = 'http://cdn.leafletjs.com/leaflet-0.7.3/images';
+L.Icon.Default.imagePath = 'http://cdn.leafletjs.com/leaflet-0.7.3/images';
 
 $("body").append("<div id='wrapper'></div>");
 var wrapper = $("body").children("#wrapper");
@@ -38,6 +45,7 @@ wrapper.children("#footer").append(
 
 var _username = undefined;
 var _map = undefined;
+var _recenterButton = undefined;
 var _buildingPolygon = undefined;
 var _session = new Session();
 var _loadingStatus = new LoadingStatus();
@@ -93,8 +101,6 @@ function fetchUserName(callback) {
     });
 };
 
-_loadingStatus.addListener(updateButtons);
-
 function updateButtons()
 {
     var loading = _loadingStatus.isLoading;
@@ -106,6 +112,12 @@ function updateButtons()
     if (_session.currentIndex <= 0) {
         $("#previous-building").prop('disabled', true);
     }
+    
+    if (_session.currentIndex < 0) {
+        _recenterButton.disable();
+    } else {
+        _recenterButton.enable();
+    }
 }
 
 function updateConnectionStatusDisplay() {
@@ -120,9 +132,6 @@ function updateConnectionStatusDisplay() {
     }
 }
 
-updateConnectionStatusDisplay();
-updateButtons();
-
 if (auth.authenticated()) {
     $("#connection-status").text("Connected, retrieving username...");
     fetchUserName();
@@ -210,8 +219,35 @@ document.getElementById('next-building').onclick = function() {
     displayNextBuilding();
 };
 
-var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
-var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
-var osm = new L.TileLayer(osmUrl, {minZoom: 0, maxZoom: 18, attribution: osmAttrib});
-_map = L.map('map').setView([46.935, 2.780], 7);
-_map.addLayer(osm);
+function init() {
+    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+    var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
+    var osm = new L.TileLayer(osmUrl, {minZoom: 0, maxZoom: 18, attribution: osmAttrib});
+    _map = L.map('map').setView([46.935, 2.780], 7);
+    _map.addLayer(osm);
+    
+    _recenterButton = L.easyButton(
+        'fa-crosshairs fa-lg',
+        function(button, map) {
+            if (defined(_buildingPolygon)) {
+                _map.fitBounds(_buildingPolygon.getBounds());
+            }
+        },
+        '', // title
+        'recenter-button' // id
+    );
+    _recenterButton.addTo(_map);
+    _recenterButton.disable();
+    
+    // Set the title here and not in the button constructor because when set by
+    // the constructor, the title is only displayable when the button is active.
+    // With this alternative way its always displayable.
+    $("#recenter-button").closest(".leaflet-control").prop("title", "Recenter on building");
+    
+    _loadingStatus.addListener(updateButtons);
+    
+    updateConnectionStatusDisplay();
+    updateButtons();
+}
+
+init();

package.json

@@ -7,8 +7,10 @@
     "css-loader": "^0.23.1",
     "defined": "^1.0.0",
     "file-loader": "^0.9.0",
+    "font-awesome": "^4.6.3",
     "jquery": "^3.1.0",
     "leaflet": "^0.7.7",
+    "leaflet-easybutton": "^1.3.1",
     "osm-auth": "https://github.com/tpetillon/osm-auth#landing-url",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7"

webpack.config.js

@@ -2,12 +2,15 @@ module.exports = {
     entry: "./entry.js",
     output: {
         path: __dirname,
+        publicPath: 'http://localhost:8080/',
         filename: "bundle.js"
     },
     module: {
         loaders: [
-            { test: /\.css$/, loader: "style!css" },
-            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
+            { test: /\.css$/, loader: 'style!css?sourceMap' },
+            { test: /\.(png)$/, loader: 'url-loader?limit=100000' },
+            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000" },
+            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }
         ]
     }
 };