Added station labels. Resorted index.html.de

r652 www/trunk

.gitattributes

@@ -1,6 +1,7 @@
 * text=auto !eol
 www/external/TileLayer.Grayscale.js -text
 www/external/css/dvf.css -text
+www/external/css/leaflet.label.css -text
 www/external/first.png -text
 www/external/jquery.localtime-0.9.1.min.js -text
 www/external/jquery.tablesorter.min.js -text
@@ -11,6 +12,7 @@ www/external/last.png -text
 www/external/leaflet-dvf.markers.min.js -text
 www/external/leaflet.css -text
 www/external/leaflet.js -text
+www/external/leaflet.label.js -text
 www/external/next.png -text
 www/external/prev.png -text
 www/external/sprintf.min.js -text

www/events.js

@@ -145,6 +145,7 @@ function ajaxLoadEvents(stime, etime) {
 			$("#eventstable").trigger("sorton", [sort]);
 			initMapLink();
 			eventLayer.bringToBack();
+			highlightFirstEvent();
 		},
 		error: function( jqxhr, textStatus, error ) {
 			var err = textStatus + ", " + error;

www/external/css/leaflet.label.css

@@ -0,0 +1,54 @@
+.leaflet-label {
+	background: rgb(235, 235, 235);
+	background: rgba(235, 235, 235, 0.81);
+	background-clip: padding-box;
+	border-color: #777;
+	border-color: rgba(0,0,0,0.25);
+	border-radius: 4px;
+	border-style: solid;
+	border-width: 4px;
+	color: #111;
+	display: block;
+	font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-weight: bold;
+	padding: 1px 6px;
+	position: absolute;
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	    -ms-user-select: none;
+	        user-select: none;
+	pointer-events: none;
+	white-space: nowrap;
+	z-index: 6;
+}
+
+.leaflet-label.leaflet-clickable {
+	cursor: pointer;
+	pointer-events: auto;
+}
+
+.leaflet-label:before,
+.leaflet-label:after {
+	border-top: 6px solid transparent;
+	border-bottom: 6px solid transparent;
+	content: none;
+	position: absolute;
+	top: 5px;
+}
+
+.leaflet-label:before {
+	border-right: 6px solid black;
+	border-right-color: inherit;
+	left: -10px;
+}
+
+.leaflet-label:after {
+	border-left: 6px solid black;
+	border-left-color: inherit;
+	right: -10px;
+}
+
+.leaflet-label-right:before,
+.leaflet-label-left:after {
+	content: "";
+}

www/index.html.de

@@ -8,42 +8,40 @@
 
 	<!-- Style definitions -->
 	<link rel="stylesheet" href="main.css" />
-
-	<!-- jQuery & jQueryUI -->
 	<!-- link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" / -->
 	<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/cupertino/jquery-ui.css" />
+	<link rel="stylesheet" href="external/theme.blue.css"/>
+	<link rel="stylesheet" href="external/jquery.tablesorter.pager.css" />
+	<link rel="stylesheet" href="external/leaflet.css" />
+	<!-- link rel="stylesheet" href="external/css/dvf.css" type="text/css" media="screen" / -->
+	<link rel="stylesheet" href="external/css/leaflet.label.css" type="text/css" media="screen" />
+
+	<!-- jQuery & jQueryUI -->
 	<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 	<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 
-	<!-- Localtime -->
+	<!-- Localtime & sprintf -->
 	<script type="text/javascript" src="external/jquery.localtime-0.9.1.min.js"></script>
-
-	<!-- Tablesorter: required -->
-	<link rel="stylesheet" href="external/theme.blue.css"/>
-	<script type="text/javascript" src="external/jquery.tablesorter.min.js"></script>
-	<!-- script type="text/javascript" src="external/widget-scroller.js"></script -->
-	<script type="text/javascript" src="external/jquery.tablesorter.widgets.min.js"></script>
-	<script type="text/javascript" src="external/jquery.tablesorter.pager.min.js"></script>
-
-	<!-- misc functions -->
-	<script type="text/javascript" src="misc.js"></script>
-	<script type="text/javascript" src="geolocation.js"></script>
 	<script type="text/javascript" src="external/sprintf.min.js"></script>
 
-	<!-- Tablesorter: pager -->
+	<!-- Tablesorter: required -->
-	<link rel="stylesheet" href="external/jquery.tablesorter.pager.css" />
+	<script type="text/javascript" src="external/jquery.tablesorter.min.js"></script>
+	<script type="text/javascript" src="external/jquery.tablesorter.widgets.min.js"></script>
 	<script type="text/javascript" src="external/widget-pager.js"></script>
-	<script type="text/javascript" src="events.js"></script>
+	<!-- script type="text/javascript" src="external/jquery.tablesorter.pager.min.js"></script -->
+	<!-- script type="text/javascript" src="external/widget-scroller.js"></script -->
 
 	<!-- Leaflet -->
-	<link rel="stylesheet" href="external/leaflet.css" />
 	<script type="text/javascript" src="external/leaflet.js"></script>
 	<script type="text/javascript" src="external/TileLayer.Grayscale.js"></script>
-	<script type="text/javascript" src="map.js"></script>
-	<link rel="stylesheet" href="external/css/dvf.css" type="text/css" media="screen" />
 	<script type="text/javascript" src="external/leaflet-dvf.markers.min.js"></script>
+	<script type="text/javascript" src="external/leaflet.label.js"></script>
 
-	<!-- Stations -->
+	<!-- Map, Events & Stations -->
+	<script type="text/javascript" src="misc.js"></script>
+	<script type="text/javascript" src="geolocation.js"></script>
+	<script type="text/javascript" src="map.js"></script>
+	<script type="text/javascript" src="events.js"></script>
 	<script type="text/javascript" src="stations.js"></script>
 </head>
 

www/map.js

@@ -34,9 +34,8 @@ function addStationMarker(id, lat, lng, station) {
 			opacity: 1,
 			radius: config['station']['markerSize'][id] || config['station']['markerSize']['default'],
 			className: id+' stationMarker',
-			title: station,
-			alt: station,
 		});
+	marker.bindLabel('Station '+station);
 	stationLayer.addLayer(marker);
 	stationTable[id] = marker;
 };