diff --git a/public/views/css/d.map.css b/public/views/css/d.map.css index 0707982..f39af8f 100755 --- a/public/views/css/d.map.css +++ b/public/views/css/d.map.css @@ -17,6 +17,25 @@ footer { z-index: 10000; } +#map-zoom-hint { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background: #212121; + color: white; + text-align: center; + border: none; + font-size: 14px; + line-height: 30px; + padding: 0px 10px; + opacity: 0.9; + z-index: 2000; + display: none; + pointer-events: none; + white-space: nowrap; +} + /***************************************** Controls of the map *****************************************/ diff --git a/public/views/js/d.map.js b/public/views/js/d.map.js index 752530b..93ba2be 100755 --- a/public/views/js/d.map.js +++ b/public/views/js/d.map.js @@ -128,6 +128,35 @@ $(document).ready(function() { } ); + var mapZoomHintTimer = null; + + function showMapZoomHint() { + if ($('#map-zoom-hint').length === 0) { + $('#mapid').append('
Zoomer pour pouvoir cliquer sur la carte
'); + } + + $('#map-zoom-hint') + .stop(true, true) + .fadeIn(100) + .delay(1500) + .fadeOut(100); + } + + mymap.on('click', function(e) { + if (mymap.getZoom() < 10) { + if (mapZoomHintTimer) { + clearTimeout(mapZoomHintTimer); + mapZoomHintTimer = null; + return; + } + + mapZoomHintTimer = setTimeout(function() { + showMapZoomHint(); + mapZoomHintTimer = null; + }, 300); + } + }); + // --------------------------------------------------------- // ContrĂ´les // ---------------------------------------------------------