diff --git a/cmd/mtwebmapper/web/index.html b/cmd/mtwebmapper/web/index.html index 5142445..debdfc1 100644 --- a/cmd/mtwebmapper/web/index.html +++ b/cmd/mtwebmapper/web/index.html @@ -95,8 +95,8 @@ L.control.coordinates({ }).addTo(map); var manualUpdateControl; -L.autoUpdate('autoUpdate', function(e) { - if (e.target.checked) { +L.autoUpdate('autoUpdate', function(pressed) { + if (pressed) { manualUpdateControl.getContainer().style = 'visibility: hidden'; } else { diff --git a/cmd/mtwebmapper/web/js/auto-update.js b/cmd/mtwebmapper/web/js/auto-update.js index 69ac090..a689bc2 100644 --- a/cmd/mtwebmapper/web/js/auto-update.js +++ b/cmd/mtwebmapper/web/js/auto-update.js @@ -3,23 +3,31 @@ L.Control.AutoUpdate = L.Control.extend({ position: 'topleft', label: 'Automatic update' }, + pressed: true, onAdd: function() { var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control'); - container.innerHTML = '
'; - L.DomEvent.on(container, 'click', this.cbClick, this); + this.link = L.DomUtil.create('a', 'leaflet-bar-part', container); + this.iconStart = L.DomUtil.create('i', 'fa fa-play', this.link); + this.link.href = '#'; + L.DomEvent.on(this.link, 'click', this.cbClick, this); return container; }, cbClick: function (e) { L.DomEvent.stopPropagation(e); - this.intendedFunction(e); - if (e.target.checked) { + this.intendedFunction(this.pressed); + if (this.pressed) { + this.pressed = false; + this.iconStart.setAttribute('class', 'fa fa-pause'); this.autoUpdate(); + return; } - if (!e.target.checked) { + if (!this.pressed) { + this.pressed = true; + this.iconStart.setAttribute('class', 'fa fa-play'); this.stopUpdate(); + return; } },