-
Notifications
You must be signed in to change notification settings - Fork 0
/
IntlPop.js
274 lines (232 loc) · 7.88 KB
/
IntlPop.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
"use strict";
$(document).ready(function() {
var tell = function (msg) { $('p.output').text(msg); };
var simWindowFeatures = "height=378,width=1060";
// Initialize the menu of countries
function initCountryMenu() {
var html = "";
for (var i = 0; i < countryList.length; i++) {
html += '<option value="' + i + '">' + countryList[i].alias + '</option>';
}
$('#countrySelectMenu').html(html);
}
// Process about button: Pop up an alert
function about() {
alert("IntlPop Version 3.0\nSimulation by Cliff Shaffer, data conversion and map interface by Nate Beatty, map data preparation by Bill Carstensen, 2013\nFor more information, see http://geosim.cs.vt.edu/IntlPop\nSource and development history available at\nhttps://github.com/cashaffer/IntlPop\nThis is Version " + version());
}
// Process new button: Create a new instance of a simulation
function newsim() {
tell("Clicked on select button.");
if ($('#countrySelectMenu').val() === null) {
tell("Must first select a country!");
} else {
var filename = countryList[$('#countrySelectMenu').val()].filename;
console.log("Country selected is: " + filename);
var myRef = window.open("Simulation.html?filename=" + filename, '', simWindowFeatures);
if (myRef === null) {
console.log("Unable to open simulation window");
}
}
}
// Process help button: Give a full help page for this activity
function help() {
var myRef = window.open("IntlPopHelp.html", 'helpwindow');
}
// Handler for clicking on country in country select menu
function countryClick(el) {
console.log("In countryClick, value: " + $('#countrySelectMenu').val() +
", name: " + countryList[$('#countrySelectMenu').val()].alias);
$('p.currentSelection').text("Current Selection: " + countryList[$('#countrySelectMenu').val()].alias);
}
console.log("This page's URL is: " + window.location.protocol + "//" +
window.location.host + "/" + window.location.pathname);
initCountryMenu();
console.log("Country Menu value: " + $('#countrySelectMenu').val());
// var rSelectPanel = new Raphael("countrySelectPanel", 710, 600);
// rSelectPanel.rect(5, 68, 700, 350); // Why is this here?? - TNB
tell("Click on a country, then click 'Select It' to open a simulation window.");
// Action callbacks for form entities
$('#aboutButton').click(about);
$('#helpButton').click(help);
$('#doSelect').click(newsim);
$('#countrySelectMenu').click(countryClick);
/*********************
** Search Support **
**********************/
$('#countrySearchBox').keyup(function(e) {
var query = $('#countrySearchBox').val();
console.log('Query change detected: ' + query);
reloadCountryMenu();
$('option').filter(function(index){
query = query.toLowerCase();
var option = $(this).text().toLowerCase();
return (option.indexOf(query) === -1);
}).remove();
});
function clearSearch() {
$('#countrySearchBox').val('');
reloadCountryMenu();
}
function reloadCountryMenu() {
console.log('Reloading country menu');
var html = "";
for (var i = 0; i < countryList.length; i++) {
html += '<option value="' + i + '">' + countryList[i].alias + '</option>';
}
$('#countrySelectMenu').html(html);
}
/******************
** Map Support **
*******************/
var map_style = function(feature) {
return {
color: "#000000",
weight: 1,
opacity: 1,
fillColor: "#BBB",
fillOpacity: 1
}
}
var layerSources = [{
name: "Countries",
geoJsonPath: "MappickerLayers/Countries.geojson",
}, {
name: "Regions",
geoJsonPath: "MappickerLayers/Regions.geojson",
}, {
name: "Continents",
geoJsonPath: "MappickerLayers/Continents.geojson",
}];
// HTTP GET for GeoJSON files
var httpRequest = new XMLHttpRequest();
// other global variables
var map;
var mapLayers = {};
var currentLayer;
var countrylist;
function initMap() {
loadLayers();
loadCountryList();
map = L.map('map', {
center:[25.0, 0.0],
zoom: 1.25,
minZoom: 1,
maxZoom: 10,
layers: [mapLayers.Countries]
});
var layers = {
"Countries" : mapLayers.Countries,
"Regions" : mapLayers.Regions,
"Continents" : mapLayers.Continents
};
L.control.layers(layers, null, {
position: 'bottomleft',
collapsed: false
}).addTo(map);
currentLayer = mapLayers.Countries;
// Bind a listener to determine layer changes
map.on('baselayerchange', function(e) {
currentLayer = e.layer;
});
}
/*******************************
** Initialization Functions **
********************************/
function loadCountryList() {
$.ajax({
url: 'countrylist.json',
async: false,
dataType: 'json'
}).done( function (response) {
countrylist = response;
}).fail( function () {
console.log('Countrylist failed to load.');
});
}
function loadLayers() {
for (var i = 0; i < layerSources.length; i++) {
var lyrName = layerSources[i].name;
httpRequest.open("GET", layerSources[i].geoJsonPath, false);
httpRequest.send();
var responseJson = JSON.parse(httpRequest.responseText);
saveMapLayer(responseJson, lyrName);
};
}
function saveMapLayer(json, layerName) {
console.log('Saving ' + layerName);
mapLayers[layerName] = L.geoJson(json, {
style: map_style, // All map styles are the same
onEachFeature: onEachFeature
});
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: countryClicked
});
}
/*********************
** Event Handlers **
**********************/
// Called when the user selects a new map layer to display
function layerWasChanged(currentLayerName) {
console.log('Visible layer changed to: ' + currentLayerName);
}
// Should be called on mouseover
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
fillOpacity: 0.7
});
updateCurrentHover(layer.feature.properties.Name, layer.feature.properties.CountryID);
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
}
// Should be called on mouseout
function resetHighlight(e) {
currentLayer.resetStyle(e.target);
updateCurrentHover();
}
// Should be called on click
function countryClicked(e) {
selectCountryInList(e.target.feature.properties.CountryID);
}
/*********************
** Helper Methods **
**********************/
// Called on click?
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function updateCurrentHover(name, id) { // Updates the current hover text
if (typeof(name)==='undefined' || typeof(id)==='undefined') {
name = "";
} else {
name = countryNameForIndex(id);
}
// Update the currently update hover
$('p.hover').text("Current Hover: " + name);
}
function countryNameForIndex(id) {
var countryName = $.grep(countryList, function(e){ return e.countrycode == id})[0].alias;
return countryName;
}
// Called upon country selection:
// Spawns a new simulation window
function selectCountryInList(countryId) {
// countryId = typeof countryId !== 'undefined' ? countryId : 900; // Uncomment to make non-id'd polygons default to world selection
var countryObject = $.grep(countryList, function(e){ return e.countrycode == countryId})[0];
var countryIndex = $.inArray(countryObject, countryList);
if (countryIndex == -1) {
console.log('Country with id %i not found in the country list', countryId);
return;
}
clearSearch();
console.log('Selecting country with index: %i', countryId);
$('#countrySelectMenu').val(countryIndex);
$('p.currentSelection').text("Current Selection: " + countryList[$('#countrySelectMenu').val()].alias);
}
initMap();
});