Map with German administrative districts: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 16: Line 16:
function createCurve(path) {
function createCurve(path) {
     var i = c.length,
     var i = c.length,
         col = JXG.hsv2rgb(180/len*i,0.7,1.0),  // fill color
         col = JXG.hsv2rgb(240/len*i,0.8,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:1.0});
         strokeColor:scol,strokeWidth:sw,highlightFillColor:hcol,fillOpacity:0.9});
     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).

 

© 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);