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.
65 lines
1.6 KiB
65 lines
1.6 KiB
<!DOCTYPE HTML> |
|
<html> |
|
<head> |
|
<link rel="stylesheet" href="leaflet.css" /> |
|
<style> |
|
body { |
|
padding: 0; |
|
margin: 0; |
|
} |
|
html, body, #map { |
|
height: 100%; |
|
} |
|
</style> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
|
<script src="../js/jquery.min.js"></script> |
|
</head> |
|
<body> |
|
<div id="map"></div> |
|
<script src="leaflet.js"></script> |
|
<script> |
|
var map = L.map('map').setView([46.96850,142.76670], 10); |
|
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
|
attribution: '', |
|
maxZoom: 18 |
|
}).addTo(map); |
|
var geojsonFeature =''; |
|
$.getJSON("map.geojson", function(json){ |
|
geojsonFeature = json; |
|
L.geoJson(geojsonFeature,{ |
|
style: function(feature) { |
|
switch (feature.properties.type) { |
|
case 'red': return {weight: 3, color: "#ff0000", opacity: 1}; |
|
case 'green': return {weight: 3,color: "#00ff00", opacity: 1}; |
|
} |
|
}, |
|
onEachFeature: function (feature, layer) { |
|
if(feature.properties.title) |
|
layer.bindPopup(feature.properties.title); |
|
} |
|
|
|
}).addTo(map); |
|
map.fitBounds(geojsonFeature.getBounds()); |
|
}); |
|
function onLocationFound(e) { |
|
var radius = e.accuracy / 2; |
|
L.marker(e.latlng).addTo(map) |
|
.bindPopup("Вы где-то в районе " + radius + " метров от этой точки").openPopup(); |
|
//L.circle(e.latlng, radius).addTo(map); |
|
} |
|
|
|
function onLocationError(e) { |
|
alert(e.message); |
|
} |
|
|
|
|
|
|
|
map.on('locationfound', onLocationFound); |
|
map.on('locationerror', onLocationError); |
|
map.locate({setView: true, maxZoom: 16}); |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
</html>
|
|
|