Difference between revisions of "Test"

@@ Line 1: / Line 1: @@
-<html>
-<head>
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
-<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
-<style>
- .leaflet-container {
-  height: 400px;
-  width: 600px;
-  max-width: 100%;
-  max-height: 100%;
-}
-</style>
-</head>
- <body>
-  <div id="map" style="width: 600px; height: 400px;"></div>
-<script>
-var url = 'https://iucnapesportal.org/wiki/files/usa.json';  // my GeoJSON data source, in same folder as my html page.
-	var map = L.map('map').setView([47.7541, -107.05078], 3);
-	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'
-    };
-}
-	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
-};
-var overlayMaps = {
-    "USA":stateLayer
-};
-//Add layer control
-L.control.layers(baseMaps, overlayMaps).addTo(map);
-</script> </body>
-</html>

Difference between revisions of "Test"

Latest revision as of 05:51, 29 September 2022

Navigation menu

Search