[Test- Mapea5] Label

Etiquetado Poligonos

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 id="nOv">
Overflow: false
</button>
<button id="ov">
Overflow: true
</button>
</div>

CSS

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

 .div-info {
   position: fixed;
   bottom: inherit;
   left: initial;
   top: 0;
   right: 0;
   height: 200px;
   width: 50%;
   z-index: 9999;
 }

 .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;
 }*/

 .alert {
   padding: 20px;
   background-color: #EFF5FB;
   color: black;
   position: absolute;
   bottom: 0;
   left: 0;
   opacity: 0.8;
   z-index: 9999;
   overflow: auto;
   width: 50%;
   height: 50%;
   display: none;
   border-radius: 5px;
   box-shadow: 8px -8px 10px -4px rgba(0, 0, 0, .53);
   border: 1px solid #ccc;
 }

 .closebtn {
   margin-left: 15px;
   color: black;
   font-weight: bold;
   float: right;
   font-size: 22px;
   line-height: 20px;
   cursor: pointer;
   transition: 0.3s;
 }

 .closebtn:hover {
   color: black;
 }

JavaScript

var mapajs = M.map({
       'container': 'map',
       "controls": ["layerswitcher", "mouse", "scale", "overviewmap", "panzoombar", "scaleline", ],
       "wmcfile": ["cdau", "cdau_satelite"]
     });

     // Creamos la capa
     var layer = new M.layer.WFS({
       namespace: 'mapea',
  name: 'da_provincia',
  url: 'http://clientes.guadaltel.es/desarrollo/geossigc/ows?',
  legend: 'Prestaciones - Ámbito municipal',
     });

mapajs.addLayers(layer);

const style = new M.style.Polygon({
  fill: {
    color: 'yellow',
  },
  stroke: {
    color: 'black',
    width: 2,
  },
  label: {
    text: '{{nombre}}',
    scale: 2,
  },
});

layer.setStyle(style);

const styleOverflow = new M.style.Polygon({
  fill: {
    color: 'yellow',
  },
  stroke: {
    color: 'black',
    width: 2,
  },
  label: {
    text: '{{nombre}}',
    scale: 2,
    overflow: false,
  },
});

document.querySelector('#nOv').onclick = () => {
layer.setStyle(styleOverflow);
}

document.querySelector('#ov').onclick = () => {
layer.setStyle(style);
}