HTML 5 Geolocation with Infragistics jQuery Map

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 conventinal desktop browsers) to retrieve geographic positioning information with JavaScript. Now it looks like the modern browsers are adopting this useful functionality:

  • 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, Andoid 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:

   1: if (navigator.geolocation) {

   2:                 navigator.geolocation.getCurrentPosition(showPosition);

   3:             }

   4: //function to maintain current position

   5: function showPosition(position) {

   6:  

   7:     //the position opject contains coords option the location coordinates

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

   9: }

 

Geolocation with igMap live demo

For this demo you do not need to install anything. Sample is placed in JSFIDDLE (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: <script src="http://cdn-na.infragistics.com/jquery/20121/2023/js/infragistics.loader.js">

   2: </script>

   3:  

   4: <script type="text/javascript">

   5: $.ig.loader({

   6:     scriptPath: "http://cdn-na.infragistics.com/jquery/20121/2023/js/",

   7:     cssPath: "http://cdn-na.infragistics.com/jquery/20121/2023/css/",

   8:     resources: "igMap"

   9: });

  10: </script>

 

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

Infragistics jQuery Map in jsFiddle

 

  • Create an igMap instance
   1:  

   2:         $("#map").igMap({

   3:             width: "700px",

   4:             height: "500px",

   5:             panModifier: "control",

   6:             horizontalZoomable: true,

   7:             verticalZoomable: true,

   8:             windowResponse: "immediate",

   9:             overviewPlusDetailPaneVisibility: "visible",

  10:             seriesMouseLeftButtonUp: function (ui, args) {

  11:                 var tets = args;

  12:             }

  13:         });

 

  • 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.

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

   2:                   {

   3:                       left: 0.27,

   4:                       top: 0.20,

   5:                       width: 0.5,

   6:                       height: 0.5

   7:                   }

   8:               );

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

Infragistics jQuery Map

 

  • Display the current location

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

   1: function showPosition(position) {

   2:  

   3:  

   4:  

   5:     var data = [{

   6:         Name: name,

   7:         Latitude: position.coords.latitude,

   8:         Longitude: position.coords.longitude}];

   9:  

  10:     $("#map").igMap({

  11:         series: [{

  12:             name: "Countries",

  13:             type: "geographicSymbol",

  14:             longitudeMemberPath: "Longitude",

  15:             latitudeMemberPath: "Latitude",

  16: /*

  17:                 The provided object should have properties called render and optionally measure.

  18:                 These are functions which will be called that will be called to handle the user specified custom rendering.

  19:                 */

  20:             markerTemplate: {

  21:                 render: function(renderInfo) {

  22:                     var ctx = renderInfo.context; //2d canvas context

  23:                     var x = renderInfo.xPosition;

  24:                     var y = renderInfo.yPosition;

  25:  

  26:                     if (renderInfo.isHitTestRender) {

  27:                         //  This is called for tooltip hit test only

  28:                         //  Rough marker rectangle size calculation

  29:                         ctx.fillStyle = "yellow";

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

  31:                     } else {

  32:                         //actual marker drawing is here:

  33:                         var markerData = renderInfo.data;

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

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

  36:                         ctx.font = '10pt Segoe UI';

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

  38:  

  39:                         //Move the path point to the desired coordinates:

  40:                         ctx.moveTo(x, y);

  41:                         //Draw lines:

  42:                         ctx.beginPath();

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

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

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

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

  47:                         ctx.lineTo(x, y);

  48:                         //finish the shape

  49:                         ctx.closePath();

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

  51:                         ctx.fill();

  52:                         ctx.lineWidth = 0.5;

  53:                         ctx.strokeStyle = "#185170";

  54:                         ctx.stroke();

  55:                         //add a point at the start

  56:                         ctx.beginPath();

  57:                         ctx.fillStyle = "black";

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

  59:                         ctx.fill();

  60:  

  61:                         //  Draw text

  62:                         ctx.textBaseline = "top";

  63:                         ctx.fillStyle = "black";

  64:                         ctx.textAlign = 'center';

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

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

  67:                     }

  68:                 }

  69:             },

  70:             dataSource: data}]

  71:     });

  72:  

  73:     var geo = {

  74:         height: 0.05,

  75:         left: position.coords.longitude - 0.035,

  76:         top: position.coords.latitude - 0.025,

  77:         width: 0.07

  78:     };

  79:  

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

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

  82:  

  83: }

 

The function creates a new windowRect around the specified location.

IgMapGeolocation_Pic03[1]

  • 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 rectangel.

   1: function ZoomToExtend() {

   2:  

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

   4:          left: 0.27,

   5:          top: 0.20,

   6:          width: 0.5,

   7:          height: 0.5

   8:      });

   9:  

  10:  }

 

Now map has again the initial extend

igMap Zoom to Extend

  • Remove the location symbol

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

   1: function ClearMarkers() {

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

   3:         name: "Countries",

   4:         markerTemplate: null}]);

   5: }

 

Now markers are not visible on the map.

Remove igMap series

igMap Geoocation fiddle

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 !

Advertisement

About Mihail Mateev

am a Microsoft Regional Director currently living in Sofia, Bulgaria. My interests range from technology to entrepreneurship. I am also interested in programming, web development, and education. Technical Consultant, Community enthusiast, PASS Regional Mentor for Central Eastern Europe, chapter lead, Microsoft MVP – Microsoft Azure. Organizer of SQLSaturday, Azure Bootcamp, IoT and JavaScript conferences. My experience is in various areas related to Microsoft technologies, including Windows Platform, ASP.Net MVC, MS SQL Server and Microsoft Azure. I have a PhD in cloud computing and am a university lecturer on Smart Homes and Smart Energy IoT Solutions
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s