Difference between revisions of "Test"
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://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> | |
| − | <style> | + | <body> |
| − | #map { | + | <div id="map" style="width: 100%; height: 500px;"></div> |
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | </style> | ||
| − | |||
| − | |||
| − | </head> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <script> | |
| − | var | + | var url = 'usa.json'; // my GeoJSON data source, in same folder as my html page. |
| − | |||
| − | |||
| − | |||
| − | var | + | var map = L.map('map').setView([10, 5], 4); |
| − | |||
| − | |||
| − | |||
| − | |||
| − | L. | ||
| − | </ | + | 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 = { | |
| − | var | + | "USA":stateLayer |
| − | + | }; | |
| − | |||
| − | }; | ||
| − | + | //Add layer control | |
| − | + | L.control.layers(baseMaps, overlayMaps).addTo(map); | |
| − | |||
| − | |||
| − | //Add layer control | ||
| − | L.control.layers(baseMaps, overlayMaps).addTo(map); | ||
| − | </script> | + | </script> |
| − | </body> | + | </body> |
</html> | </html> | ||
Revision as of 10:30, 25 February 2022