Documentation Tutorial: Drawing selection

Adding drawing selection

Introduction

TODO

Code in Mizar

The first step is to look to the Getting Started with Earth to create the Earth.

TODO

<!doctype html>
<html>

<head>
    <title>Adding drawing selection</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="../Mizar.min.js"></script>

//mode prod
        function start() {
                    // Create Mizar
                    var mizar = new Mizar({
                        canvas: "GlobWebCanvas",
                        planetContext: {
                            coordinateSystem: {
                                geoideName: Mizar.CRS.WGS84
                            }
                        }
                    });
            
                    mizar.addLayer({
                        type: Mizar.LAYER.WMS,
                        name: "Blue Marble",
                        baseUrl: "http://demonstrator.telespazio.com/wmspub",
                        layers: "BlueMarble"
                    });

mizar.addLayer({
                        type: Mizar.LAYER.WCSElevation,
                        name: "earthElevation",
                        baseUrl: "http://demonstrator.telespazio.com/wcspub",
                        coverage: "GTOPO",
                        version: "1.0.0",
                        scale: 2
                    });
                    mizar.setBackgroundLayer("Blue Marble");
                    mizar.setBaseElevation("earthElevation");
                    var vectorLayerID = mizar.addLayer({
                        type: Mizar.LAYER.GeoJSON,
                        visible: true
                    });

var vectorLayer = mizar.getLayerByID(vectorLayerID);

var startPoint, endPoint;
                    var started = false;
                    var activated = false;

var feature = {
                        id: '0',
                        type: 'Feature',
                        geometry: {
                            type: 'Polygon',
                            coordinates: []
                        }
                    };

// Update the feature used to represent the rectangle
                    function updateFeature(pt1, pt2) {
                        var minX = Math.min(pt1[0], pt2[0]);
                        var maxX = Math.max(pt1[0], pt2[0]);
                        var minY = Math.min(pt1[1], pt2[1]);
                        var maxY = Math.max(pt1[1], pt2[1]);

feature.bbox = [minX, minY, maxX, maxY];
                        feature.geometry.coordinates = [[[minX, minY],
                            [maxX, minY],
                            [maxX, maxY],
                            [minX, maxY],
                            [minX, minY]
                        ]];
                        vectorLayer.removeFeature(feature);
                        vectorLayer.addFeature(feature);
                    }

// Called when left mouse button is pressed : start drawing the rectangle
                    function onMouseDown(event) {
                        if (activated && event.button == 0) {
                            startPoint = mizar.getActivatedContext().getLonLatFromPixel(event.pageX, event.pageY);
                            updateFeature(startPoint, startPoint);
                            started = true;
                        }
                    }

// Called when mouse is moved  : update the rectangle
                    function onMouseMove(event) {
                        if (started && event.button == 0) {
                            var endPoint = mizar.getActivatedContext().getLonLatFromPixel(event.pageX, event.pageY);
                            updateFeature(startPoint, endPoint);
                        }
                    }

// Called when left mouse button is release  : end drawing the rectangle
                    function onMouseUp(event) {
                        if (started && event.button == 0) {
                            var endPoint = mizar.getActivatedContext().getLonLatFromPixel(event.pageX, event.pageY);
                            updateFeature(startPoint, endPoint);
                            started = false;
                        }
                    }

$('#GlobWebCanvas').mousedown(onMouseDown);
                    $('#GlobWebCanvas').mousemove(onMouseMove);
                    $('#GlobWebCanvas').mouseup(onMouseUp);

$('#GlobWebCanvas').keypress(function () {

if (activated) {
                            mizar.getActivatedContext().getNavigation().start();
                        }
                        else {
                            mizar.getActivatedContext().getNavigation().stop();
                            feature = {
                                id: '0',
                                type: 'Feature',
                                geometry: {
                                    type: 'Polygon',
                                    coordinates: []
                                }
                            };
                        }
                        activated = !activated;
                    });
                }//);

</script>

</head>

<body onload="start()">
Hit any key to switch between navigation mode / drawing mode.
<canvas id="GlobWebCanvas" style="border: none;" width="400" height="200"></canvas>
</body>
</html>

Introduction

Code in Mizar

Search results