HTML 5 Geolocation with Infragistics jQuery Map

[Infragistics] Mihail Mateev / Monday, June 25, 2012

To detect the location of a client device in the past, one would typically have to inspect the client IP address and make a reasonable guess as to the where that device was located. However, as part of the HTML5 efforts, the W3C has developed a set of APIs to effectively allow the client-side device (i.e. your iPhone 3G+, Android 2.0+ phones, or even your conventional desktop browsers) to retrieve geographic positioning information with JavaScript. Now it looks like the modern browsers are adopting this useful functionality:

CodeProject

Firefox 3.5+: Yes
Chrome 5+: Yes
iOS Safari: Yes
Opera 10.5+: Yes
Internet Explorer 9+: Yes

Probably you are curious how to use igMap in the most common scenarios using spatial data.

This post is the first of a series of articles about Infragistics jQuery Map. These blogs will help you start to use igMap and create with its help better visualization of spatial data in the WEB.

Geolocation

Geolocation is much more accurate for mobile devices with GPS, like iPhone, Android and Windows Phone based devices.

You could use the getCurrentPosition() method to get the user's position.
The example below is a simple Geolocation example returning the latitude and longitude of the user's position:

if (navigator.geolocation) {

                navigator.geolocation.getCurrentPosition(showPosition);

            }

//function to maintain current position

function showPosition(position) {

  

    //the position object contains coords option the location coordinates

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

}

Geolocation with igMap live demo

For this demo you do not need to install anything. Sample is placed in JS FIDDLE (http://jsfiddle.net ).
JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc. Using this approach, JavaScript developers can very easily isolate bugs. We aim to support all actively developed frameworks - it helps with testing compatibility.

The JavaScript files are available in a hosted environment on the Infragistics CDN. The code below shows how to use it.

1:

3:

4:

The sample in the JsFiddle is fully functional and you could change the source and see the results

Create an igMap instance

  

        $("#map").igMap({

            width: "700px",

            height: "500px",

            panModifier: "control",

            horizontalZoomable: true,

            verticalZoomable: true,

            windowResponse: "immediate",

            overviewPlusDetailPaneVisibility: "visible",

            seriesMouseLeftButtonUp: function (ui, args) {

                var tets = args;

            }

        });

Set a window rectangle

Set a window rectangle (windowRect option). Window rectangle presents the globe unfolding in relative coordinates from 0 to 1. You could show just a part from the whole unfolding.

$("#map").igMap("option", "windowRect",

                  {

                      left: 0.27,

                      top: 0.20,

                      width: 0.5,

                      height: 0.5

                  }

              );

The actual map show just the specified part of the map extend.

Display the current location

The code below demonstrates how to create a Geographic Symbol Series with a custom marker template

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

                        ctx.fillStyle = "yellow";

                        ctx.fillRect(x, y, renderInfo.availableWidth, renderInfo.availableHeight);

                    } else {

                        //actual marker drawing is here:

                        var markerData = renderInfo.data;

                        var name = markerData.item()["Name"];

                        //set font or measure will be for the default one

                        ctx.font = '10pt Segoe UI';

                        var textWidth = ctx.measureText(name).width;

  

                        //Move the path point to the desired coordinates:

                        ctx.moveTo(x, y);

                        //Draw lines:

                        ctx.beginPath();

                        ctx.lineTo(x - (textWidth / 2) - 5, y + 5);

                        ctx.lineTo(x - (textWidth / 2) - 5, y + 40); // 35width rect.

                        ctx.lineTo(x + (textWidth / 2) + 5, y + 40); // full textWidth line plus 5 margin

                        ctx.lineTo(x + (textWidth / 2) + 5, y + 5); // 35 up

                        ctx.lineTo(x, y);

                        //finish the shape

                        ctx.closePath();

                        ctx.fillStyle = "rgba(78,183,226,0.7)";

                        ctx.fill();

                        ctx.lineWidth = 0.5;

                        ctx.strokeStyle = "#185170";

                        ctx.stroke();

                        //add a point at the start

                        ctx.beginPath();

                        ctx.fillStyle = "black";

                        ctx.arc(x, y, 1.5, 0, 2 * Math.PI, true);

                        ctx.fill();

  

                        // Draw text

                        ctx.textBaseline = "top";

                        ctx.fillStyle = "black";

                        ctx.textAlign = 'center';

                        ctx.fillText("current", x, y + 8);

                        ctx.fillText(name, x, y + 20);

                    }

                }

            },

            dataSource: data}]

    });

  

    var geo = {

        height: 0.05,

        left: position.coords.longitude - 0.035,

        top: position.coords.latitude - 0.025,

        width: 0.07

    };

  

    var zoom = $("#map").igMap("getZoomFromGeographic", geo);

    $("#map").igMap("option", "windowRect", zoom);

  

}

The function creates a new windowRect around the specified location.

Zoom to the initial map extend

The code below is the same like the code for the igMap initialization. You just should set a window rectangle.

function ZoomToExtend() {

  

     $("#map").igMap("option", "windowRect", {

         left: 0.27,

         top: 0.20,

         width: 0.5,

         height: 0.5

     });

  

 }

Now map has again the initial extend

Remove the location symbol

To remove the location symbol you need to set null for the series markerTemplate option.

function ClearMarkers() {

    $("#map").igMap("option", "series", [{

        name: "Countries",

        markerTemplate: null}]);

}

Now markers are not visible on the map.

Now you just could use igMap Geolocation fiddle to play with this sample.

As always, you can follow us on Twitter: @mihailmateev and @Infragistics , all tweets with hashtag #infragistcs and stay in touch on Facebook, Google+ , LinkedIn and Infragistics Friends User Group !