Difference between revisions of "Test"

From A.P.E.S. wiki
Jump to navigation Jump to search
Line 4: Line 4:
 
     <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
 
     <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 +
 
     <style>
 
     <style>
 
       #map {
 
       #map {
Line 17: Line 18:
  
 
     <script>
 
     <script>
−
      // GEOJSON FILES  
+
    // GEOJSON FILES  
−
      var refugia = 'files/REFUGIA_MALEY96.json';  // my GeoJSON data source, in same folder as my html page.
+
    var url = 'files/REFUGIA_MALEY96.json';  // my GeoJSON data source, in same folder as my html page.
−
      var aperange = 'files/species_15933.geojson';  // my GeoJSON data source, in same folder as my html page.
+
    var url2 = 'files/species_15933.geojson';  // my GeoJSON data source, in same folder as my html page.
 +
 
 +
    var map = L.map('map').setView([47.7541, -107.05078], 3);
 +
 
 +
    var topo=new L.tileLayer('http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',{
 +
    attribution: '&copy; <a href="http://osm.org/copyright">OpenTopoMap</a> contributors'}).addTo(map);
 +
    var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
 +
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
  
−
      var map = L.map('map').setView([10, 5], 4);
 
  
−
      var topo=new L.tileLayer('http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',{
+
    // Set style function that sets fill color property
−
            attribution: '&copy; <a href="http://osm.org/copyright">OpenTopoMap</a> contributors'}).addTo(map);
+
    function style(feature) {
−
       var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
+
      return {
−
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
+
        fillColor: 'green',
−
       
+
        fillOpacity: 0.5, 
 +
        weight: 2,
 +
        opacity: 1,
 +
        color: '#ffffff',
 +
        dashArray: '3'
 +
      };
 +
    }
 +
    function style2(feature) {
 +
       return {
 +
        fillColor: 'blue',
 +
        fillOpacity: 0.5, 
 +
        weight: 2,
 +
        opacity: 1,
 +
        color: '#ffffff',
 +
        dashArray: '3'
 +
      };
 +
    }
  
 +
    function forEachFeature(feature, layer) {
 +
      var popupContent = "<p><b>STATE: </b>"+ feature.properties.STATE_NAME +
 +
                          "</br>REGION: "+ feature.properties.SUB_REGION +
 +
                          "</br>STATE ABBR: "+ feature.properties.STATE_ABBR +
 +
                          "</br>POP2010: "+ feature.properties.POP2010.toLocaleString() +
 +
                          "</br>Pop 2010 per SQMI: "+ feature.properties.POP10_SQMI.toLocaleString() +
 +
                          "</br>Males: "+ feature.properties.MALES.toLocaleString() +
 +
                          "</br>Females: "+ feature.properties.FEMALES.toLocaleString() +
 +
                          "</br>SQ Miles: "+ feature.properties.SQMI.toLocaleString() +'</p>';
  
−
       // Set style function that sets fill color property
+
       layer.bindPopup(popupContent);
−
      function style(feature) {
+
    }
−
        return {
+
 
−
            fillColor: '#2214e2',
+
    // Null variable that will hold layer
−
            fillOpacity: 0.5,
+
    var stateLayer = L.geoJson(null, {style: style});
−
            weight: 2,
+
    var stateLayer2 = L.geoJson(null, {style: style2});
−
            opacity: 1,
+
 
−
            color: '#2214e2',
+
    $.getJSON(url, function(data) {
−
            dashArray: '3'
+
    stateLayer.addData(data);
−
        };
+
    });
−
      }
+
 
−
      function forEachFeature(feature, layer) {
+
    stateLayer.addTo(map);
−
        var popupContent = "<p><b>ID: </b>"+ feature.properties.STATE_NAME +'</p>';
 
−
        layer.bindPopup(popupContent);
 
−
      }
 
  
−
      // Null variable that will hold layer
+
    $.getJSON(url2, function(data) {
−
      var refugiaLayer = L.geoJson(null, {style: style});
+
    stateLayer2.addData(data);
−
      $.getJSON(refugia, function(data) {refugiaLayer.addData(data); });
+
    });
−
      refugiaLayer.addTo(map);
 
  
−
      var aperangeLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: style});
+
    stateLayer2.addTo(map);
−
      $.getJSON(aperange, function(data) {aperangeLayer.addData(data); });
 
−
      aperangeLayer.addTo(map);
 
  
−
      // for Layer Control
+
    // for Layer Control
−
      var baseMaps = {
+
    var baseMaps = {
−
        "Open Street Map": osm, 
+
    "Open Street Map": osm, 
−
        "Open Topo Map": topo, 
+
    "Open Topo Map": topo, 
−
      };
+
    };
  
−
      var overlayMaps = {
+
    var overlayMaps = {
−
        "Refugia":refugiaLayer
+
    "USA":stateLayer,
−
        "Ape range":aperangeLayer
+
    "USAb":stateLayer2,
−
      };
+
    };
  
−
      //Add layer control
+
    //Add layer control
−
      L.control.layers(baseMaps, overlayMaps).addTo(map);
+
    L.control.layers(baseMaps, overlayMaps).addTo(map);
  
−
     </script>
+
     </script>  
 
   </body>
 
   </body>
 
</html>
 
</html>

Revision as of 11:10, 25 February 2022

Retrieved from "https://wiki.iucnapesportal.org/index.php?title=Test&oldid=5420"