Difference between revisions of "Map with German administrative districts"

From JSXGraph Wiki
Jump to navigationJump to search
(works in 0.98)
 
(One intermediate revision 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.4,1.0),  // fill color
+
         col = JXG.hsv2rgb(360/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 24: Line 24:
 
         fillColor:col,
 
         fillColor:col,
 
         strokeColor:scol,strokeWidth:sw,highlightFillColor:hcol,fillOpacity:0.3});
 
         strokeColor:scol,strokeWidth:sw,highlightFillColor:hcol,fillOpacity:0.3});
     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(){c[i].nohcol = c[i].visProp.fillcolor; c[i].setAttribute({fillColor: 'yellow'});}, 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(){c[i].setAttribute({fillColor: c[i].nohcol});}, c[i]);
 
     c[i].hasPoint = function(){return false;};
 
     c[i].hasPoint = function(){return false;};
 
};
 
};
Line 50: Line 50:
 
function createCurve(path) {
 
function createCurve(path) {
 
     var i = c.length,
 
     var i = c.length,
         col = JXG.hsv2rgb(360/len*i,0.4,1.0),  // fill color
+
         col = JXG.hsv2rgb(360/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 58: Line 58:
 
         fillColor:col,
 
         fillColor:col,
 
         strokeColor:scol,strokeWidth:sw,highlightFillColor:hcol,fillOpacity:0.3});
 
         strokeColor:scol,strokeWidth:sw,highlightFillColor:hcol,fillOpacity:0.3});
     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(){c[i].nohcol = c[i].visProp.fillcolor; c[i].setAttribute({fillColor: 'yellow'});}, 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(){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 14:16, 7 August 2013

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