Difference between revisions of "Test"

From A.P.E.S. wiki
Jump to navigation Jump to search
Line 1: Line 1:
 
<html>
 
<html>
−
  <head>
+
<head>
−
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
−
    <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>
+
−
      #map {
+
<style>
−
      height: 500px;
+
#map {
−
      width: 100%;
+
  height: 500px;
−
      max-width: 100%;
+
  width: 100%;
−
      max-height: 100%;
+
  max-width: 100%;
−
      }
+
  max-height: 100%;
−
    </style>
+
}
−
  </head>
+
</style>
−
  <body>
 
−
    <div id="map" style="width: 100%; height: 500px;"></div>
 
  
−
    <script>
+
 +
</head>
 +
<body>
 +
  <div id="map" style="width: 100%; height: 500px;"></div>
 +
 
 +
<script>
 +
var url = 'usa.json';  // my GeoJSON data source, in same folder as my html page.
 +
var url2 = 'usa.json';  // my GeoJSON data source, in same folder as my html page.
  
−
      var map = L.map('map').setView([10, 5], 4);  
+
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',{  
+
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);
+
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',{  
+
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);
+
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
−
          
+
 +
 +
// Set style function that sets fill color property
 +
function style(feature) {
 +
    return {
 +
        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'
 +
    };
 +
}
 +
var highlight = {
 +
'fillColor': 'yellow',
 +
'weight': 2,
 +
'opacity': 1
 +
};
 +
 +
function forEachFeature(feature, layer) {
  
−
      // GEOJSON FILES
+
            var popupContent = "<p><b>STATE: </b>"+ feature.properties.STATE_NAME +
−
      var refugia = 'files/species_15933.geojson';  // my GeoJSON data source, in same folder as my html page.
+
                "</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>';
  
 +
            layer.bindPopup(popupContent);
  
−
      // Set style function that sets fill color property
+
            layer.on("click", function (e) {
−
      function style(feature) {
+
                stateLayer.setStyle(style); //resets layer colors
−
        return {
+
              stateLayer2.setStyle(style2); //resets layer colors
−
             fillColor: '#2214e2',
+
                layer.setStyle(highlight);  //highlights selected.
−
            fillOpacity: 0.5,
+
             });
−
            weight: 2,
+
}
−
            opacity: 1,
+
−
            color: '#2214e2',
+
// Null variable that will hold layer
−
            dashArray: '3'
+
var stateLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: style});
−
        };
+
var stateLayer2 = L.geoJson(null, {onEachFeature: forEachFeature, style: style2});
−
      }
 
  
−
        function forEachFeature(feature, layer) {
+
$.getJSON(url, function(data) {
−
                var popupContent = "<p><b>ID: </b>"+ feature.properties.STATE_NAME +'</p>';
+
        stateLayer.addData(data);
−
                layer.bindPopup(popupContent);
+
    });
−
      }
 
  
−
      // Null variable that will hold layer
+
stateLayer.addTo(map);
−
      var refugiaLayer = L.geoJson(null, {style: style});
+
$.getJSON(url2, function(data) {
 +
        stateLayer2.addData(data);
 +
    });
  
−
      $.getJSON(refugia, function(data) {refugiaLayer.addData(data); });
+
stateLayer2.addTo(map);
−
      refugiaLayer.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,
−
      };
+
    "USAb":url2,
 +
};
 +
 +
//Add layer control
 +
L.control.layers(baseMaps, overlayMaps).addTo(map);
  
−
      //Add layer control
+
</script>  
−
      L.control.layers(baseMaps, overlayMaps).addTo(map);
+
</body>
−
 
 
−
    </script>
 
−
  </body>
 
 
</html>
 
</html>

Revision as of 10:56, 25 February 2022

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