Map with German administrative districts: Difference between revisions

From JSXGraph Wiki
(New page: This map shows the German administrative districts (counties). <html> <script type="text/javascript" src="/ajax/krs.js"></script> <div id="landkreis"> </div> </html> <jsxgraph width=...)
 
(works in 0.98)
 
(16 intermediate revisions by one other user not shown)
Line 5: Line 5:
</html>
</html>


<jsxgraph width="600"" height="800">
<jsxgraph width="600" height="800">
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:bbox, keepaspectratio:true}),
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:bbox, keepaspectratio:true}),
     c = [];
     c = [],
    len = paths.length;


function final() {
function final() {
Line 15: Line 16:
function createCurve(path) {
function createCurve(path) {
     var i = c.length,
     var i = c.length,
         col = JXG.hsv2rgb(360/len*i,0.4,0.9),  // fill color
         col = JXG.hsv2rgb(360/len*i,0.7,1.0),  // fill color
         scol = '#999999',                      // stroke color
         scol = '#333333',                      // stroke color
         sw = 1,                                // stroke width
         sw = 1,                                // stroke width
         hcol = '#ffff00';                      // highlight color
         hcol = '#ffff00';                      // highlight color
Line 22: Line 23:
         {name:info[path[2]][2],  
         {name:info[path[2]][2],  
         fillColor:col,
         fillColor:col,
         strokeColor:scol,strokeWidth:sw,highlightFillColor:hcol,fillOpacity:0.4});
         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;};
};
};


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 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,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;};
};
};
plotMap();


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

Latest revision as of 13: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);
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Map_with_German_administrative_districts&oldid=6163"