Map with German administrative districts: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 16: | Line 16: | ||
function createCurve(path) { | function createCurve(path) { | ||
var i = c.length, | var i = c.length, | ||
col = JXG.hsv2rgb( | col = JXG.hsv2rgb(160/len*i,0.7,1.0), // fill color | ||
scol = '#333333', // stroke color | scol = '#333333', // stroke color | ||
sw = 1, // stroke width | sw = 1, // stroke width | ||
Line 23: | Line 23: | ||
{name:info[path[2]][2], | {name:info[path[2]][2], | ||
fillColor:col, | fillColor:col, | ||
strokeColor:scol,strokeWidth:sw,highlightFillColor:hcol,fillOpacity:0. | strokeColor:scol,strokeWidth:sw,highlightFillColor:hcol,fillOpacity:0.7}); | ||
JXG.addEvent(c[i].rendNode, 'mouseover', (function(g){ return function(){g.highlight(); document.getElementById('landkreis').innerHTML=g.name;};})(c[i]), c[i]); | JXG.addEvent(c[i].rendNode, 'mouseover', (function(g){ return function(){g.highlight(); document.getElementById('landkreis').innerHTML=g.name;};})(c[i]), c[i]); | ||
JXG.addEvent(c[i].rendNode, 'mouseout', (function(g){ return function(){g.noHighlight();};})(c[i]), c[i]); | JXG.addEvent(c[i].rendNode, 'mouseout', (function(g){ return function(){g.noHighlight();};})(c[i]), c[i]); |
Revision as of 17:27, 14 December 2009
This map shows the German administrative districts (counties).
Vervielfältigung, Verbreitung und öffentliche Zugänglichmachung, auch auszugsweise, mit Quellenangabe gestattet.
The JavaScript code
The data has been downloaded in ArcView/shape format from Bundesamt für Kartographie und Geodäsie. Then, using shapelib and pyshapelib the file was converted to JavaScript, see [1]. The shape data from this file is displayed using the following JSXGraph code.
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:bbox, keepaspectratio:true}),
c = [],
len = paths.length;
function final() {
brd.unsuspendUpdate();
}
function createCurve(path) {
var i = c.length,
col = JXG.hsv2rgb(360/len*i,0.7,0.9), // fill color
scol = '#999999', // stroke color
sw = 1, // stroke width
hcol = '#ffff00'; // highlight color
c[i] = brd.create('curve',path,
{name:info[path[2]][2],
fillColor:col,
strokeColor:scol,strokeWidth:sw,highlightFillColor:hcol,fillOpacity:0.4});
JXG.addEvent(c[i].rendNode, 'mouseover', (function(g){ return function(){g.highlight(); document.getElementById('landkreis').innerHTML=g.name;};})(c[i]), c[i]);
JXG.addEvent(c[i].rendNode, 'mouseout', (function(g){ return function(){g.noHighlight();};})(c[i]), c[i]);
c[i].hasPoint = function(){return false;};
};
brd.suspendUpdate();
JXG.timedChunk(paths, createCurve, null, final);