V4_2_0_FACT_ASSDACIPS_DEMO01

Demo ASSDA-CIPS. Filtros tipología - clúster

by SIGC GUADALTEL

HTML

<script src="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/js/mapea.ol.min.js"></script>
<script src="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/js/configuration.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea42_factoria/assets/css/mapea.ol.min.css">
<div id="map"></div>

CSS

html,
 body {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow: hidden;
 }
 
 .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", ],
       "wmcfile": ["cdau", "cdau_satelite"],
       "getfeatureinfo": "plain"
     });


     var centros = new M.layer.WFS({
       name: "Centros ASSDA",
       url: "https://clientes.guadaltel.es/desarrollo/geossigc/wfs?",
       namespace: "mapea",
       name: "centrosassda",
       legend: "centrosassda",
       getfeatureinfo: "plain",
       geometry: 'POINT',
       extract: true,
     });

     centros.on(M.evt.LOAD, function() {
       centros.setStyle(categoryStyle);
       centros.setStyle(new M.style.Cluster(options, vendorParameters));
     });
     centros.on(M.evt.SELECT_FEATURES, function(features, evt) {
       let feature = features[0];
       if (feature instanceof M.ClusteredFeature) {
         console.log('Es un cluster');
       } else {
         let fs = "<table width='500'>";
         Object.keys(feature.getAttributes()).forEach(key => {
           if (feature.getAttribute(key) != "") {
             fs += `<tr><td>\t<b>${key}</b>: ${feature.getAttribute(key)}</tr></td>`;
           }
         });
         fs += '</table>';
         
        
         //mapajs.removeLabel();
         //mapajs.getImpl().addLabel(new M.Label(fs,evt.coord,true));
         mapajs.addLabel(fs,evt.coord);
         //mapajs.addPopup(popup, evt.coord);
         //console.log(fs);
       }
     });
     
     mapajs.addLayers(centros);

     //mapajs.addPlugin(new M.plugin.AttributeTable());

     let estiloSubtipoDefPink = new M.style.Point({
       fill: {
         color: 'red'
       },
       stroke: {
         color: 'red',
         width: 5
       },
       radius: 15
     });

     let dia = new M.style.Point({
       icon: {
         src: 'http://mapabienestarsocial.iass.es/wp-content/plugins/tfecom-maps/images/discapacidad_recursos.png',
         scale: 1
       },
     });

     let noche = new...