color selected

index.html

@@ -81,14 +81,40 @@
 		})
 		});
 
+		var highlightStyle = new ol.style.Style({
+					image: new ol.style.Circle({
+						radius: 4,
+						fill: new ol.style.Fill({color: 'green'})
+					})
+				});
+
+		var defaultStyle = new ol.style.Style({
+					image: new ol.style.Circle({
+						radius: 4,
+						fill: new ol.style.Fill({color: 'red'})
+					})
+				});
+
+		var highlighted = [];
+
 		map.on("pointermove", e => {
+			var newhighlighted = [];
+
 			//gather overlay information
 			var fids = [];
 			map.forEachFeatureAtPixel(e.pixel, feature => {
 				var fid = feature.getProperties().id;
 				fids.push(fid);
+				feature.setStyle(highlightStyle);
+				newhighlighted.push(feature);
 			})
 
+			if(newhighlighted.length > 0) {
+				//remove highlight style
+				highlighted.filter(h => newhighlighted.indexOf(h) == -1).forEach(h => h.setStyle(defaultStyle));
+				highlighted = newhighlighted;
+			}
+
 			// display information
 			if(fids.length > 0)
 				overlaytest.innerHTML = "";
@@ -118,19 +144,16 @@
 		}
 
 		function addElement(data, features) {
-			//console.log(data);
 			var elem = new Entry(data);
-			console.log(elem);
 			var id = entryList.length;
 			entryList.push(elem);
 			var dot = ol.proj.fromLonLat(elem.loc);
 			if(!isInit) {
 				isInit = true;
 				map.setView(new ol.View({center: dot, zoom: zoomstart}));
-				console.log(dot);
+				console.log(dot);			//console.log(data);
 			}
 
-
 			var feat = new ol.Feature({
 				geometry: new ol.geom.Point(dot),
 				type: 'point',
@@ -142,7 +165,6 @@
 
 		function loadedFile(text) {
 			var lines = text.split("\n");
-			console.group();
 			var features = [];
 			for(var i = 1; i < lines.length; ++i) {
 				var line = lines[i];
@@ -155,7 +177,6 @@
 
 				addElement(lineSplit, features);
 			}
-			console.groupEnd();
 
 			updateMap(features);
 		}