Map with German administrative districts: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
(works in 0.98) |
||
(12 intermediate revisions by one other user not shown) | |||
Line 16: | Line 16: | ||
function createCurve(path) { | function createCurve(path) { | ||
var i = c.length, | var i = c.length, | ||
col = JXG.hsv2rgb(360/len*i,0.7,0 | col = JXG.hsv2rgb(360/len*i,0.7,1.0), // fill color | ||
scol = '# | scol = '#333333', // stroke color | ||
sw = 1, // stroke width | sw = 1, // stroke width | ||
hcol = '#ffff00'; // highlight color | hcol = '#ffff00'; // highlight color | ||
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.3}); | ||
JXG.addEvent(c[i].rendNode, 'mouseover', | JXG.addEvent(c[i].rendNode, 'mouseover', function(){c[i].nohcol = c[i].visProp.fillcolor; c[i].setAttribute({fillColor: 'yellow'});}, c[i]); | ||
JXG.addEvent(c[i].rendNode, 'mouseout', | JXG.addEvent(c[i].rendNode, 'mouseout', function(){c[i].setAttribute({fillColor: c[i].nohcol});}, c[i]); | ||
c[i].hasPoint = function(){return false;}; | c[i].hasPoint = function(){return false;}; | ||
}; | }; | ||
Line 34: | Line 34: | ||
</jsxgraph> | </jsxgraph> | ||
© Bundesamt für Kartographie und Geodäsie, Frankfurt am Main, 2009 | © Bundesamt für Kartographie und Geodäsie, Frankfurt am Main, 2009 | ||
Vervielfältigung, Verbreitung und öffentliche Zugänglichmachung, auch auszugsweise, mit Quellenangabe gestattet. | Vervielfältigung, Verbreitung und öffentliche Zugänglichmachung, auch auszugsweise, mit Quellenangabe gestattet. | ||
===The JavaScript code=== | ===The JavaScript code=== | ||
The data has been downloaded in ArcView/shape format from [http://www.geodatenzentrum.de/geodaten/gdz_rahmen.gdz_div?gdz_spr=deu&gdz_akt_zeile=5&gdz_anz_zeile=4&gdz_user_id=0 Bundesamt für Kartographie und Geodäsie]. Then, using [http://shapelib.maptools.org/ shapelib] and [http://ftp.intevation.de/users/bh/pyshapelib/ pyshapelib] the file was converted to JavaScript, see [http://jsxgraph.uni-bayreuth.de/ajax/krs.js]. | The data has been downloaded in ArcView/shape format from [http://www.geodatenzentrum.de/geodaten/gdz_rahmen.gdz_div?gdz_spr=deu&gdz_akt_zeile=5&gdz_anz_zeile=4&gdz_user_id=0 Bundesamt für Kartographie und Geodäsie]. Then, using [http://shapelib.maptools.org/ shapelib] and [http://ftp.intevation.de/users/bh/pyshapelib/ pyshapelib] the file was converted to JavaScript, see [http://jsxgraph.uni-bayreuth.de/ajax/krs.js krs.js]. | ||
The shape data from this file is displayed using the following JSXGraph code. | The shape data from this file is displayed using the following JSXGraph code. | ||
<source lang="javascript"> | <source lang="javascript"> | ||
Line 49: | Line 50: | ||
function createCurve(path) { | function createCurve(path) { | ||
var i = c.length, | var i = c.length, | ||
col = JXG.hsv2rgb(360/len*i,0.7,0 | col = JXG.hsv2rgb(360/len*i,0.7,1.0), // fill color | ||
scol = '# | scol = '#333333', // stroke color | ||
sw = 1, // stroke width | sw = 1, // stroke width | ||
hcol = '#ffff00'; // highlight color | hcol = '#ffff00'; // highlight color | ||
Line 56: | Line 57: | ||
{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.3}); | ||
JXG.addEvent(c[i].rendNode, 'mouseover', | JXG.addEvent(c[i].rendNode, 'mouseover', function(){c[i].nohcol = c[i].visProp.fillcolor; c[i].setAttribute({fillColor: 'yellow'});}, c[i]); | ||
JXG.addEvent(c[i].rendNode, 'mouseout', | JXG.addEvent(c[i].rendNode, 'mouseout', function(){c[i].setAttribute({fillColor: c[i].nohcol});}, c[i]); | ||
c[i].hasPoint = function(){return false;}; | c[i].hasPoint = function(){return false;}; | ||
}; | }; |
Latest revision as of 13:16, 7 August 2013
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 krs.js. 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,1.0), // fill color
scol = '#333333', // 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.3});
JXG.addEvent(c[i].rendNode, 'mouseover', function(){c[i].nohcol = c[i].visProp.fillcolor; c[i].setAttribute({fillColor: 'yellow'});}, c[i]);
JXG.addEvent(c[i].rendNode, 'mouseout', function(){c[i].setAttribute({fillColor: c[i].nohcol});}, c[i]);
c[i].hasPoint = function(){return false;};
};
brd.suspendUpdate();
JXG.timedChunk(paths, createCurve, null, final);