CP-074-01

Estadísticos Cluster

by SIGC

HTML

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

CSS

<style rel="stylesheet">
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }

JavaScript

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


      let points = new M.layer.GeoJSON({
        name: "Empresas",
        url: "http://geostematicos-sigc.juntadeandalucia.es/geoserver/sepim/wfs?outputFormat=application/json&request=getfeature&typeNames=sepim:empresas&version=1.3.0",
        extract: false
      });

      mapajs.addLayers([points]);
			

      var options = {
        ranges: [
          /*{min:1, max:1, style: new M.style.Point({
              fill: {
                color: 'red'
              },
              radius: 15
            })},*/

          {
            min: 2,
            max: 3,
            style: new M.style.Point({
              fill: {
                color: 'blue'
              },
              radius: 5
            })
          },
          {
            min: 3,
            max: 5,
            style: new M.style.Point({
              fill: {
                color: 'orange'
              },
              radius: 10
            })
          },
          {
            min: 5,
            max: 10,
            style: new M.style.Point({
              fill: {
                color: 'blue'
              },
              radius: 15
            })
          },
          {
            min: 10,
            max: 15,
            style: new M.style.Point({
              fill: {
                color: 'red'
              },
              radius: 20
            })
          },
          {
            min: 15,
            max: 20,
            style: new M.style.Point({
              fill: {
                color: 'orange'
              },
              radius: 25
            })
          }
          /* ,
                       {min:20, max:50000, style: new M.style.Point({
                         fill: {
                           color: 'black'
                         },
                         radius: 5
                      ...