function getMapGeoStatic(){
    var req = new XMLHttpRequest();
    req.open("GET", jsonMapBorderURL, true);

    req.onreadystatechange = function(){
        if ( req.readyState == 4) {
            if ( req.status >= 200 && req.status < 300 ||req.status == 304 ) {      
                var returnData = req.responseText;
                console.log('Datentransfer -Geo Karte- erfolgreich');
                JsonMapBorder = JSON.parse(returnData);
                drawMapBorder();
        
            } else {
                console.log("Fehler; request.status = " + req.status);
            }
            req = null;
        };
    }
    req.send();
}
function getMapGeoStatic2(){
var req = new XMLHttpRequest();
req.open("GET", jsonMapBorderURL2, true);

req.onreadystatechange = function(){
    if ( req.readyState == 4) {
        if ( req.status >= 200 && req.status < 300 ||req.status == 304 ) {      
            var returnData = req.responseText;
            console.log('Datentransfer -Geo Karte- erfolgreich');
            JsonMapBorder2 = JSON.parse(returnData);
            drawMapBorder2();
    
        } else {
            console.log("Fehler; request.status = " + req.status);
        }
        req = null;
    };
}
req.send();
}

function drawMapBorder() {
        borderpoints = [];
        countPointsMapBorder = JsonMapBorder.coordinates.length;
        //console.log("Point Border Count: "+countPointsMapBorder);
        
        //var cableLayer = new Konva.Layer();
        // Namen schreiben    
        
        // Stationen zeichnen
        for(i=0;i<countPointsMapBorder;i++) { 
           // console.log("Coordinates: "+JsonMapBorder.coordinates[i]);
            var BorderXY = JsonMapBorder.coordinates[i].toString();
            var LineParts = BorderXY.split(",");
            LineParts[0] = (parseFloat(LineParts[0]))/10;
            LineParts[1] = (parseFloat(LineParts[1]))/10;

           // console.log("X: "+LineParts[0]+" Y: "+LineParts[1]);

            var xLineTemp = Math.round(parseInt(((LineParts[0])/skalierung)-minX)/displayFactor);
            var yLineTemp = Math.round(parseInt((maxY-(LineParts[1])/skalierung))/displayFactor);

           // console.log("X: "+parseInt(xLineTemp)+" Y: "+parseInt(yLineTemp));

            borderpoints.push(parseInt(xLineTemp));
            borderpoints.push(parseInt(yLineTemp));                                                        
        }

         //console.log(borderpoints);
        var border = new Konva.Line({
            points: borderpoints,
            stroke: 'grey',
            strokeWidth: 1,
            lineJoin: 'square',
            tension: 0,
            lineCap: 'square',
            closed: true,
            fill: '#fbf5e0',
          });
        layer.add(border);

        stage.add(layer);
}

function drawMapBorder2() {
    borderpoints2 = [];
    countPointsMapBorder = JsonMapBorder2.coordinates.length;
    //console.log("Point Border Count: "+countPointsMapBorder);
    
    //var cableLayer = new Konva.Layer();
    // Namen schreiben    
    
    // Stationen zeichnen
    for(i=0;i<countPointsMapBorder;i++) { 
       // console.log("Coordinates: "+JsonMapBorder.coordinates[i]);
        var BorderXY2 = JsonMapBorder2.coordinates[i].toString();
        var LineParts2 = BorderXY2.split(",");
        LineParts2[0] = (parseFloat(LineParts2[0]))/10;
        LineParts2[1] = (parseFloat(LineParts2[1]))/10;

       // console.log("X: "+LineParts[0]+" Y: "+LineParts[1]);

        var xLineTemp2 = Math.round(parseInt(((LineParts2[0])/skalierung)-minX)/displayFactor);
        var yLineTemp2 = Math.round(parseInt((maxY-(LineParts2[1])/skalierung))/displayFactor);

       // console.log("X: "+parseInt(xLineTemp)+" Y: "+parseInt(yLineTemp));

        borderpoints2.push(parseInt(xLineTemp2));
        borderpoints2.push(parseInt(yLineTemp2));                                                        
    }

     //console.log(borderpoints);
    var border2 = new Konva.Line({
        points: borderpoints2,
        //stroke: 'grey',
        //strokeWidth: 1,
        lineJoin: 'square',
        tension: 0,
        lineCap: 'square',
        closed: true,
        fill: '#f3f0dd',
        offsetX: 20,
      });
    layer.add(border2);

    stage.add(layer);
}

getMapGeoStatic2();
getMapGeoStatic()