Difference between revisions of "Test"
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> | ||
+ | |||
+ | <style> | ||
+ | #map { | ||
+ | height: 500px;<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" /> | ||
Line 8: | Line 16: | ||
#map { | #map { | ||
height: 500px; | 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 = 'usa.json'; // my GeoJSON data source, in same folder as my html page. | ||
+ | |||
+ | var map = L.map('map').setView([10, 5], 4); | ||
+ | |||
+ | var topo=new L.tileLayer('http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',{ | ||
+ | attribution: '© <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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map); | ||
+ | |||
+ | |||
+ | // Set style function that sets fill color property | ||
+ | function style(feature) { | ||
+ | return { | ||
+ | fillColor: '#2214e2', | ||
+ | fillOpacity: 0.5, | ||
+ | weight: 2, | ||
+ | opacity: 1, | ||
+ | color: '#2214e2', | ||
+ | dashArray: '3' | ||
+ | }; | ||
+ | } | ||
+ | // var highlight = { | ||
+ | // 'fillColor': 'yellow', | ||
+ | // 'weight': 2, | ||
+ | // 'opacity': 1 | ||
+ | // }; | ||
+ | |||
+ | function forEachFeature(feature, layer) { | ||
+ | |||
+ | var popupContent = "<p><b>STATE: </b>"+ feature.properties.STATE_NAME +'</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, | ||
+ | "Open Topo Map": topo, | ||
+ | }; | ||
+ | |||
+ | var overlayMaps = { | ||
+ | "USA":stateLayer | ||
+ | }; | ||
+ | |||
+ | //Add layer control | ||
+ | L.control.layers(baseMaps, overlayMaps).addTo(map); | ||
+ | |||
+ | </script> | ||
+ | </body> | ||
+ | </html> | ||
+ | |||
width: 100%; | width: 100%; | ||
max-width: 100%; | max-width: 100%; |
Revision as of 10:28, 25 February 2022
width: 100%; max-width: 100%; max-height: 100%;
} </style>
</head>
<body>
<script> var url = 'usa.json'; // my GeoJSON data source, in same folder as my html page.
var map = L.map('map').setView([10, 5], 4);
var topo=new L.tileLayer('http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',{ attribution: '© <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: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
// Set style function that sets fill color property
function style(feature) {
return { fillColor: '#e24e14', fillOpacity: 0.5, weight: 2, opacity: 1, color: '#e24e14', dashArray: '3' };
} // var highlight = { // 'fillColor': 'yellow', // 'weight': 2, // 'opacity': 1 // };
function forEachFeature(feature, layer) {
var popupContent = "
STATE: "+ feature.properties.STATE_NAME +'
';
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, "Open Topo Map": topo,
};
var overlayMaps = {
"USA":stateLayer
};
//Add layer control L.control.layers(baseMaps, overlayMaps).addTo(map);
</script> </body> </html>