Difference between revisions of "Test"
Jump to navigation
Jump to search
| Line 24: | Line 24: | ||
| − | <script type="text/javascript"> | + | <script src="sample-geojson.js" type="text/javascript"></script> |
| − | var map = L.map('map', { | + | <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 © <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] | ||
}); | }); | ||
| − | var | + | 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> | </script> | ||
| + | |||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 14:35, 23 February 2022