Difference between revisions of "Refugia"

From A.P.E.S. wiki
Jump to navigation Jump to search
Line 23: Line 23:
 
   top:480px;  /* your iframe height */
 
   top:480px;  /* your iframe height */
 
   margin-top:-480px;  /* your iframe height */
 
   margin-top:-480px;  /* your iframe height */
 +
 +
.leaflet-container {
 +
height: 400px;
 +
width: 600px;
 +
max-width: 100%;
 +
max-height: 100%;
 +
}
 
}
 
}
 
</style>
 
</style>
Line 28: Line 35:
 
<iframe src="https://www.google.com/maps/d/embed?mid=11RyWeL3CvaPBksfuI04aU2C8hp7VUV_x&hl=en&ehbc=2E312F" width="100%" height="480">
 
<iframe src="https://www.google.com/maps/d/embed?mid=11RyWeL3CvaPBksfuI04aU2C8hp7VUV_x&hl=en&ehbc=2E312F" width="100%" height="480">
 
</iframe>
 
</iframe>
 +
 +
<head>
 +
 +
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
 +
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
 +
 +
</head>
 +
<body>
 +
 +
<div id='map'></div>
 +
 +
<script src="https://iucnapesportal.org/wiki/files/sample-geojson.js" type="text/javascript"></script>
 +
 +
<script>
 +
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,
 +
 +
pointToLayer: function (feature, latlng) {
 +
return L.circleMarker(latlng, {
 +
radius: 8,
 +
fillColor: '#ff7800',
 +
color: '#000',
 +
weight: 1,
 +
opacity: 1,
 +
fillOpacity: 0.8
 +
});
 +
}
 +
}).addTo(map);
 +
 +
var freeBusLayer = L.geoJSON(freeBus, {
 +
 +
filter: function (feature, layer) {
 +
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;
 +
},
 +
 +
onEachFeature: onEachFeature
 +
}).addTo(map);
 +
 +
var coorsLayer = L.geoJSON(coorsField, {
 +
 +
pointToLayer: function (feature, latlng) {
 +
return L.marker(latlng, {icon: baseballIcon});
 +
},
 +
 +
onEachFeature: onEachFeature
 +
}).addTo(map);
 +
 +
</script>
 +
 +
 +
 +
</body>
 
</html>
 
</html>

Revision as of 12:58, 23 February 2022

Loading map...


Download: Geographic shapefile (ZIP; 85 kB)]


Loading map...


Loading map...