-
Notifications
You must be signed in to change notification settings - Fork 0
/
IPSP_Map.js
90 lines (71 loc) · 3.42 KB
/
IPSP_Map.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
function bold(text){
return "<b>"+text+"</b>";
}
function hyperlink(text, url){
return '<a href="'+url+'" target="_blank" rel="noopener noreferrer"> '+text+' </a>'
}
function popup_layout_std(heading, text, href_text, href_url){
return bold(heading) + '<br>' + text + '<br>[ref: ' + hyperlink(href_text, href_url) + ']'
}
function popup_layout_pic(heading, text, pic_text, pic_url){
return bold(heading) + '<br>' + text + '<br>'+pic_text + '<br>' + '<img src=' + pic_url + ' />';
}
////////////////////////////////
var map = L.map('mapid', {zoomControl : true,
fullscreenControl: true,
fullscreenControlOptions: {position: 'topleft'}
}).setView([ 21.3274, 12.3922], 3);
var OpenStreetMap = L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
OpenStreetMap.addTo(map);
var Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
maxZoom: 17,
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});
var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
maxZoom: 8,
attribution: 'Map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
});
var Esri_WorldShadedRelief = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri',
maxZoom: 13
});
var Esri_OceanBasemap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Sources: GEBCO, NOAA, CHS, OSU, UNH, CSUMB, National Geographic, DeLorme, NAVTEQ, and Esri',
maxZoom: 13
});
var baseLayers = {
"OpenStreetMap": OpenStreetMap,
"Esri: WorldImagery": Esri_WorldImagery,
"OpenTopoMap": OpenTopoMap,
"Esri: WorldShadedRelief":Esri_WorldShadedRelief,
"Esri: OceanBasemap":Esri_OceanBasemap
}
var layerControl = L.control.layers(baseLayers);
L.control.scale().addTo(map);
/////////////////////////////////////////
// var Layer_countries = L.layerGroup();
// console.log('...')
// console.log(IPSP_Info);
var IPSP_keys = Object.keys(IPSP_Info);
// console.log(IPSP_keys);
function functionFilter(feature) { return IPSP_keys.includes(feature.properties.name)};
function functionStyle(feature) { return { color: 'gray' }};
var customLayer = L.geoJson(null, {filter: functionFilter, style: functionStyle});
var countries = omnivore.topojson('./data/countries-110m.json', null, customLayer).addTo(map);
countries.bindPopup(function (layer) {
// console.log(layer);
var temp_str = bold(layer.feature.properties.name);
temp_str += '<br>';
temp_str += 'Number of Students: ';
temp_str += IPSP_Info[layer.feature.properties.name]['No_Students'];
temp_str += '<br>';
temp_str += 'Contact: ';
temp_str += IPSP_Info[layer.feature.properties.name]['contact'];
return temp_str;
});
// Layer_countries.addLayer(countries);
// layerControl.addOverlay(Layer_countries, "Countries");
layerControl.addTo(map);