-
Notifications
You must be signed in to change notification settings - Fork 0
/
anothersidebarattempt.html
126 lines (70 loc) · 3.88 KB
/
anothersidebarattempt.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<head>
<style>
#map { width: 70%;
height: 100%}
.leaflet-popup-content {
max-width: 500px;
height: 500px;
;
}
.sidebar {
width: 30%;
height: 100%;
position: absolute;
right: 0;
background-color: #c3c3c3;
font-family: "Arial", Arial, serif;
padding:
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="justoneshape.js"></script>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<div>
<div class="sidebar">
-- Click the point on map to fill the data --
<br>
<b>Slider:</b><div class="slider"></div>
<b>Common Name:</b><div class="common"></div>
<b>ID:</b><div class="id"></div>
<b>Location Description:</b><div class="locationDescription"></div>
</div>
<div id="map"></div>
<script src="anothersidebarattempt.js"></script>
<!--
<script>
var map = L.map('map').setView([ 37.9265451,-122.6724551], 17);
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
}).addTo(map);
var capeIvyShape = { "type": "FeatureCollection", "features": [
{ "type": "Feature", "properties":
{ "slider": "mg155769-slider.html", "Location Description":"South side of volunteer canyon Creek, from the two willows on the bank to the arching bay tree","Common Name":"Cape ivy","Taxon":"Delairea odorata","Observer":"Henry Inman","Access":"unpublished","ID":"mg155769","Date":"2022-02-09 12:34:32.0"}, "geometry": {"coordinates":[[[-122.6726599,37.9264891],[-122.6726112,37.9264852],[-122.6725809,37.9265296],[-122.6725778,37.9265544],[-122.6725393,37.9265349],[-122.6725174,37.9265094],[-122.6725652,37.9264779],[-122.6726359,37.9264118],[-122.6726643,37.9264333],[-122.6726599,37.9264891]]],"type":"Polygon"}},
{ "type": "Feature", "properties":
{ "slider": "mg155840-slider.html", "Infested Area (acres)":"210.1 Square Meters","Number of Plants":"","Date / Time":"2022-02-11 12:22:52.0","Location Description":"","Common Name":"Cape ivy","Percent Cover":"50 - 75 %","Taxon":"Delairea odorata","Gross Area (acres)":"336.9 Square Meters","Phenology":"","Observer":"Henry Inman","Distribution":"","Habitat":"","ID":"mg155840","Notes":""}, "geometry": {"coordinates":[[[-122.6725667,37.9267888],[-122.6726643,37.9268257],[-122.6727055,37.9267358],[-122.6727293,37.9266601],[-122.6727164,37.9265679],[-122.6727128,37.9265233],[-122.6726556,37.9265162],[-122.6726279,37.926532],[-122.6726203,37.9265638],[-122.6726161,37.9266059],[-122.6725574,37.9266305],[-122.6725958,37.9267123],[-122.6725667,37.9267888]]],"type":"Polygon"}}
]}
var rotas = L.geoJSON(capeIvyShape, {
onEachFeature: onEachFeature
}).addTo(map);
function onEachFeature(feature, layer) {
layer.on('click', function(e) {
$(".slider").html(feature.properties.slider);
// $(".id").html(feature.properties.ID);
// $(".common".html(feature.properties.["Common Name"]);
});
}
</script>
-->
</body>
<!---<iframe class="clickup-embed" src="https://sharing.clickup.com/t/h/1t3r8vh/2I54KKL7UVKUKBO" onwheel="" width="30%" height="700px" style="background: transparent; border: 1px solid #ccc;"></iframe>
</body>
</html>
<!--look at this code https://codepen.io/dagmara223/pen/BVBGKG-->