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>
 +
  <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([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);
 +
 +
 +
// 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) {
 +
 
 +
            var popupContent = "<p><b>STATE: </b>"+ feature.properties.id +'</p>';
 +
 
 +
            layer.bindPopup(popupContent);
  
−
  // initialize the map
+
            layer.on("click", function (e) {
−
  var map = L.map('map').setView([42.35, -71.08], 3);
+
                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});
  
−
  // load a tile layer
+
$.getJSON(url, function(data) {
−
  L.tileLayer('http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',{  
+
        stateLayer.addData(data);
−
            attribution: '&copy; <a href="http://osm.org/copyright">OpenTopoMap</a> contributors'}).addTo(map);
+
    });
  
−
     L.geoJson(usa.geojson).addTo(map);
+
stateLayer.addTo(map);
−
+
 
−
    </script>  
+
// for Layer Control
−
  </body>
+
var baseMaps = {
 +
    "Open Street Map": osm, 
 +
     "Open Topo Map": topo, 
 +
};
 +
 
 +
var overlayMaps = {
 +
    "USA":stateLayer,
 +
};
 +
 +
//Add layer control
 +
L.control.layers(baseMaps, overlayMaps).addTo(map);
 +
 
 +
</script> </body>
 
</html>
 
</html>

Revision as of 08:59, 25 February 2022

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