+ <script>
+ var map = L.map('mapid').setView([0,0], 1);
+ L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
+ maxZoom: 18,
+ attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+ '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+ 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
+ id: 'mapbox.streets'
+ }).addTo(map);
+
+ var default_elt = { 'text': _("Main library"), 'id': 'UsageStatsGeolocation' };
+ var current_elt = default_elt;
+
+ // Add the title
+ var title = L.control({position: 'topright'});
+ title.onAdd = function (map) {
+ this._div = L.DomUtil.create('div', 'title');
+ this.update();
+ return this._div;
+ };
+ title.update = function (props) {
+ this._div.innerHTML = '<h4>' + _("Click on the map to set the geolocation for %s").format(current_elt.text) + '</h4>';
+ };
+ title.addTo(map);
+
+ var markers = {};
+ function add_to_map(elt, latlng) {
+ var marker = markers[elt.id];
+ if (marker) map.removeLayer(marker);
+ marker = L.marker(latlng).addTo(map);
+ marker.bindPopup(elt.text);
+ marker.on('mouseover', function (e) {this.openPopup(); });
+ marker.on('mouseout', function (e) {this.closePopup();});
+ markers[elt.id] = marker;
+ }
+
+ // Init the map
+ [% IF Koha.Preference('UsageStatsGeolocation') %]
+ var latlng = [ [% Koha.Preference('UsageStatsGeolocation') %] ];
+ add_to_map( current_elt, latlng );
+ [% END %]
+ [% FOR l IN libraries %]
+ [% NEXT UNLESS l.geolocation %]
+ add_to_map( { 'text': "[% l.branchname %]", 'id': "geolocation_[% l.branchcode %]" }, [ [% l.geolocation %] ] );
+ [% END %]
+
+ // On click, update the geolocation and the marker
+ map.on('click', function(e){
+ add_to_map( current_elt, e.latlng );
+ $("#" + current_elt.id).val(e.latlng.lat + ',' + e.latlng.lng);
+ });
+
+ // Auto zoom
+ var group = new L.featureGroup(Object.keys(markers).map(function(key){return markers[key]}));
+ if ( group.getBounds().isValid() ) map.fitBounds(group.getBounds());
+
+ // On click on the marker icons, update the title of the map
+ $(document).ready(function(){
+ $(".change_geolocation").on('click', function(e){
+ e.preventDefault();
+ if ( $(this).data('branchname') ) {
+ current_elt = { 'text': $(this).data('branchname'), 'id': $(this).data('id') };
+ } else {
+ current_elt = default_elt;
+ }
+ title.update();
+ });
+ $("#UsageStatsLibrariesInfo").change();
+ });
+
+ $("#UsageStatsLibrariesInfo").on('change', function(){
+ if ( $(this).val() == 1 ) $("#libraries_info").show()
+ else $("#libraries_info").hide();
+ });
+
+ </script>
+