D3 Examples - COPAIBA V2

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='COPAIBA | Sistema de informacion pasa la Amazonia Indigena' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css'rel='stylesheet' />
    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
​
<style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
​
​
//Configurar menu
<style>
  #menu {
        background: #fff;
        position: absolute;
        z-index: 1;
        top: 10px;
        right: 50px;
        border-radius: 3px;
        width: 120px;
        border: 1px solid rgba(0,0,0,0.4);
        font-family: 'Open Sans', sans-serif;
    }
​
    #menu a {
        font-size: 13px;
        color: #404040;
        display: block;
        margin: 0;
        padding: 0;
        padding: 10px;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,0.25);
        text-align: center;
    }
​
    #menu a:last-child {
        border: none;
    }
​
    #menu a:hover {
        background-color: #f8f8f8;
        color: #404040;
    }
​
    #menu a.active {
        background-color: #257d3f;
        color: #ffffff;
    }
​
    #menu a.active:hover {
        background: #4dcb73;
    }
​
#menu aII {
        background: #fff;
        position: absolute;
        z-index: 1;
        top: 190px;
        right: -1px;
        border-radius: 3px;
        width: 120px;
        border: 1px solid rgba(0,0,0,0.4);
        font-family: 'Open Sans', sans-serif;
    }
​
#menu aII {
        font-size: 13px;
        color: #404040;
        display: block;
        margin: 0;
        padding: 0;
        padding: 10px;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,0.25);
        text-align: center;
    }
​
    #menu aII:last-child {
        border: none;
    }
​
    #menu aII:hover {
        background-color: #f8f8f8;
        color: #404040;
    }
​
    #menu aII.active {
        background-color: #397cc0;
        color: #ffffff;
    }
​
    #menu aII.active:hover {
        background: #4dcbb0;
    }
​
#menu aIII {
        background: #fff;
        position: absolute;
        z-index: 1;
        top: 230.49px;
        right: -1px;
        border-radius: 3px;
        width: 120px;
        border: 1px solid rgba(0,0,0,0.4);
        font-family: 'Open Sans', sans-serif;
    }
​
#menu aIII {
        font-size: 13px;
        color: #404040;
        display: block;
        margin: 0;
        padding: 0;
        padding: 10px;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,0.25);
        text-align: center;
    }
​
    #menu aIII:last-child {
        border: none;
    }
​
    #menu aIII:hover {
        background-color: #f8f8f8;
        color: #404040;
    }
​
    #menu aIII.active {
        background-color: #397cc0;
        color: #ffffff;
    }
​
    #menu aIII.active:hover {
        background: #4dcbb0;
    }
​
  #menu aIV {
        background: #fff;
        position: absolute;
        z-index: 1;
        top: 127.37px;
        right: -1px;
        border-radius: 3px;
        width: 120px;
        border: 1px solid rgba(0,0,0,0.4);
        font-family: 'Open Sans', sans-serif;
    }
​
#menu aIV {
        font-size: 13px;
        color: #404040;
        display: block;
        margin: 0;
        padding: 0;
        padding: 10px;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,0.25);
        text-align: center;
    }
    #menu aIV:last-child {
        border: none;
    }
​
    #menu aIV:hover {
        background-color: #f8f8f8;
        color: #404040;
    }
​
    #menu aIV.active {
        background-color: #aec100;
        color: #ffffff;
    }
​
    #menu aIV.active:hover {
        background: #4dcbb0;
    }
​
​
​
.legend {
  background-color: #e5fff3;
  border-radius: 3px;
  bottom: 30px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
  padding: 10px;
  position: absolute;
  right: 10px;
  z-index: 1;
}
​
  .legend h4 {
  margin: 0 0 10px;
}
​
.legend div span {
  border-radius: 50%;
  display: inline-block;
  height: 10px;
  margin-right: 5px;
  width: 10px;
}
​
​
  .map-overlay {
    font:bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position: absolute;
    width: 25%;
    top: 5px;
    left:5px;
    padding: 10px;
}
​
.map-overlay .map-overlay-inner {
    background-color: #fff;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 10px;
}
​
.map-overlay label {
    display: block;
    margin: 0 0 10px;
}
​
.map-overlay input {
    background-color: transparent;
    display: inline-block;
    width: 100%;
    position: relative;
    margin: 0;
    cursor: ew-resize;
}
​
 </style>
 <nav id="menu"></nav>
​
 <div class='map-overlay top'>
    <div class='map-overlay-inner'>
        <label>Layer opacity: <span id='slider-value'>100%</span></label>
        <input id='slider' type='range' min='0' max='100' step='0' value='100' />
    </div>
</div>
​
<nav id="aII", class="menu"></nav>
  <nav id="aIII", class="menu"></nav>
   <nav id="aIV", class="menu"></nav>
​
 <div id='legend' class='legend'>
   <h4>Conflictos en la Amazonia</h4>
    <div><span style='background-color: #fbb03b'></span>Conflicto por Petroleo</div>
    <div><span style='background-color: #223b53'></span>Conflicto por Mineria</div>
    <div><span style='background-color: #e55e5e'></span>Conflicto por Uso del S.</div>
    <div><span style='background-color: #3bb2d0'></span>Conflicto por Manejo Agua</div>
    <div><span style='background-color: #757575'></span>Conflicto por Infraestruc.</div>
    <div><span style='background-color:#39cf50'></span>Conflicto por Biodiversidad</div>
    <div><span style='background-color:#393ccf'></span>Conflicto por Ganaderia</div>
    <div><span style='background-color:#932330'></span>Conflicto por Territorio</div>
  </div>
​
​
​
//agregar capas
<div id='map'></div>
​
  <script>
​
​
​
​
mapboxgl.accessToken = 'pk.eyJ1IjoiZmFiaW9mejE5OTAiLCJhIjoiY2o0NmY0cmU2MjJhaTM5b2I4Nmgybm1nbCJ9.Y66nlqj71gB-hi-TVR0I2A'
​
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/fabiofz1990/cj46fjy4k02ri2rp86i11y064',
  })
​
map.on('load', function () {
  map.addSource("Resguardos", {
    "type": "vector",
    'url': 'mapbox://fabiofz1990.dkoiczal',
    });
        map.addLayer({
        'id': 'Resguardos_limite',
        'type': 'line',
        "source": "Resguardos",
          'source-layer': 'Resguardos_MAGNA-3gqaeh',
                    'layout' : {},
          'paint': {
            'line-color': '#fbc1fe',
            'line-width': 1.6252928,
            'line-opacity': 0.5
                    }
   })
​
        map.addLayer({
        'id': 'Resguardos',
        'type': 'fill',
        "source": "Resguardos",
          'source-layer': 'Resguardos_MAGNA-3gqaeh',
                    'layout' : {},
          'paint': {
            'fill-color': '#84b3ff',
            'fill-opacity': 0.2
                    }
   });
                map.addLayer({
        'id': 'Resguardos_nombre',
        'type': 'symbol',
        "source": "Resguardos",
          'source-layer': 'Resguardos_MAGNA-3gqaeh',
                    'layout' : {
             "text-field": "{RINOMBRE}",
             "text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
             "text-size": 10,
             "text-letter-spacing": 0.05,
​
          },
          'paint': {
             "text-color": "#202",
             "text-halo-color": "#fff",
             "text-halo-width": 2
​
                    }
          });
       });
map.on('load', function () {
  map.addSource("Organizaciones zonales", {
    "type": "vector",
    'url': 'mapbox://fabiofz1990.3ho17hj5',
    });
        map.addLayer({
        'id': 'Organizaciones zonales_borde',
        'type': 'line',
        "source": "Organizaciones zonales",
          'source-layer': 'ORganizaciones_zonales-c3jxul',
                    'layout' : {},
          'paint': {
            'line-color': '#36fb95',
            'line-width': 2.340421632,
            'line-opacity': 0.24
                    }
   })
​
        map.addLayer({
        'id': 'Organizaciones zonales',
        'type': 'fill',
        "source": "Organizaciones zonales",
          'source-layer': 'ORganizaciones_zonales-c3jxul',
                    'layout' : {},
          'paint': {
            'fill-color': '#ebff3d',
            'fill-opacity': 0.2
                    }
   });
                map.addLayer({
        'id': 'Organizaciones zonales_nombre',
        'type': 'symbol',
        "source": "Organizaciones zonales",
          'source-layer': 'ORganizaciones_zonales-c3jxul',
                    'layout' : {
             "text-field": "{Abrev_}",
             "text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
             "text-size": 10,
             "text-letter-spacing": 0.05,
​
          },
          'paint': {
             "text-color": "#202",
             "text-halo-color": "#fff",
             "text-halo-width": 2
​
                    }
          });
       });
​
​
​
​
 map.on('load', function () {
        map.addSource("Conflictos", {
        "type": "vector",
        'url': 'mapbox://fabiofz1990.899l42ar',
        });
​
   map.addLayer({
        'id': 'Conflictos',
        'type': 'circle',
        "source": "Conflictos",
          'source-layer': 'DA_COPAIBA-b157r3',
                    'layout' : {},
             'paint': {
             "circle-radius": 8,
           'circle-color': {
             property: 'CODCN_PB',
             type: 'categorical',
             stops: [
                ['C_PET', '#fbb03b'],
                ['C_Min', '#223b53'],
                ['C_US', '#e55e5e'],
              ['C_MA', '#3bb2d0'],
              ['C_Inf', '#757575'],
                ['C_B', '#39cf50'],
                ['C_GAN', '#393ccf'],
                ['C_TER', '#932330']]
            }
​
        }
   });
​
});
​
​
​
   map.on('load', function () {
        map.addSource("Pozos", {
        "type": "vector",
        'url': 'mapbox://fabiofz1990.a4yywbnt',
        });
​
   map.addLayer({
        'id': 'Pozos Petroleo',
        'type': 'circle',
        "source": "Pozos",
          'source-layer': 'Pozos_PET_MAG_COL_bgta-6ugju4',
                    'layout' : {},
             'paint': {
             "circle-radius": 5,
             'circle-color': '#fc7284',
             "circle-opacity": 0.2
             }
  });
​
});
​
​
  map.on('load', function () {
  map.addSource("Rios", {
    "type": "vector",
    'url': 'mapbox://fabiofz1990.3oih33vi',
    });
        map.addLayer({
        'id': 'Rios',
        'type': 'line',
        "source": "Rios",
          'source-layer': 'Rios-81lkss',
                    'layout' : {},
          'paint': {
            'line-color': '#7ceefd',
            'line-width': 2,
            'line-opacity': 0.5
                    }
   })
  });
​
    var slider = document.getElementById('slider');
    var sliderValue = document.getElementById('slider-value');
​
  map.on('load', function() {
​
    map.addLayer({
        "id": "Deforestacion",
        "source": {
            "type": "raster",
            "url": "mapbox://fabiofz1990.22nvgaxo"
        },
        "type": "raster",
      "paint":{
        'raster-opacity':0.5
      }
​
    });
​
      slider.addEventListener('input', function(e) {
        // Adjust the layers opacity. layer here is arbitrary - this could
        // be another layer name found in your style or a custom layer
        // added on the fly using `addSource`.
        map.setPaintProperty('Deforestacion', 'raster-opacity', parseInt(e.target.value, 10) / 100);
         // Value indicator
        sliderValue.textContent = e.target.value + '%';
   });
  });
​
// When a click event occurs near a place, open a popup at the location of
// the feature, with HTML description from its properties
map.on('click', function(e) {
  var features = map.queryRenderedFeatures(e.point, { layers: ['Conflictos'] });
​
  // if the features have no info, return nothing
  if (!features.length) {
    return;
  }
var feature = features[0];
​
  // Populate the popup and set its coordinates
  // based on the feature found
  var popup = new mapboxgl.Popup()
  .setLngLat(feature.geometry.coordinates)
  .setHTML('<div id=\'popup\' class=\'popup\' style=\'z-index: 10;\'> <h5> Detalles del conflicto: </h5>' +
  '<ul class=\'list-group\'>' +
  '<li class=\'list-group-item\'> ID: ' + feature.properties['ID_Data'] + ' </li>' +
  '<li class=\'list-group-item\'> Conflicto: ' + feature.properties['Confl_Prob'] + ' </li>' +
  '<li class=\'list-group-item\'> Descripción: ' + feature.properties['Descripc'] + ' </li></ul></div>')
  .addTo(map);
});
​
// Use the same approach as above to indicate that the symbols are clickable
// by changing the cursor style to 'pointer'
map.on('mousemove', function(e) {
  var features = map.queryRenderedFeatures(e.point, { layers: ['Conflictos'] });
  map.getCanvas().style.cursor = features.length ? 'pointer' : '';
});
​
​
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl({position:'top-left'}));
​
​
​
// programas menu
var toggleableLayerIds = [ 'Resguardos', "Conflictos", "Rios"];
 for (var i = 0; i < toggleableLayerIds.length; i++) {
    var id = toggleableLayerIds[i];
​
    var link = document.createElement('a');
    link.href = '#';
    link.className = 'active';
    link.textContent = id;
​
    link.onclick = function (e) {
        var clickedLayer = this.textContent;
        e.preventDefault();
        e.stopPropagation();
​
        var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
​
        if (visibility === 'visible') {
            map.setLayoutProperty(clickedLayer, 'visibility', 'none');
            this.className = '';
        } else {
            this.className = 'active';
            map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
        }
    };
​
    var layers = document.getElementById('menu');
    layers.appendChild(link);
}
​
var toggleableLayerIds = ["Pozos Petroleo"];
 for (var i = 0; i < toggleableLayerIds.length; i++) {
    var id = toggleableLayerIds[i];
​
    var link = document.createElement('aII');
    link.href = '#';
    link.className = 'active';
    link.textContent = id;
​
    link.onclick = function (e) {
        var clickedLayer = this.textContent;
        e.preventDefault();
        e.stopPropagation();
​
        var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
​
        if (visibility === 'visible') {
            map.setLayoutProperty(clickedLayer, 'visibility', 'none');
            this.className = '';
        } else {
            this.className = 'active';
            map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
        }
    };
​
    var layers = document.getElementById('menu');
    layers.appendChild(link);
}
​
var toggleableLayerIds = ["Deforestacion"];
 for (var i = 0; i < toggleableLayerIds.length; i++) {
    var id = toggleableLayerIds[i];
​
    var link = document.createElement('aIII');
    link.href = '#';
    link.className = 'active';
    link.textContent = id;
​
    link.onclick = function (e) {
        var clickedLayer = this.textContent;
        e.preventDefault();
        e.stopPropagation();
​
        var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
​
        if (visibility === 'visible') {
            map.setLayoutProperty(clickedLayer, 'visibility', 'none');
            this.className = '';
        } else {
            this.className = 'active';
            map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
        }
    };
​
    var layers = document.getElementById('menu');
    layers.appendChild(link);
}
​
​
​
​
    var toggleableLayerIds = ["Organizaciones zonales"];
 for (var i = 0; i < toggleableLayerIds.length; i++) {
    var id = toggleableLayerIds[i];
​
    var link = document.createElement('aIV');
    link.href = '#';
    link.className = 'active';
    link.textContent = id;
​
    link.onclick = function (e) {
        var clickedLayer = this.textContent;
        e.preventDefault();
        e.stopPropagation();
​
        var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
​
        if (visibility === 'visible') {
            map.setLayoutProperty(clickedLayer, 'visibility', 'none');
            this.className = '';
        } else {
            this.className = 'active';
            map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
        }
    };
​
    var layers = document.getElementById('menu');
    layers.appendChild(link);
}
​
</script>
​
</body>
</html>
​
    