Difference between revisions of "Map with German electoral districts"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
Line 48: | Line 48: | ||
strokeWidth:1,strokeColor:'black',highlightStrokeColor:'black'}); | strokeWidth:1,strokeColor:'black',highlightStrokeColor:'black'}); | ||
− | JXG.addEvent(graph.rendNode, 'mouseover', function(){graph.highlight(); | + | JXG.addEvent(graph.rendNode, 'mouseover', function(){graph.highlight(); wahlkreisNode.nodeValue=area[1];}, graph); |
JXG.addEvent(graph.rendNode, 'mouseout', function(){graph.noHighlight();}, graph); | JXG.addEvent(graph.rendNode, 'mouseout', function(){graph.noHighlight();}, graph); | ||
graph.hasPoint = function(){return false; }; | graph.hasPoint = function(){return false; }; | ||
Line 77: | Line 77: | ||
timedChunk(points, createCurve, null, final); | timedChunk(points, createCurve, null, final); | ||
</jsxgraph> | </jsxgraph> | ||
+ | |||
+ | ===The underlying JavaScript code=== | ||
+ | <source lang="xml"> | ||
+ | <div id="wahlkreis"> </div> | ||
+ | <jsxgraph width="500" height="700"> | ||
+ | var minX =-289319.4, | ||
+ | maxY = 6827620, | ||
+ | maxX = 351315.7, | ||
+ | minY = 5960587, | ||
+ | brd, | ||
+ | wahlkreisNode = document.getElementById('wahlkreis').firstChild, | ||
+ | points = [], | ||
+ | len = data.length, // from germany.js | ||
+ | lastWk = null, | ||
+ | i, col = 0; | ||
+ | |||
+ | brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[minX-1000,maxY+1000,maxX+1000,minY-1000], | ||
+ | keepaspectratio:true}); | ||
+ | |||
+ | for(i=0;i<len;i++) { | ||
+ | if(i%6==1) { | ||
+ | lastWk = data[i]; | ||
+ | } | ||
+ | else if(i%6 == 5) { | ||
+ | points.push([data[i],lastWk]); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function createCurve(area) { | ||
+ | var xy = area[0].split(','), | ||
+ | x = [], y = [], | ||
+ | c = [], len, i, a, graph; | ||
+ | |||
+ | len = xy.length; | ||
+ | for(i=0;i<len;i++) { | ||
+ | a = xy[i].split(' '); | ||
+ | c.push(new JXG.Coords(JXG.COORDS_BY_USER, [1*a[0], 1*a[1]], brd)); | ||
+ | } | ||
+ | c = brd.renderer.RamenDouglasPeuker(c,1.5); | ||
+ | len = c.length; | ||
+ | for (i=0;i<len;i++) { | ||
+ | x.push(c[i].usrCoords[1]); | ||
+ | y.push(c[i].usrCoords[2]); | ||
+ | } | ||
+ | graph = brd.createElement('curve', [x,y], | ||
+ | {fillColor:JXG.hsv2rgb(col++,0.6,0.9), | ||
+ | highlightFillColor:'yellow', | ||
+ | strokeWidth:1,strokeColor:'black',highlightStrokeColor:'black'}); | ||
+ | |||
+ | JXG.addEvent(graph.rendNode, 'mouseover', function(){graph.highlight(); wahlkreisNode.nodeValue=area[1];}, graph); | ||
+ | JXG.addEvent(graph.rendNode, 'mouseout', function(){graph.noHighlight();}, graph); | ||
+ | graph.hasPoint = function(){return false; }; | ||
+ | } | ||
+ | |||
+ | function final() { | ||
+ | brd.unsuspendUpdate(); | ||
+ | } | ||
+ | |||
+ | //Copyright 2009 Nicholas C. Zakas. All rights reserved. | ||
+ | //MIT Licensed | ||
+ | function timedChunk(items, process, context, callback){ | ||
+ | var todo = items.concat(); //create a clone of the original | ||
+ | setTimeout(function(){ | ||
+ | var start = +new Date(); | ||
+ | do { | ||
+ | process.call(context, todo.shift()); | ||
+ | } while (todo.length > 0 && (+new Date() - start < 300)); | ||
+ | if (todo.length > 0){ | ||
+ | setTimeout(arguments.callee, 1); | ||
+ | } else { | ||
+ | callback(items); | ||
+ | } | ||
+ | }, 1); | ||
+ | } | ||
+ | |||
+ | brd.suspendUpdate(); | ||
+ | timedChunk(points, createCurve, null, final); | ||
+ | </jsxgraph> | ||
+ | |||
+ | </source> | ||
+ | |||
+ | [[Category:Examples]] |
Revision as of 12:50, 19 October 2009
The underlying JavaScript code
<div id="wahlkreis"> </div>
<jsxgraph width="500" height="700">
var minX =-289319.4,
maxY = 6827620,
maxX = 351315.7,
minY = 5960587,
brd,
wahlkreisNode = document.getElementById('wahlkreis').firstChild,
points = [],
len = data.length, // from germany.js
lastWk = null,
i, col = 0;
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[minX-1000,maxY+1000,maxX+1000,minY-1000],
keepaspectratio:true});
for(i=0;i<len;i++) {
if(i%6==1) {
lastWk = data[i];
}
else if(i%6 == 5) {
points.push([data[i],lastWk]);
}
}
function createCurve(area) {
var xy = area[0].split(','),
x = [], y = [],
c = [], len, i, a, graph;
len = xy.length;
for(i=0;i<len;i++) {
a = xy[i].split(' ');
c.push(new JXG.Coords(JXG.COORDS_BY_USER, [1*a[0], 1*a[1]], brd));
}
c = brd.renderer.RamenDouglasPeuker(c,1.5);
len = c.length;
for (i=0;i<len;i++) {
x.push(c[i].usrCoords[1]);
y.push(c[i].usrCoords[2]);
}
graph = brd.createElement('curve', [x,y],
{fillColor:JXG.hsv2rgb(col++,0.6,0.9),
highlightFillColor:'yellow',
strokeWidth:1,strokeColor:'black',highlightStrokeColor:'black'});
JXG.addEvent(graph.rendNode, 'mouseover', function(){graph.highlight(); wahlkreisNode.nodeValue=area[1];}, graph);
JXG.addEvent(graph.rendNode, 'mouseout', function(){graph.noHighlight();}, graph);
graph.hasPoint = function(){return false; };
}
function final() {
brd.unsuspendUpdate();
}
//Copyright 2009 Nicholas C. Zakas. All rights reserved.
//MIT Licensed
function timedChunk(items, process, context, callback){
var todo = items.concat(); //create a clone of the original
setTimeout(function(){
var start = +new Date();
do {
process.call(context, todo.shift());
} while (todo.length > 0 && (+new Date() - start < 300));
if (todo.length > 0){
setTimeout(arguments.callee, 1);
} else {
callback(items);
}
}, 1);
}
brd.suspendUpdate();
timedChunk(points, createCurve, null, final);
</jsxgraph>