ig Map Geoocation

Infragistics jQuery Map Geolocation by Mihail Mateev

by B L Praveen

HTML

<script src="http://cdn-na.infragistics.com/jquery/20121/2023/js/infragistics.loader.js"></script>


     <div style="float: left; top: 0px; height: 500px; width: 700px;">
        <div id="map" style="float: left; top: 0px; height: 500px; width: 700px;" />
        <div style="top: 600px;">
        <button id="btnSubmit" style="width: 130px;" type="button" name="Geolocation"  value='Geolocation'>Get Geolocation</button>
        <button id="btnZoomToExtend" style="width: 130px;" type="button" name="ZoomToExtend"  value='Geolocation'>Zoom To Extend</button>
        <button id="btnClearMarkers" style="width: 130px;" type="button" name="ClearMarkers"  value='Geolocation'>Clear Markers</button>
        </div>           
    </div>

JavaScript

$.ig.loader({
    scriptPath: "http://cdn-na.infragistics.com/jquery/20121/2023/js/",
    cssPath: "http://cdn-na.infragistics.com/jquery/20121/2023/css/",
    resources: "igMap"
});

$.ig.loader(function() {

    function ShowGeolocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
        else {
            alert("Geolocation is not supported by this browser.");
        }
    }

    function ZoomToExtend() {

        $("#map").igMap("option", "windowRect", {
            left: 0.27,
            top: 0.20,
            width: 0.5,
            height: 0.5
        });

    }

    function ClearMarkers() {
        $("#map").igMap("option", "series", [{
            name: "Countries",
            markerTemplate: null}]);
    }

    var name = 'location';

    function showPosition(position) {



        var data = [{
            Name: name,
            Latitude: position.coords.latitude,
            Longitude: position.coords.longitude}];

        $("#map").igMap({
            series: [{
                name: "Countries",
                type: "geographicSymbol",
                longitudeMemberPath: "Longitude",
                latitudeMemberPath: "Latitude",
/*
                    The provided object should have properties called render and optionally measure.
                    These are functions which will be called that will be called to handle the user specified custom rendering.
                    */
                markerTemplate: {
                    render: function(renderInfo) {
                        var ctx = renderInfo.context; //2d canvas context
                        var x = renderInfo.xPosition;
                        var y = renderInfo.yPosition;

                        if (renderInfo.isHitTestRender) {
                            //  This is called for tooltip hit test only
                            //  Rough marker rectangle size calculation
                         ...