[Mapea5] Leyenda dinamica

by SIGC

HTML

<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/mapea.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/configuration.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea5/assets/css/mapea.ol.min.css">
<div id="map">
  <button onclick="changeLegend()">Cambiar Leyenda dinamica</button>
</div>

CSS

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

JavaScript

const mapajs = M.map({
   container: "map",
   controls: ["layerswitcher"]
 });

 const stylepoint = new M.style.Point({
   icon: {
     form: M.style.form.SQUARE,
     // form: form.CIRCLE,
     class: 'g-cartografia-bandera',
     fontsize: 0.5,
     radius: () => 15,
     color: 'red'
     // fill: 'black',
   },
 });

 const campamentos = new M.layer.WFS({
   url: 'http://geostematicos-sigc.juntadeandalucia.es/geoserver/sepim/ows',
   name: 'sepim:campamentos',
   legend: 'Campamentos',
   geometry: 'POINT',
   extract: true,
 }, {
   style: stylepoint
 });

 mapajs.addLayers(campamentos)

 function changeLegend() {
   M.utils.setDynamicLegend("https://pluralsight.imgix.net/paths/path-icons/nodejs-601628d09d.png?w=70");
  M.utils.setDynamicLegendWidth(100);
  M.utils.setDynamicLegendHeight(100);
 }