Estilo Feature + AddLayer

Prueba para testear el funcionamiento de estilos cuando se añaden features a una capa

by SIGC GUADALTEL

HTML

<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/geosearchbylocation/geosearchbylocation.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/assets/css/mapea.ol.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/wfstcontrols/wfstcontrols.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/geosearch/geosearch.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/printer/printer.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/measurebar/measurebar.min.css">
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/streetview/streetview.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/vendor/browser-polyfill.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/js/mapea.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/js/configuration.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/geosearchbylocation/geosearchbylocation.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/wfstcontrols/wfstcontrols.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/geosearch/geosearch.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/printer/printer.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/measurebar/measurebar.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/attributetable/attributetable.ol.min.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_dev/plugins/attributetable/attributetable.min.css">
<button id="categoria"...

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: scroll;
}

.m-popup {
  position: fixed;
  bottom: inherit;
  left: initial;
  top: 0;
  right: 0;
  z-index: 9999;
}

.m-popup:before {
  border-top-color: initial;
  border-width: 0;
  left: inherit;
  margin-left: 0;
}

.m-popup:after,
.m-popup:before {
  top: 0;
  border: inherit;
  content: " ";
  height: 0;
  width: 0;
  position: inherit;
  pointer-events: inherit;
}

.m-popup tr:nth-child(odd) {
  background-color: rgba(41, 105, 168, 0.78);
  color: white;
}

.tooltip {
  position: relative;
  padding: 3px;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  opacity: 0.7;
  white-space: nowrap;
  font: 10pt sans-serif;
}

#categoria {
  background-color: rgba(55, 126, 235, 0.64);
  padding: 6px;
  border: 2px solid black;
}

.panel {
  display: none;
  padding: 10px;
  background-color: #f6f6f6;
  width: 200px;
  cursor: pointer;
}

.closePanel {
  display: none;
}

.openPanel {
  display: block;
  position: fixed;
  bottom: inherit;
  left: initial;
  top: 0;
  right: 0;
  z-index: 9999;
  border: 6px solid #5e8fb7;
}

JavaScript

var mapajs = M.map({
  'container': 'map',
  "controls": ["layerswitcher", "mouse", "scale", "overviewmap", "panzoombar", "scaleline", ],
  "getfeatureinfo": "plain",
  "layers": ["OSM"],
  "projection": "EPSG:4326*d",
  "zoom": 6,
  center: [-4.383056640625,
    38.3002752813443
  ]
});



let points = new M.layer.GeoJSON({
  name: "points",
  source: {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "properties": {
        "alumnos": 400,
        "colegios": 2,
        "tipo": "publico"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-6.383056640625,
          37.3002752813443
        ]
      }
    }, {
      "type": "Feature",
      "properties": {
        "alumnos": 340,
        "colegios": 5,
        "tipo": "publico"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-6.119384765624999,
          37.60552821745789
        ]
      }
    }, {
      "type": "Feature",
      "properties": {
        "alumnos": 675,
        "colegios": 3,
        "tipo": "privado"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-5.679931640625,
          37.43997405227057
        ]
      }
    }, {
      "type": "Feature",
      "properties": {
        "alumnos": 440,
        "colegios": 2,
        "tipo": "concertado"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-6.0205078125,
          37.17782559332976
        ]
      }
    }, {
      "type": "Feature",
      "properties": {
        "alumnos": 520,
        "colegios": 6,
        "tipo": "concertado"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-5.47119140625,
          37.84015683604136
        ]
      }
    }, {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [-5.2294921875,
          37.483576550426996
        ]
      }
    }, {
      "type": "Feature",
      "properties":...