Difference between revisions of "Test"

@@ Line 1: / Line 1: @@
 <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>
+    <style>
-<style>
+      #map {
-#map {
+      height: 500px;
-  height: 500px;
+      width: 100%;
-  width: 100%;
+      max-width: 100%;
-  max-width: 100%;
+      max-height: 100%;
-  max-height: 100%;
+      }
-}
+    </style>
-</style>
+  </head>
+  <body>
+    <div id="map" style="width: 100%; height: 500px;"></div>
+    <script>
-</head>
- <body>
-  <div id="map" style="width: 100%; height: 500px;"></div>
-<script>
        // GEOJSON FILES
+      var refugia = '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 url = 'files/REFUGIA_MALEY96.json';  // my GeoJSON data source, in same folder as my html page.
+       var map = L.map('map').setView([10, 5], 4);
-      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 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.STATE_NAME +
+      // Set style function that sets fill color property
-                "</br>REGION: "+ feature.properties.SUB_REGION +
+      function style(feature) {
-                "</br>STATE ABBR: "+ feature.properties.STATE_ABBR +
+        return {
-                "</br>POP2010: "+ feature.properties.POP2010.toLocaleString() +
+            fillColor: '#2214e2',
-                "</br>Pop 2010 per SQMI: "+ feature.properties.POP10_SQMI.toLocaleString() +
+             fillOpacity: 0.5,
-                "</br>Males: "+ feature.properties.MALES.toLocaleString() +
+            weight: 2,
-                "</br>Females: "+ feature.properties.FEMALES.toLocaleString() +
+            opacity: 1,
-                "</br>SQ Miles: "+ feature.properties.SQMI.toLocaleString() +'</p>';
+            color: '#2214e2',
+            dashArray: '3'
+        };
+      }
+      function forEachFeature(feature, layer) {
+        var popupContent = "<p><b>ID: </b>"+ feature.properties.STATE_NAME +'</p>';
+        layer.bindPopup(popupContent);
+      }
-            layer.bindPopup(popupContent);
+      // Null variable that will hold layer
+      var refugiaLayer = L.geoJson(null, {style: style});
+      $.getJSON(refugia, function(data) {refugiaLayer.addData(data); });
+      refugiaLayer.addTo(map);
-            layer.on("click", function (e) {
+      var aperangeLayer = L.geoJson(null, {onEachFeature: forEachFeature, style: style});
-                stateLayer.setStyle(style); //resets layer colors
+      $.getJSON(aperange, function(data) {aperangeLayer.addData(data); });
-               stateLayer2.setStyle(style2); //resets layer colors
+      aperangeLayer.addTo(map);
-                 layer.setStyle(highlight);  //highlights selected.
-            });
-		}
-// Null variable that will hold layer
-var stateLayer = L.geoJson(null, {style: style});
-var stateLayer2 = L.geoJson(null, {style: style2});
-	$.getJSON(url, function(data) {
+      // for Layer Control
-         stateLayer.addData(data);
+      var baseMaps = {
-    });
+        "Open Street Map": osm,
+         "Open Topo Map": topo,
+      };
- stateLayer.addTo(map);
+      var overlayMaps = {
+        "Refugia":refugiaLayer
-$.getJSON(url2, function(data) {
+         "Ape range":aperangeLayer
-         stateLayer2.addData(data);
+      };
-    });
- stateLayer2.addTo(map);
+      //Add layer control
+      L.control.layers(baseMaps, overlayMaps).addTo(map);
-// for Layer Control
+     </script>
-var baseMaps = {
+  </body>
-     "Open Street Map": osm,
-    "Open Topo Map": topo,
-};
-var overlayMaps = {
-    "USA":stateLayer,
-    "USAb":stateLayer2,
-};
-//Add layer control
-L.control.layers(baseMaps, overlayMaps).addTo(map);
-</script>
-</body>
 </html>

Difference between revisions of "Test"

Revision as of 11:08, 25 February 2022

Navigation menu

Search