Платформа ЦРНП "Мирокод" для разработки проектов
https://git.mirocod.ru
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.5 KiB
90 lines
2.5 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Leaflet GeoJSON Example</title> |
|
<meta charset="utf-8" /> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" /> |
|
</head> |
|
<body> |
|
<div id="map" style="width: 600px; height: 400px"></div> |
|
|
|
<script src="sample-geojson.js" type="text/javascript"></script> |
|
<script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script> |
|
|
|
<script> |
|
var map = L.map('map').setView([39.74739, -105], 13); |
|
|
|
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', { |
|
maxZoom: 18, |
|
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + |
|
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + |
|
'Imagery © <a href="http://mapbox.com">Mapbox</a>', |
|
id: 'mapbox.light' |
|
}).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); |
|
} |
|
|
|
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); |
|
|
|
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>
|
|
|