feat: change layer order and style

src/app.component.js

@@ -62,19 +62,24 @@ export const HsComponent = {
 
 let randomColorPalette = [];
 
-const stroke = new Stroke({
-  color: '#3399CC',
-  width: 0.25,
+const nuts2style = new Style({
+  stroke: new Stroke({
+    color: '#FFFFFF',
+    width: 0.5,
+  }),
 });
 
-const styles = function (feature) {
+const nuts3style = function (feature) {
   if (isNaN(feature.get('km25.cluster'))) {
     return [
       new Style({
         fill: new Fill({
           color: '#FFF',
         }),
-        stroke: stroke,
+        stroke: new Stroke({
+          color: '#3399CC',
+          width: 0.25,
+        }),
       }),
     ];
   } else {
@@ -83,7 +88,6 @@ const styles = function (feature) {
         fill: new Fill({
           color: randomColorPalette[feature.get('km25.cluster') - 1],
         }),
-        //stroke: stroke,
       }),
     ];
   }
@@ -91,8 +95,9 @@ const styles = function (feature) {
 
 export const nuts2Layer = new VectorLayer({
   source: nuts.nuts2Source,
-  visible: false,
-  style: styles,
+  editor: {editable: false},
+  visible: true,
+  style: nuts2style,
   title: 'NUTS2 regions',
 });
 
@@ -100,7 +105,7 @@ export const nuts3Layer = new VectorLayer({
   source: nuts.nuts3Source,
   editor: {editable: false},
   visible: true,
-  style: styles,
+  style: nuts3style,
   title: 'NUTS3 regions',
 });
 nuts3Layer.set('popUp', {

src/app.module.js

@@ -58,8 +58,8 @@ angular
         base: true,
         removable: false,
       }),
-      nuts2Layer,
       nuts3Layer,
+      nuts2Layer,
     ],
     popUpDisplay: 'hover',
     project_name: 'erra/map',