This repository was archived by the owner on Jul 1, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathleaflet.html
93 lines (84 loc) · 2.7 KB
/
leaflet.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<html>
<head>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Leaflet-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<style>
#leaflet-map { height: 80%; }
</style>
<script src="mamoni.js"></script>
</head>
<body>
<div id="leaflet-map"></div>
<script>
var map = L.map('leaflet-map').setView([9.315056, -79.134224], 18);
// var mapboxAccessToken = "pk.eyJ1IjoibHVjYXNvYmUiLCJhIjoiY2p5cWdqeTI2MDA1YzNpcjNkdHkya3BieCJ9.1sPGdqMODcBf8w8gG0-KRw";
// L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
// id: 'mapbox.light',
// maxZoom: 30,
// attribution: 'Map data © ' +
// '<a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
// '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
// 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
// }).addTo(map);
L.control.scale().addTo(map);
// Add colors to data
function getColor(d) {
return d==0 ? '#7C7E82' :
d==1 ? '#020506' :
d==2 ? '#F8F8F8' :
'#931621';console.log('Error in the owned allotments!')
}
// Add opacity to data
function getOpacity(d) {
return d==0 ? '0.5' :
d==1 ? '0.35' :
d==2 ? '0.15' :
'1';console.log('Error in the owned allotments!')
}
function ownedStyle(owned) {
return {
fillColor: '#292B2E',
weight: 1,
opacity: 0.5,
color: getColor(owned),
dashArray: '',
fillOpacity: getOpacity(owned)
};
}
function style(feature) {
return ownedStyle(feature.properties.owned);
}
function zoomToFeature(e) {
console.log(e.target.getBounds())
map.fitBounds(e.target.getBounds(), {padding: [50, 50]});
}
function style(feature) {
return ownedStyle(feature.properties.owned);
}
function onEachFeature(feature, layer) {
layer.on({
click: zoomToFeature
});
}
$( document ).ready(function() {
var imageUrl = 'trees2.jpg';
var imageBounds = [
[9.3141992, -79.1344787],
[9.3156039, -79.1317406]
];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
geojson = L.geoJson(mamoniData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
});
</script>
</body>
</html>