Difference between revisions of "Test"

From A.P.E.S. wiki
Jump to navigation Jump to search
Line 20: Line 20:
  
 
<div id="map" style="width: 600px; height: 400px;"></div>
 
<div id="map" style="width: 600px; height: 400px;"></div>
 +
<script src="https://iucnapesportal.org/wiki/files/sample-geojson.js" type="text/javascript"></script>
 +
 
<script>
 
<script>
−
var cities = L.layerGroup();
+
var map = L.map('map').setView([39.74739, -105], 13);
 +
 
 +
var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
 +
maxZoom: 18,
 +
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
 +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
 +
id: 'mapbox/light-v9',
 +
tileSize: 512,
 +
zoomOffset: -1
 +
}).addTo(map);
 +
 
 +
var baseballIcon = L.icon({
 +
iconUrl: 'baseball-marker.png',
 +
iconSize: [32, 37],
 +
iconAnchor: [16, 37],
 +
popupAnchor: [0, -28]
 +
});
 +
 
 +
function onEachFeature(feature, layer) {
 +
var popupContent = '<p>I started out as a GeoJSON ' +
 +
feature.geometry.type + ', but now I\'m a Leaflet vector!</p>';
 +
 
 +
if (feature.properties && feature.properties.popupContent) {
 +
popupContent += feature.properties.popupContent;
 +
}
 +
 
 +
layer.bindPopup(popupContent);
 +
}
 +
 
 +
/* global campus, bicycleRental, freeBus, coorsField */
 +
var bicycleRentalLayer = L.geoJSON([bicycleRental, campus], {
 +
 
 +
style: function (feature) {
 +
return feature.properties && feature.properties.style;
 +
},
 +
 
 +
onEachFeature: onEachFeature,
  
−
var mLittleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities);
+
pointToLayer: function (feature, latlng) {
−
var mDenver = L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities);
+
return L.circleMarker(latlng, {
−
var mAurora = L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities);
+
radius: 8,
−
var mGolden = L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
+
fillColor: '#ff7800',
 +
color: '#000',
 +
weight: 1,
 +
opacity: 1,
 +
fillOpacity: 0.8
 +
});
 +
}
 +
}).addTo(map);
  
−
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 freeBusLayer = L.geoJSON(freeBus, {
−
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});
+
filter: function (feature, layer) {
−
var streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
+
if (feature.properties) {
 +
// If the property "underConstruction" exists and is true, return false (don't render features under construction)
 +
return feature.properties.underConstruction !== undefined ? !feature.properties.underConstruction : true;
 +
}
 +
return false;
 +
},
  
−
var map = L.map('map', {
+
onEachFeature: onEachFeature
−
center: [39.73, -104.99],
+
}).addTo(map);
−
zoom: 10,
+
 
−
layers: [grayscale, cities]
+
var coorsLayer = L.geoJSON(coorsField, {
−
});
 
  
−
var baseLayers = {
+
pointToLayer: function (feature, latlng) {
−
'Grayscale': grayscale,
+
return L.marker(latlng, {icon: baseballIcon});
−
'Streets': streets
+
},
−
};
 
  
−
var overlays = {
+
onEachFeature: onEachFeature
−
'Cities': cities
+
}).addTo(map);
−
};
 
  
−
var layerControl = L.control.layers(baseLayers, overlays).addTo(map);
 
 
</script>
 
</script>
  

Revision as of 14:24, 23 February 2022

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