Afficher un message en cas de clic sur le vector tile

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
 *****************************************/

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('<div id="map-zoom-hint">Zoomer pour pouvoir cliquer sur la carte</div>');
+		}
+
+		$('#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
 	// ---------------------------------------------------------