add names, bugfixes, colors

src/app.js

@@ -1,5 +1,6 @@
 import Map from 'ol/Map.js';
 import View from 'ol/View.js';
+import {defaults as defaultControls, Attribution as AttributionControl} from 'ol/control.js';
 import {all as allStrategy} from 'ol/loadingstrategy';
 import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
 import TileLayer from 'ol/layer/Tile';
@@ -11,7 +12,7 @@ import VectorSource from 'ol/source/Vector.js';
 import VectorTileLayer from 'ol/layer/VectorTile.js';
 import VectorTileSource from 'ol/source/VectorTile.js';
 import OSMXML from 'ol/format/OSMXML.js';
-import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
+import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style.js';
 
 
 const coordinate_cccamp19 = fromLonLat([13.30735, 53.03127]);
@@ -38,6 +39,16 @@ var styles = {
 			}),
 			fill: new Fill({
 				color: 'rgba(246, 99, 79, 0.3)'
+			}),
+			text: new Text({
+				font: '12px Calibri,sans-serif',
+				fill: new Fill({
+					color: '#000'
+				}),
+				stroke: new Stroke({
+					color: '#fff',
+					width: 3
+				})
 			})
 		})
 	},
@@ -58,11 +69,21 @@ var styles = {
 	'landuse': {
 		'forest|grass|allotments': new Style({
 			stroke: new Stroke({
-				color: 'rgba(140, 208, 95, 1.0)',
+				color: 'rgba(0, 0, 170, 1.0)',
 				width: 1
 			}),
 			fill: new Fill({
-				color: 'rgba(140, 208, 95, 0.3)'
+				color: 'rgba(0, 0, 170, 0.3)'
+			}),
+			text: new Text({
+				font: '12px Calibri,sans-serif',
+				fill: new Fill({
+					color: '#000'
+				}),
+				stroke: new Stroke({
+					color: '#fff',
+					width: 3
+				})
 			})
 		})
 	},
@@ -76,6 +97,20 @@ var styles = {
 				stroke: null
 			})
 		})
+	},
+	'name': {
+		'.*': new Style({
+			text: new Text({
+				font: '12px Calibri,sans-serif',
+				fill: new Fill({
+					color: '#000'
+				}),
+				stroke: new Stroke({
+					color: '#fff',
+					width: 3
+				})
+			})
+		})
 	}
 };
 
@@ -106,12 +141,13 @@ var vectorSource = new VectorTileSource({
 
 var map = new Map({
   target: 'map',
+  controls: defaultControls().extend([
+  ]),
+  numZoomLevels: 19,
+  units: 'm',
   layers: [
     new TileLayer({
-      source: new XYZ({
-        url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
-      })
-      //source: OSM()
+      source: new OSM()
     }),
     new VectorTileLayer({
       source: vectorSource,
@@ -121,7 +157,15 @@ var map = new Map({
           if (value !== undefined) {
             for (var regexp in styles[key]) {
               if (new RegExp(regexp).test(value)) {
-                return styles[key][regexp];
+                var style = styles[key][regexp];
+                if(feature.get('name') !== undefined ) {
+                  var text = feature.get('name');
+                  if(feature.get('size') !== undefined) {
+                    text += '\n' + feature.get('size');
+                  }
+                  style.getText().setText(text);
+                }
+                return style;
               }
             }
           }