-
Notifications
You must be signed in to change notification settings - Fork 0
/
geologic.js
105 lines (94 loc) · 3.07 KB
/
geologic.js
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
const center = [41.82045, 1.54907];
const crs25831 = new L.Proj.CRS('EPSG:25831','+proj=utm +zone=31 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
resolutions: [1100, 550, 275, 100, 50, 25, 10, 5, 2, 1, 0.5, 0.25]
}
);
let map = new L.map('map', {
//layers: [geologic],
crs: crs25831,
continuousWorld: true,
worldCopyJump: false,
center: center,
zoom: 5,
});
// ICGC GET CAPABILITIES: https://geoserveis.icgc.cat/arcgis/services/geologic/icgc_mg50m/MapServer/WMSServer?request=GetCapabilities&service=WMS
// WMS function from wms.js
const geologic = new L.TileLayer.WMS("https://geoserveis.icgc.cat/arcgis/services/geologic/icgc_mg50m/MapServer/WMSServer?", {
layers: 'UGEO_PA',
format: 'image/png',
crs: crs25831,
transparent: true,
continuousWorld: true,
version: '1.3.0',
attribution: 'Institut Cartogràfic i Geològic de Catalunya',
}).addTo(map);
// Perform 'GetFeatureInfo' request.
map.on('click', function(e) {
geologic.getFeatureInfo({
latlng: e.latlng,
done: function(featureCollection) {
console.log('getFeatureInfosucceed: ', featureCollection);
console.log(featureCollection.features[0].properties);
console.log(featureCollection.features[0].properties.DESCRIPCIO)
let codi = featureCollection.features[0].properties.CODI_CAS;
let clasLito = featureCollection.features[0].properties.ClasLitoEd;
let descripcio = featureCollection.features[0].properties.DESCRIPCIO;
let epoca = featureCollection.features[0].properties.EPOCA;
let era = featureCollection.features[0].properties.ERA;
let periode = featureCollection.features[0].properties.PERIODE;
$('.geologicDescription').html(`
<table class="table">
<tbody>
<tr>
<th scope="row">Codi:</th>
<td class="leftTabEl">${codi}</td>
</tr>
<tr>
<th scope="row">Classificació litològica: </th>
<td class="leftTabEl">${clasLito}</td>
</tr>
<tr>
<th scope="row">Descripció: </th>
<td class="leftTabEl">${descripcio}</td>
</tr>
<tr>
<th scope="row">Classificació litològica: </th>
<td class="leftTabEl">${clasLito}</td>
</tr>
<tr>
<th scope="row">Època: </th>
<td class="leftTabEl">${epoca}</td>
</tr>
<tr>
<th scope="row">Era: </th>
<td class="leftTabEl">${era}</td>
</tr>
<tr>
<th scope="row">Període: </th>
<td class="leftTabEl">${periode}</td>
</tr>
</tbody>
</table>
`)
},
fail: function(errorThrown) {
console.log('getFeatureInfo failed: ', errorThrown);
},
always: function() {
console.log('getFeatureInfo finished');
}
});
});
// Perform 'GetCapabilities' request.
geologic.getCapabilities({
done: function(capabilities) {
console.log('getCapabilitiessucceed: ', capabilities);
},
fail: function(errorThrown) {
console.log('getCapabilitiesfailed: ', errorThrown);
},
always: function() {
console.log('getCapabilitiesfinished');
}
});