Skip to content
Snippets Groups Projects
Commit 2e864f69 authored by kobben's avatar kobben Committed by Köbben, Barend (UT-ITC)
Browse files

Separated DataLoader and Messages classes

parent 85e269d9
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
README.md
+ 31
− 2
View file @ 2e864f69
......@@ -3,6 +3,35 @@
NatAtlas Viewer is a HTML5/SVG webapplication using the D3 Javascript API
to create National Atlas webmapping in the framework of the Dutch National GeoData Infrastructure.
NatAtlas Viewer is currently only tested fully on recent Chrome and FireFox browsers.
Check out running tests on <http://geoserver.itc.nl/NatAtlas/NatAtlasViewer/>
Check out stable test versions on <http://kartoweb.itc.nl/NatAtlas/NatAtlasViewer/>
(not always the latest version, that one is always in this GitHub)...
National Atlas Viewer is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.
see http://creativecommons.org/licenses/by-nc-sa/3.0/
Author: Barend Köbben - <a href="mailto:b.j.kobben@utwente.nl">b.j.kobben@utwente.nl</a> --
<a href="kartoweb.itc.nl/kobben">kartoweb.itc.nl/kobben</a>
##Changelist:
### version 0.8 [December 2015]:
* got rid of all use of eval(): e.g. eval("d." + FK) => d[FK]
* first attempts at breaking up in more js files, with proper classing:
* Messages.js
* dataloader.js
### 0.7 [August 2015]:
* Implementation of mapCompare tools
* added Jenks algorithm for classification (from GeoStats.js :
https://github.com/simogeo/geostats/blob/master/lib/geostats.js)
### 0.6 [August 2015]:
* Started using a Changelist ;-)
* First attempt at new MapChooser
* repaired circles sizes to use Math.PI
* use object for dataStats
* Changed metadata to one file with several languages
* moved common styles to natatlas.css
* cleaned up all: clear distinction globals/locals/attributes
* more error checking in metadata loading
* added legends (based on d3.legend by Susie Lu: http://d3-legend.susielu.com)
index.html
+ 6
− 4
View file @ 2e864f69
......@@ -2,13 +2,15 @@
<meta charset="utf-8">
<head>
<title>Nationale Atlas [0.7]</title>
<title>Nationale Atlas [0.8]</title>
<script src="./js/d3.v3.min.js"></script>
<script src="./js/d3-legend-bjk.js"></script>
<script src="./js/colorbrewer.js"></script>
<script src="./js/topojson.min.js"></script>
<script src="./js/jenks.js"></script>
<script src="./js/Messages.js"></script>
<script src="./js/DataLoader.js"></script>
<script src="./js/NatAtlas.js"></script>
<link href='./css/natatlas.css' rel='stylesheet' type='text/css'/>
......@@ -20,7 +22,7 @@
<!-- init with language = 0 = Nederlands -->
<body id="mainWindow" onload="init(0)">
<div id="chooserDiv">
<input id="makeMapBtn" type="button" onclick="showMapGroups(MD)" value="KIES KAART...">
<input id="makeMapBtn" type="button" onclick="showMapGroups(MD)" value="KIES ONDERWERP">
<p>Thema:<br>
<div id="mGroup"></div>
</p>
......@@ -35,7 +37,7 @@
</p>
</div>
<div id="compareDiv">
<input id="cMapBtn" type="button" onclick="showCompareGroups(MD)" value="VERGELIJK MET...">
<input id="cMapBtn" type="button" onclick="showCompareGroups()" value="VERGELIJK MET KAART">
<p>Thema:<br>
<div id="cGroup"></div>
</p>
......@@ -51,7 +53,7 @@
</div>
<div id="mainMapDiv"></div>
<div id="compareMapDiv"></div>
<div id="mainLegendDiv"></div>
<div id="mainLegendDiv"><a href="index_en.html">English version</a></div>
<div id="compareLegendDiv"></div>
<div id="compareToolsDiv">
<table>
......
index_en.html
+ 15
− 15
View file @ 2e864f69
......@@ -2,57 +2,57 @@
<meta charset="utf-8">
<head>
<title>National Atlas [0.7]</title>
<title>National Atlas [0.8]</title>
<script src="./js/d3.v3.min.js"></script>
<script src="./js/d3-legend-bjk.js"></script>
<script src="./js/colorbrewer.js"></script>
<script src="./js/topojson.min.js"></script>
<script src="./js/jenks.js"></script>
<script src="./js/Messages.js"></script>
<script src="./js/DataLoader.js"></script>
<script src="./js/NatAtlas.js"></script>
<link href='./css/natatlas.css' rel='stylesheet' type='text/css'/>
<style>
</style>
</head>
<!-- init with language = 0 = Nederlands -->
<!-- init with language = 1 = english -->
<body id="mainWindow" onload="init(1)">
<div id="chooserDiv">
<input id="makeMapBtn" type="button" onclick="showMapGroups(MD)" value="CHOOSE MAP..." >
<input id="makeMapBtn" type="button" onclick="showMapGroups()" value="CHOOSE SUBJECT" >
<p>Theme:<br>
<div id="mGroup"></div>
</p>
<div id="mGroup"></div>
<p>Subject:<br>
</p>
<div id="mSubject"></div>
</p>
<p>Map Unit:<br>
<div id="mUnit"></div>
</p>
<div id="mUnit"></div>
<p>Date:<br>
<div id="mDate"></div>
</p>
</div>
<div id="compareDiv">
<input id="cMapBtn" type="button" onclick="showCompareGroups(MD)" value="COMPARE WITH...">
<input id="cMapBtn" type="button" onclick="showCompareGroups()" value="COMPARE WITH MAP">
<p>Theme:<br>
<div id="cGroup"></div>
</p>
<div id="cGroup"></div>
<p>Subject:<br>
<div id="cSubject"></div>
</p>
<div id="cSubject"></div>
<p>Map Unit:<br>
<div id="cUnit"></div>
</p>
<div id="cUnit"></div>
<p>Date:<br>
<div id="cDate"></div>
</p>
<div id="cDate"></div>
</div>
<div id="mainMapDiv"></div>
<div id="compareMapDiv"></div>
<div id="mainLegendDiv"></div>
<div id="mainLegendDiv"><a href="index.html">Nederlandse versie</a></div>
<div id="compareLegendDiv"></div>
<div id="compareToolsDiv">
<table>
......@@ -62,7 +62,7 @@
oninput="xSlider()"/></td>
<td><input id="oSlider" type="range" disabled="disabled" min="0" max="100" step="1" value="100"
oninput="oSlider()"/></td>
<td><input id="wSlider" type="range" min="0" max="100" step="1" value="100"
<td><input id="wSlider" type="range" disabled="disabled" min="0" max="100" step="1" value="100"
oninput="wSlider()"/></td>
<td><input id="bCheck" type="checkbox" checked onchange="bCheck()">Show</td>
</tr>
......
js/DataLoader.js 0 → 100644
+ 138
− 0
View file @ 2e864f69
/**
* DataLoader.js:
*
* Data Loader for attribute and geodata for the NatAtlas project
*
* Licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.
* see http://creativecommons.org/licenses/by-nc-sa/3.0/
*
* @author Barend Köbben - b.j.kobben@utwente.nl
* Basic structure based on Mike Bostock's D3 example DataLoader
*
* loads data from various formats and returns in unified format
* geoData => returned as array of n objects, each having a GeoJson geometry and a
* properties object = nested list of attribute key-value pairs
* attribData => returned as d3.map of objects with key = FK,
* value = nested list of attribute key-value pairs
*
* Depends on Messages.js for error reporting!
*
* @version 1.0 [November 2015]
* first version supports
* geoData: geojson, topojson
* attribData: geojson, topojson, csv
*
*/
DataLoader = function () {
var loadedCallback = null;
var toload = {};
var dataLoaded = {};
var loaded = function (name, d) {
delete toload[name];
dataLoaded[name] = d;
return notifyIfAll();
};
var notifyIfAll = function () {
if ((loadedCallback != null) && d3.keys(toload).length === 0) {
loadedCallback(dataLoaded);
}
};
var loader = {
geometries: function (name, dataFormat, url) {
toload[name] = url;
if (dataFormat == "geojson") {
d3.json(url, function (error, d) {
if (error != undefined) showError(error, url);
return loaded(name, d.features);
});
} else if (dataFormat == "topojson") {
d3.json(url, function (error, d) {
if (error != undefined) showError(error, url);
return loaded(name, topojson.feature(d, d.objects.geo).features);
});
} else {
Messages.setMessage(["DataLoader: Ongeldig formaat [dataFormat = " + dataFormat + "]",
"DataLoader: Invalid format [dataFormat = " + dataFormat + "]"], Messages.errorMsg);
return false;
}
return loader;
},
attributes: function (name, dataFormat, url, FK) {
toload[name] = url;
if (dataFormat == "geojson") {
d3.json(url, function (error, d) {
if (error != undefined) showError(error, url);
//create a map using FK as key:
var attribData = d3.map();
d.features.forEach(function (f) {
var FKval = f.properties[FK];
var valuesObj = f.properties;
if (FKval == undefined || valuesObj == undefined) {
Messages.setMessage(["Geen geldige FK. Check metadata!\nFK=" + FK + "; FKval=" + FKval,
"No valid FK. Check metadata!\n(FK=" + FK + "; FKval=" + FKval], Messages.errorMsg);
}
attribData.set(FKval, valuesObj);
});
return loaded(name, attribData);
});
} else if (dataFormat == "topojson") {
d3.json(url, function (error, d) {
if (error != undefined) showError(error, url);
//create a map using FK as key:
var attribData = d3.map();
DEBUG1 = topojson.feature(d, d.objects.geo).features;
topojson.feature(d, d.objects.geo).features.forEach(function (f) {
var FKval = f.properties[FK];
var valuesObj = f.properties;
if (FKval == undefined || valuesObj == undefined) {
Messages.setMessage(["Geen geldige FK. Check metadata!\nFK=" + FK + "; FKval=" + FKval,
"No valid FK. Check metadata!\n(FK=" + FK + "; FKval=" + FKval], Messages.errorMsg);
}
attribData.set(FKval, valuesObj);
});
return loaded(name, attribData);
});
} else if (dataFormat == "csv") {
d3.csv(url, function (error, d) {
if (error != undefined) showError(error, url);
//create a map using FK as key:
var attribData = d3.map();
d.forEach(function (f) {
var FKval = f[FK];
var valuesObj = f;
if (FKval == undefined || valuesObj == undefined) {
Messages.setMessage(["Geen geldige FK. Check metadata!\nFK=" + FK + "; FKval=" + FKval,
"No valid FK. Check metadata!\n(FK=" + FK + "; FKval=" + FKval], Messages.errorMsg);
}
attribData.set(FKval, valuesObj);
});
return loaded(name, attribData);
});
} else {
Messages.setMessage(["DataLoader: Ongeldig formaat [dataFormat = " + dataFormat + "]",
"DataLoader: Invalid format [dataFormat = " + dataFormat + "]"], Messages.errorMsg);
return false;
}
return loader;
},
onload: function (callback) {
loadedCallback = callback;
notifyIfAll();
}
};
return loader;
}
;
function showError(error, url) {
if (error.status == undefined) { // it's not XMLHTTPrequest error}
theError = error.name + ": " + error.message;
} else {
theError = "HTTP " + error.status + "--" + error.statusText;
}
Messages.setMessage(["ACHTERGRONDKAART LADEN MISLUKT!\nURL= " + url + ";\nError: " + theError,
"ERROR LOADING BACKGROUND MAP!\nURL= " + url + ";\nError: " + theError], Messages.errorMsg);
return;
}
\ No newline at end of file
js/Messages.js 0 → 100644
+ 56
− 0
View file @ 2e864f69
/**
* Messages.js:
* * Bi-lingual messaging system used for messages as well as errors and debug info
*
* part of the National Atlas Viewer system
*
* Licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.
* see http://creativecommons.org/licenses/by-nc-sa/3.0/
*
* @author Barend Köbben - b.j.kobben@utwente.nl
*
* @version 1.0 [October 2015]
* part of attempts at creating parts of NatAtlasViewer as seperate classes
* re-implementation of existing Message function
*
*/
Messages = {
MsgDiv: null,
init: function(div, language) {
Messages.MsgDiv = div;
Messages.curLang = language;
Messages.NL = 0, Messages.EN = 1;
Messages.errorMsg = 0, Messages.showMsg = 1, Messages.hideMsg = 2, Messages.debugMsg = 3;
//alert("inited !");
}
,
setMessage: function (messageStrs, messageType) {
//first some checking and if necessary repairing:
if (messageStrs.length == 0) {
//no message:
messageStrs[0] = messageStrs[1] = "No message supplied to SetMessage!";
} else if ((messageStrs.length == 1)) {
//message in only one language, copy to other language:
messageStrs[1] = messageStrs[0];
}
if (messageType == Messages.showMsg) { //log message and display message box
Messages.MsgDiv.innerHTML = messageStrs[Messages.curLang];
Messages.MsgDiv.style.display = "inline"
} else if (messageType == Messages.hideMsg) { //log message and hide messagebox
Messages.MsgDiv.innerHTML = messageStrs[Messages.curLang];
Messages.MsgDiv.style.display = "none"
} else if (messageType == Messages.errorMsg) { //display Javascript alert
alert(messageStrs[Messages.curLang]);
}
if (debugOn) { // all messageTypes are logged in console:
// debug messages only in english
console.log(messageStrs[Messages.EN]);
}
}
}
js/NatAtlas.js
+ 137
− 325
View file @ 2e864f69
This diff is collapsed.
js/d3-legend-bjk.js
+ 635
− 558
View file @ 2e864f69
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment