Documentation Tutorial: Picking

Adding picking

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 picking</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

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

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

//mode prod
        function start() {
                    var cvs = document.getElementById("2d");
                    var ctx = cvs.getContext("2d");
                    ctx.shadowColor = '#000';
                    ctx.shadowOffsetX = 1;
                    ctx.shadowOffsetY = 1;
                    ctx.shadowBlur = 2;
                    ctx.fillStyle = '#fff';
                    ctx.font = 'bold 20px sans-serif';
                    ctx.textBaseline = 'top';
                    ctx.fillText('HTML5 is cool!', 1, 1);

var mizar = new Mizar({
                        canvas: "MizarCanvas",
                        configuration : {
                            attributionHandler : {
                                element : "myGlobeAttributions"
                            }
                        },
                        planetContext: {
                            coordinateSystem: {
                                geoideName : Mizar.CRS.WGS84
                            }
                        }
                    });
            
                    var wmsID = mizar.addLayer({
                        type: Mizar.LAYER.WMS,
                        name: "Blue Marble",
                        baseUrl: "http://demonstrator.telespazio.com/wmspub",
                        layers: "BlueMarble",
                        attribution : "My attribution"

});

mizar.setBackgroundLayerByID(wmsID);

var style = mizar.UtilityFactory.create(Mizar.UTILITY.CreateStyle);
                    style.iconUrl = null;
                    style.label = "POI";
                    style.pointMaxSize = 4000;

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

var canvas = document.getElementById("MizarCanvas");
                    var poi;
                    canvas.onclick = function (event) {
                        if (poi)
                            layer.removeFeature(poi);

var pos = mizar.getRenderContext().getXYRelativeToCanvas(event);
                        var lonlat = mizar.getActivatedContext().getLonLatFromPixel(pos[0], pos[1]);

if (lonlat) {
                            poi = {
                                geometry: {
                                    type: "Point",
                                    coordinates: lonlat
                                }
                            };
                            layer.addFeature(poi);
                        }
                    };

}//);

</script>

</head>

Introduction

Code in Mizar

Search results