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>
+
−
   
+
</head>
−
    <script>
+
<body>
−
    var url = 'REFUGIA_MALEY96.geojson';  // my GeoJSON data source, in same folder as my html page.
+
  <div id="map" style="width: 100%; height: 500px;"></div>
 +
 
 +
<script>
 +
var url = 'REFUGIA_MALEY96.geojson';  // 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([10, 5], 4);  
  
−
var topo=new L.tileLayer('http://{s}.tile.opentopomap.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">OpenTopoMap</a> contributors'}).addTo(map);
+
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
−
 
+
−
        function style(feature) {
+
 +
// Set style function that sets fill color property
 +
function style(feature) {
 
     return {
 
     return {
 
         fillColor: 'green',  
 
         fillColor: 'green',  
Line 34: Line 39:
 
     };
 
     };
 
}
 
}
−
var bbTeam = L.geoJSON(null, {onEachFeature: forEachFeature, style: style});
+
var highlight = {
 +
'fillColor': 'yellow',
 +
'weight': 2,
 +
'opacity': 1
 +
};
 +
 +
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>';
 +
 
 +
            layer.bindPopup(popupContent);
 +
 
 +
            layer.on("click", function (e) {
 +
                stateLayer.setStyle(style); //resets layer colors
 +
                layer.setStyle(highlight);  //highlights selected.
 +
            });
 +
}
 +
 +
// Null variable that will hold layer
 +
var stateLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: style});
 +
 
 +
$.getJSON(url, function(data) {
 +
        stateLayer.addData(data);
 +
    });
 +
 
 +
stateLayer.addTo(map);
 +
 
 +
// for Layer Control
 +
var baseMaps = {
 +
    "Open Street Map": osm 
 +
};
  
−
// Get GeoJSON data and create features.
+
var overlayMaps = {
−
$.getJSON(url, function(data) {
+
    "USA":stateLayer
−
        bbTeam.addData(data);
+
};
−
});
+
 +
//Add layer control
 +
L.control.layers(baseMaps, overlayMaps).addTo(map);
  
−
bbTeam.addTo(map);
+
</script>
−
    </script>  
+
</body>
−
  </body>
 
 
</html>
 
</html>

Revision as of 09:35, 25 February 2022

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