Map with German administrative districts: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 29: Line 29:
};
};


function plotMap() {
brd.suspendUpdate();
     brd.suspendUpdate();
JXG.timedChunk(paths, createCurve, null, final);
     JXG.timedChunk(paths, createCurve, null, final);
 
</jsxgraph>
© Bundesamt für Kartographie und Geodäsie, Frankfurt am Main, 2009
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 [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 shape data from this file is displayed using the following JSXGraph code.
<source lang="javascript">
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;};
};
};
plotMap();


</jsxgraph>
brd.suspendUpdate();
JXG.timedChunk(paths, createCurve, null, final);
</source>
 
[[Category:Examples]]
[[Category:Charts]]

Revision as of 17:24, 14 December 2009

This map shows the German administrative districts (counties).

 

© Bundesamt für Kartographie und Geodäsie, Frankfurt am Main, 2009 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);