Difference between revisions of "Test"

From A.P.E.S. wiki
Jump to navigation Jump to search
Line 18: Line 18:
 
   <div id="map" style="width: 600px; height: 400px;"></div>
 
   <div id="map" style="width: 600px; height: 400px;"></div>
 
    
 
    
−
  <script>
+
<script>
−
var cities = L.layerGroup();
+
var url = 'usa.json'; // my GeoJSON data source, in same folder as my html page.
−
var mLittleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities);
 
−
var mDenver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities);
 
−
var mAurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities);
 
−
var mGolden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
 
  
−
var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
+
var map = L.map('map').setView([47.7541, -107.05078], 3);  
−
var mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
 
  
−
var grayscale = L.tileLayer(mbUrl, {id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
+
var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{  
−
var streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
+
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 map = L.map('map', {
+
            var popupContent = "<p><b>STATE: </b>"+ feature.properties.STATE_NAME +
−
center: [39.73, -104.99],
+
                "</br>REGION: "+ feature.properties.SUB_REGION +
−
zoom: 10,
+
                "</br>STATE ABBR: "+ feature.properties.STATE_ABBR +
−
layers: [grayscale, cities]
+
                "</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>';
  
−
var baseLayers = {
+
            layer.bindPopup(popupContent);
−
'Grayscale': grayscale,
+
 
−
'Streets': streets
+
            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);
 +
    });
  
−
var overlays = {
+
stateLayer.addTo(map);
−
'Cities': cities
 
−
};
 
  
−
var layerControl = L.control.layers(baseLayers, overlays).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>
+
</script> </body>
−
</body>
 
 
</html>
 
</html>

Revision as of 16:07, 23 February 2022

Retrieved from "https://wiki.iucnapesportal.org/index.php?title=Test&oldid=5332"