Mihail Mateev » HTML 5 Geolocation with Infragistics jQuery Map

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 conventional 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, 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:

 1: if (navigator.geolocation) {
 2:                 navigator.geolocation.getCurrentPosition(showPosition);
 3:             }
 4: //function to maintain current position
 5: function showPosition(position) {
 6:  
 7:     //the position object 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 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:
// >
   2:
// ]]>


 3:  
 4:
// >
   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:
// ]]>

 

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

 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

 

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 !

Tags / , , , , , , , , , , , , , , , , ,

Add a Comment

Be the first one to add a comment. Please Login or Register to add comment.