Difference between revisions of "Test"

From A.P.E.S. wiki
Jump to navigation Jump to search
Line 2: Line 2:
 
<head>
 
<head>
 
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
 
<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>
+
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
  
−
<style>
+
<style>
−
.leaflet-container {
+
.leaflet-container {
−
height: 400px;
+
  height: 400px;
−
width: 600px;
+
  width: 600px;
−
max-width: 100%;
+
  max-width: 100%;
−
max-height: 100%;
+
  max-height: 100%;
−
}
+
}
−
</style>
+
</style>
  
 
 
 
</head>
 
</head>
−
<body>
+
<body>
 +
  <div id="map" style="width: 600px; height: 400px;"></div>
 +
 
 +
  <script>
 +
var cities = L.layerGroup();
  
 +
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 mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
  
−
<div id="map" style="width: 600px; height: 400px;"></div>
+
var grayscale = L.tileLayer(mbUrl, {id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
−
+
var streets = L.tileLayer(mbUrl, {id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr});
−
 
 
−
 
 
−
 
 
−
 
 
−
<script>
 
−
 
−
var freeBus = {
 
−
    "type": "FeatureCollection",
 
−
    "features": [
 
−
        {
 
−
            "type": "Feature",
 
−
            "geometry": {
 
−
                "type": "LineString",
 
−
                "coordinates": [
 
−
                    [-105.00341892242432, 39.75383843460583],
 
−
                    [-105.0008225440979, 39.751891803969535]
 
−
                ]
 
−
            },
 
−
            "properties": {
 
−
                "popupContent": "This is a free bus line that will take you across downtown.",
 
−
                "underConstruction": false
 
−
            },
 
−
            "id": 1
 
−
        },
 
−
        {
 
−
            "type": "Feature",
 
−
            "geometry": {
 
−
                "type": "LineString",
 
−
                "coordinates": [
 
−
                    [-105.0008225440979, 39.751891803969535],
 
−
                    [-104.99820470809937, 39.74979664004068]
 
−
                ]
 
−
            },
 
−
            "properties": {
 
−
                "popupContent": "This is a free bus line that will take you across downtown.",
 
−
                "underConstruction": true
 
−
            },
 
−
            "id": 2
 
−
        },
 
−
        {
 
−
            "type": "Feature",
 
−
            "geometry": {
 
−
                "type": "LineString",
 
−
                "coordinates": [
 
−
                    [-104.99820470809937, 39.74979664004068],
 
−
                    [-104.98689651489258, 39.741052354709055]
 
−
                ]
 
−
            },
 
−
            "properties": {
 
−
                "popupContent": "This is a free bus line that will take you across downtown.",
 
−
                "underConstruction": false
 
−
            },
 
−
            "id": 3
 
−
        }
 
−
    ]
 
−
};
 
−
 
 
−
var lightRailStop = {
 
−
    "type": "FeatureCollection",
 
−
    "features": [
 
−
        {
 
−
            "type": "Feature",
 
−
            "properties": {
 
−
                "popupContent": "18th & California Light Rail Stop"
 
−
            },
 
−
            "geometry": {
 
−
                "type": "Point",
 
−
                "coordinates": [-104.98999178409576, 39.74683938093904]
 
−
            }
 
−
        },{
 
−
            "type": "Feature",
 
−
            "properties": {
 
−
                "popupContent": "20th & Welton Light Rail Stop"
 
−
            },
 
−
            "geometry": {
 
−
                "type": "Point",
 
−
                "coordinates": [-104.98689115047453, 39.747924136466565]
 
−
            }
 
−
        }
 
−
    ]
 
−
};
 
−
 
 
−
var bicycleRental = {
 
−
    "type": "FeatureCollection",
 
−
    "features": [
 
−
        {
 
−
            "geometry": {
 
−
                "type": "Point",
 
−
                "coordinates": [
 
−
                    -104.9998241,
 
−
                    39.7471494
 
−
                ]
 
−
            },
 
−
            "type": "Feature",
 
−
            "properties": {
 
−
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
 
−
            },
 
−
            "id": 51
 
−
        },
 
−
        {
 
−
            "geometry": {
 
−
                "type": "Point",
 
−
                "coordinates": [
 
−
                    -104.9983545,
 
−
                    39.7502833
 
−
                ]
 
−
            },
 
−
            "type": "Feature",
 
−
            "properties": {
 
−
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
 
−
            },
 
−
            "id": 52
 
−
        },
 
−
        {
 
−
            "geometry": {
 
−
                "type": "Point",
 
−
                "coordinates": [
 
−
                    -104.9963919,
 
−
                    39.7444271
 
−
                ]
 
−
            },
 
−
            "type": "Feature",
 
−
            "properties": {
 
−
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
 
−
            },
 
−
            "id": 54
 
−
        },
 
−
        {
 
−
            "geometry": {
 
−
                "type": "Point",
 
−
                "coordinates": [
 
−
                    -104.9960754,
 
−
                    39.7498956
 
−
                ]
 
−
            },
 
−
            "type": "Feature",
 
−
            "properties": {
 
−
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
 
−
            },
 
−
            "id": 55
 
−
        },
 
−
        {
 
−
            "geometry": {
 
−
                "type": "Point",
 
−
                "coordinates": [
 
−
                    -104.9933717,
 
−
                    39.7477264
 
−
                ]
 
−
            },
 
−
            "type": "Feature",
 
−
            "properties": {
 
−
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
 
−
            },
 
−
            "id": 57
 
−
        },
 
−
        {
 
−
            "geometry": {
 
−
                "type": "Point",
 
−
                "coordinates": [
 
−
                    -104.9913392,
 
−
                    39.7432392
 
−
                ]
 
−
            },
 
−
            "type": "Feature",
 
−
            "properties": {
 
−
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
 
−
            },
 
−
            "id": 58
 
−
        },
 
−
        {
 
−
            "geometry": {
 
−
                "type": "Point",
 
−
                "coordinates": [
 
−
                    -104.9788452,
 
−
                    39.6933755
 
−
                ]
 
−
            },
 
−
            "type": "Feature",
 
−
            "properties": {
 
−
                "popupContent": "This is a B-Cycle Station. Come pick up a bike and pay by the hour. What a deal!"
 
−
            },
 
−
            "id": 74
 
−
        }
 
−
    ]
 
−
};
 
−
 
 
−
var campus = {
 
−
    "type": "Feature",
 
−
    "properties": {
 
−
        "popupContent": "This is the Auraria West Campus",
 
−
        "style": {
 
−
            weight: 2,
 
−
            color: "#999",
 
−
            opacity: 1,
 
−
            fillColor: "#B0DE5C",
 
−
            fillOpacity: 0.8
 
−
        }
 
−
    },
 
−
    "geometry": {
 
−
        "type": "MultiPolygon",
 
−
        "coordinates": [
 
−
            [
 
−
                [
 
−
                    [-105.00432014465332, 39.74732195489861],
 
−
                    [-105.00715255737305, 39.74620006835170],
 
−
                    [-105.00921249389647, 39.74468219277038],
 
−
                    [-105.01067161560059, 39.74362625960105],
 
−
                    [-105.01195907592773, 39.74290029616054],
 
−
                    [-105.00989913940431, 39.74078835902781],
 
−
                    [-105.00758171081543, 39.74059036160317],
 
−
                    [-105.00346183776855, 39.74059036160317],
 
−
                    [-105.00097274780272, 39.74059036160317],
 
−
                    [-105.00062942504881, 39.74072235994946],
 
−
                    [-105.00020027160645, 39.74191033368865],
 
−
                    [-105.00071525573731, 39.74276830198601],
 
−
                    [-105.00097274780272, 39.74369225589818],
 
−
                    [-105.00097274780272, 39.74461619742136],
 
−
                    [-105.00123023986816, 39.74534214278395],
 
−
                    [-105.00183105468751, 39.74613407445653],
 
−
                    [-105.00432014465332, 39.74732195489861]
 
−
                ],[
 
−
                    [-105.00361204147337, 39.74354376414072],
 
−
                    [-105.00301122665405, 39.74278480127163],
 
−
                    [-105.00221729278564, 39.74316428375108],
 
−
                    [-105.00283956527711, 39.74390674342741],
 
−
                    [-105.00361204147337, 39.74354376414072]
 
−
                ]
 
−
            ],[
 
−
                [
 
−
                    [-105.00942707061768, 39.73989736613708],
 
−
                    [-105.00942707061768, 39.73910536278566],
 
−
                    [-105.00685214996338, 39.73923736397631],
 
−
                    [-105.00384807586671, 39.73910536278566],
 
−
                    [-105.00174522399902, 39.73903936209552],
 
−
                    [-105.00041484832764, 39.73910536278566],
 
−
                    [-105.00041484832764, 39.73979836621592],
 
−
                    [-105.00535011291504, 39.73986436617916],
 
−
                    [-105.00942707061768, 39.73989736613708]
 
−
                ]
 
−
            ]
 
−
        ]
 
−
    }
 
−
};
 
−
 
 
−
var coorsField = {
 
−
    "type": "Feature",
 
−
    "properties": {
 
−
        "popupContent": "Coors Field"
 
−
    },
 
−
    "geometry": {
 
−
        "type": "Point",
 
−
        "coordinates": [-104.99404191970824, 39.756213909328125]
 
−
    }
 
−
};
 
−
 
 
−
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({
+
var map = L.map('map', {
−
iconUrl: 'baseball-marker.png',
+
center: [39.73, -104.99],
−
iconSize: [32, 37],
+
zoom: 10,
−
iconAnchor: [16, 37],
+
layers: [grayscale, cities]
−
popupAnchor: [0, -28]
 
 
});
 
});
  
−
function onEachFeature(feature, layer) {
+
var baseLayers = {
−
var popupContent = '<p>I started out as a GeoJSON ' +
+
'Grayscale': grayscale,
−
feature.geometry.type + ', but now I\'m a Leaflet vector!</p>';
+
'Streets': streets
−
 
+
};
−
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>
+
var overlays = {
 +
'Cities': cities
 +
};
  
 +
var layerControl = L.control.layers(baseLayers, overlays).addTo(map);
  
  
−
</body>
+
  </script>
 +
</body>
 
</html>
 
</html>

Revision as of 15:37, 23 February 2022

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