Difference between revisions of "Test"
Jump to navigation
Jump to search
Line 1: | Line 1: | ||
<html> | <html> | ||
− | + | <head> | |
− | + | <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://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 { | |
− | + | height: 500px; | |
− | + | width: 100%; | |
− | + | max-width: 100%; | |
− | + | max-height: 100%; | |
− | + | } | |
− | + | </style> | |
− | + | ||
− | + | ||
− | + | </head> | |
− | + | <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([10, 5], 4); | var map = L.map('map').setView([10, 5], 4); | ||
− | var | + | var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{ |
− | attribution: '© <a href="http://osm.org/copyright"> | + | attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map); |
− | + | ||
− | + | ||
+ | // Set style function that sets fill color property | ||
+ | function style(feature) { | ||
return { | return { | ||
fillColor: 'green', | fillColor: 'green', | ||
Line 34: | Line 39: | ||
}; | }; | ||
} | } | ||
− | var | + | 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> | </html> |
Revision as of 09:35, 25 February 2022