Documentation Tutorial: Projection

Projection complex

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>Projection complex</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
     <link rel="stylesheet" href="resources/Mizar.css">

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

// mode dev
        //require(['Mizar'], function (Mizar) {

//mode prod
        function start() {

var mizar = new Mizar({
                        canvas: "MizarCanvas",
                        planetContext: {
                            coordinateSystem: {
                                geoideName: Mizar.CRS.WGS84,
                                projectionName: Mizar.PROJECTION.Mercator
                            },
                            navigation: {
                                inertia: true,
                                mouse: {
                                    zoomOnDblClick: true,
                                    zoomOptions : {
                                        distance : 1000000
                                    }
                                }
                            },
                            lighting: false,
                            tileErrorTreshold: 3
                        }
                    });

mizar.createStats({element: 'fps', verbose: false});
            
                    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: 1
                    });

mizar.setBackgroundLayer("Blue Marble");
                    mizar.setBaseElevation("earthElevation");

var wireFrameID = mizar.addLayer({
                        type: Mizar.LAYER.TileWireframe,
                        outline: true,
                        visible: true
                    });
                    var wireframeLayer = mizar.getLayerByID(wireFrameID);

var cvs = document.getElementById("MizarCanvas");

var styleN = mizar.UtilityFactory.create(Mizar.UTILITY.CreateStyle, {
                        label: "NORTH",
                        pointMaxSize: 4000
                    });

var styleS = mizar.UtilityFactory.create(Mizar.UTILITY.CreateStyle, {
                        label: "SOUTH",
                        pointMaxSize: 4000
                    });

var layerID = mizar.addLayer({
                        type: Mizar.LAYER.GeoJSON,
                        visible: true
                    });
                    var layer = mizar.getLayerByID(layerID);

layer.addFeature({
                        geometry: {
                            type: "Point",
                            coordinates: [0, 45]
                        },
                        properties: {
                            style: styleN
                        }
                    });
                    layer.addFeature({
                        geometry: {
                            type: "Point",
                            coordinates: [0, -45]
                        },
                        properties: {
                            style: styleS
                        }
                    });
                    var featureCollection = null;

var afterLoadVector = function (data) {
                        featureCollection = data;
                    };

// Add some vector layer
                    var layerID2 = mizar.addLayer({
                        type: Mizar.LAYER.GeoJSON,
                        style : mizar.UtilityFactory.create(Mizar.UTILITY.CreateStyle, {
                            fillColor: [1., 1., 1., 1.],
                            strokeColor: [0.3, 0.3, 0.3, 1.],
                            fill: false
                        }),
                        url: "data/land.json",
                        callback: afterLoadVector,
                        visible: true
                    });

var vectorLayer = mizar.getLayerByID(layerID2);

// Test to check inverse transformation for each coordinate system
                    cvs.onclick = function (event) {
                        var lonlat = mizar.getActivatedContext().getLonLatFromPixel(event.layerX, event.layerY);
                        if (lonlat) {
                            var pixel = mizar.getActivatedContext().getPixelFromLonLat(lonlat[0], lonlat[1]);
                        }
                    };

$("#selectProjection").change(function () {
                        // Reset vector layer features
                        vectorLayer.removeAllFeatures();

var coordinateSystem = $(this).val();
                        mizar.setCrs({
                            geoideName: Mizar.CRS.WGS84,
                            projectionName: coordinateSystem
                        });

vectorLayer.addFeatureCollection(featureCollection);
                    });

$('#wireframeVisibility').change(function () {
                        var isOn = $(this).is(':checked');
                        wireframeLayer.setVisible(isOn);
                    });

$('#vectorVisibility').change(function () {
                        var isOn = $(this).is(':checked');
                        vectorLayer.setVisible(isOn);
                    });
                }//);

</script>

</head>

<body style="margin: 0; padding: 0;" onload="start()">
<div style="vertical-align: top; text-align: center; margin: 10px; display: inline-block; width: 20%; font-size: xx-small">
    <h2>Select coordinate system: </h2>
    <select id="selectProjection">
        <option>Mercator</option>
        <option>Plate</option>
        <option>August</option>
        <option>Mollweide</option>
        <option>Aitoff</option>
        <option>Azimuth</option>
    </select>
    <br/>
    <div style="margin-top: 5px; text-align: left;">
        <label>
            <input id="wireframeVisibility" type="checkbox" checked="checked"/>Show wireframe
        </label>
        <label>
            <input id="vectorVisibility" type="checkbox" checked="checked"/>Show vector
        </label>
    </div>
</div>
<div style="display: inline-block; margin: 20px;">
    <canvas id="MizarCanvas" style="border: none; margin: 0; padding: 0;" width="300" height="200"></canvas>
    <div id="fps"></div>
</div>
<div id="posTracker"></div>
</body>
</html>

Introduction

Code in Mizar

Search results