Geolocation и интеграция в SharePoint 2010

Что такое Geolocation

Geolocation, ее поддержка, ее достоинства и перспективы в совокупности с новыми возможностями HTML5 – это одно из проявлений происходящей на наших глазах веб-эволюции.

Geolocation – это определение места нахождения пользователя и использование этой информации, например, для предложения этому же пользователю каких-то услуг на территории, близкой к указанным координатам.

Прежде чем приступить к обсуждению HTML5 и Geolocation, развеем распространенное заблуждение: Geolocation не входит в спецификацию HTML5! У нее имеется своя собственная независимая спецификация.

В спецификации W3C о геопозиционировани написано, что это “…API, который обеспечивает скриптовый доступ к информации о географическом местоположении, сопоставленной с хост-устройством”.

Но при этом спецификация Geolocation не указывает, как реализовывать поддержку геопозиционирования. В браузерах, которые поддерживают геолокацию, данные местоположения пользователя (то есть широта и долгота) определяются на основании комбинации данных о точках доступа wifi пользователя, IP-адреса пользователя, технологий GPS и т.д. Поэтому и точность информации о местоположении зависит от того, с помощью каких средств получена эта геолокационная информация. Иной раз невозможно получение точной информации, иной раз невозможно даже просто получить такую информацию.

Большинство браузеров в настольном варианте используют такой механизм получения данных о геопозиционировании: браузеры IE9 и выше, а также Google Chrome и Mozilla Firefox получают ваш IP или список ближних точек Wi-Fi, а затем передают эту информацию в Microsoft Location Service или Google Location Service. Мобильные браузеры в своем большинстве имеют чипы GPS, поэтому он может использоваться для геопозиционирования, но может быть задействована и комбинация сотовой триангуляции и GPS, но не исключается триангуляция по сотовым вышкам или поиск по IP-адресу.

Кроме того пользователь для просмотра геолокационных должен выразить согласие. При попытке веб-приложения определить местоположение, пользователь получает об этом нотификацию и в его власти как запретить, так и разрешить доступ к информации.

При получении позиции пользователя, можно на карте отобразить его местоположение, провести какие-то настройки своего веб-сайта или выполнить какие-либо другие действия.

Так как Geolocation представляет собой встроенный API, то, чтобы начать работу с ним, достаточно иметь лишь браузер, поддерживающий его.

Как работает геолокация

Использование Geolocation несложно. Глобальный объект navigator, благодаря Geolocation API, получил новое свойство navigator.geolocation. Это свойство и позволяет установить информацию о месте нахождения пользователя. API-интерфейс Geolocation возвращает объект Position, из которого извлекаются нужные географический данные.

У глобального объект navigator.geolocation предусмотрено три метода:

getCurrentPosition() – для однократного запроса определения позиции;
watchPosition() – для отслеживания динамики изменения позиции;
clearWatch() – оба предыдущих метода возвращают идентификатор watchID, помощью которого можно отменить их выполнение, выполнив clearWatch(watchId); .

Оба метода определения позиции – имеют по три аргумента:

первый, обязательный, это имя функции, которая будет вызвана при успешном срабатывании;
второй аргумент также это имя функции, которая будет вызвана для обработки ошибок;
а третий представляет массив с параметрами геопозиционирования, их три:

Метод getCurrentPosition может использоваться, например так:

navigator.geolocation.getCurrentPosition (
    function (position) {
      var coordinates = position.coords;
      console.log("Your latitude: " + coordinates.latitude +  " and longitude: " + coordinates.longitude +
            " (Accuracy of: " + coordinates.accuracy + " meters)");
    }, errorHandler, { maximumAge: 100, timeout: 6000,   enableHighAccuracy: true});

navigator.geolocation.getCurrentPosition (
	function (position) {
	  var coordinates = position.coords;
	  console.log("Your latitude: " + coordinates.latitude +  " and longitude: " + coordinates.longitude +
	        " (Accuracy of: " + coordinates.accuracy + " meters)");
	}, errorHandler, { maximumAge: 100, timeout: 6000,   enableHighAccuracy: true});

Объект Position, содержащий геолокационные данные

У объекта Position, возвращаемого Geolocation API, имеются два свойства: coords и timestamp.

Свойство timestamp содержит время создания данных геолокации. Свойство же coords имеет атрибуты:

coords.latitude – широта
coords.longitude – долгота
coords.altitude – высота
coords.accuracy – точность (в метрах) представленных оценок широты и долготы
coords.altitudeAccuracy -точность (в метрах) представленной оценки высоты
coords.heading – текущее направление движения пользовательского устройства
coords.speed – текущая скорость (в м/сек) устройства.

Одинаково реализованы во всех браузерах только лишь атрибуты coords.latitude, coords.longitude и coords.accuracy. Остальные – нет, но, являясь доступными для реализации в браузерах, могут стать весьма востребованными в будущем в мобильных браузерах.

Определение поддержки Geolocation и полизаполнение

При использовании в своем приложении геопозиционирования нужно продумать, поддерживает ли его браузер пользователя и те действия, какие будут использоваться для посетителей вашего сайта, браузеры которых не поддерживают это Geolocation API .

Определение поддержки геопозиционирования данным браузером можно осуществить либо прямой проверкой возможности браузера (“if (!!navigator.geolocation)”), либо использовать для этого библиотеку как, например, Modernizr.

Если браузер не поддерживает геопозиционирование, то возможны такие варианты дальнейших действий: либо корректное сокращение функциональности приложения либо полизаполнение (polyfill) через внешнюю библиотеку. Полизаполнение — это использование библиотеки, предоставляющей реализацию требуемой функциональности HTML5 на основе скриптов. Библиотека Modernizr имеет большой список кроссбраузерных полизаполнений. Если добавить такую библиотеку к своему приложению, то можно использовать нужную функциональность, словно она полностью поддерживается браузером.

Определение поддержки с помощью Modernizr:

Modernizr.load({
  test: Modernizr.geolocation,
  nope: '../js/geolocationShim.js',
  complete: function() {
  locate();
  }
});

Modernizr.load({
  test: Modernizr.geolocation,
  nope: '../js/geolocationShim.js',
  complete: function() {
  locate();
  }
});

Если геопозиционирование поддерживается управление перейдет к функции locate. В ином случае будет загружено полизаполнение Geolocation, а по окончании этой операции управление вновь перейдет к той же функции.

Функция Geolocation в SharePoint

Давайте посмотрим, как можно использовать функцию Geolocation HTML5 в SharePoint. Географическое положение позволяет найти местоположение ваших посетителей сайта, следовательно,можно собрать статистику по географии, создать соответствующий график или диаграмму. Возможна масса применений этого. Для того, чтобы использовать Geolocation в SharePoint вам нужен браузер IE 9 или Chrome, или Firefox. Они хорошо работают с SharePoint 2010, а также поддерживает другие стандарты, которые популярны и сегодня, в том числе и HTML5 технологии.

Что нужно сделать, для того, чтобы в SharePoint использовать возможности HTML5? Об этом можно прочитать в “Размышляйте и пробуйте: HTML5, CSS3 для SharePoint. часть 1″,Часть 2 , Часть 3, Часть 4.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    
<style>
         #mapCanvas {
  width: 600px;
  height: 400px;
  border: solid 1px black;
}
 </style>
 
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
 
 <script>
   var results;
   var map;
 
  window.onload = function() {
     results = document.getElementById("results");
     var myOptions = {
        zoom: 13, // Устанавливаем зум
        mapTypeId: google.maps.MapTypeId.ROADMAP  // Тип карты(карта дорог)
  };
  map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);
 
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition (geolocationSuccess, geolocationFailure );
    results.innerHTML = "The search has begun.";
  } else {
    results.innerHTML = "This browser doesn't support geolocation.";
  }
}
 
function geolocationSuccess(position) {
      var location = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
       map.setCenter(location);
 
      var infowindow = new google.maps.InfoWindow();
 
      infowindow.setContent("This is your location on the map!");
      infowindow.setPosition(location);
      infowindow.open(map);
 
 results.innerHTML = "You are on the map.";
}
 
function geolocationFailure(positionError) {
  if (positionError.code == 1) {
    results.innerHTML = 
     "You have decided not to share your location.";
  }
  else if (positionError.code == 2) {
    results.innerHTML =
     "The network is down or the positioning service can't be reached.";
  }
  else if (positionError.code == 3) {
    results.innerHTML =
     "The attempt timed out before it could get the location data.";
  }
  else {
    results.innerHTML =
     "Unknown error. Please try later.";
  }
}
 
</script>
</head>
 
<body>
<p id="results">Your location on the map!
<div id="mapCanvas"></div>
 
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    
<style>
	     #mapCanvas {
  width: 600px;
  height: 400px;
  border: solid 1px black;
}
 </style>

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

 <script>
   var results;
   var map;

  window.onload = function() {
     results = document.getElementById("results");
     var myOptions = {
        zoom: 13, // Устанавливаем зум
        mapTypeId: google.maps.MapTypeId.ROADMAP  // Тип карты(карта дорог)
  };
  map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition (geolocationSuccess, geolocationFailure );
    results.innerHTML = "The search has begun.";
  } else {
    results.innerHTML = "This browser doesn't support geolocation.";
  }
}

function geolocationSuccess(position) {
      var location = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
       map.setCenter(location);

      var infowindow = new google.maps.InfoWindow();

      infowindow.setContent("This is your location on the map!");
      infowindow.setPosition(location);
      infowindow.open(map);

 results.innerHTML = "You are on the map.";
}

function geolocationFailure(positionError) {
  if (positionError.code == 1) {
    results.innerHTML = 
     "You have decided not to share your location.";
  }
  else if (positionError.code == 2) {
    results.innerHTML =
     "The network is down or the positioning service can't be reached.";
  }
  else if (positionError.code == 3) {
    results.innerHTML =
     "The attempt timed out before it could get the location data.";
  }
  else {
    results.innerHTML =
     "Unknown error. Please try later.";
  }
}

</script>
</head>

<body>
<p id="results">Your location on the map!
<div id="mapCanvas"></div>

</body>

Пояснения.

Google Maps подключается скриптом между открывающим тегом head и закрывающим тегом /head;
Место для размещения карты – блок с id=”mapCanvas”;
Переменная myOptions содержит параметры отрисовки карты – масштаб и тип карты. Тип карты может иметь одно из 4-х значений: ROADMAP, HYBRID,SATELLITE, TERRAIN, будем использовать “дорожную” карту.
Определение местоположения пользователя на карте – функция geolocationSuccess(position)
В случае неудачи определения положения- функция geolocationFailure(positionError), в которой узнаем причину и выводим соответствующее сообщение

Данный код вставляем внутрь страницы SharePoint, также как делали в статье об интеграции тега VIDEO в SharePoint 2010 .

Лучший способ запуска кода HTML5 на странице SharePoint заключается в использовании content editor веб-части, с указанием URL страницы HTML5. Вам нужно разместить на странице в IIS в первую очередь. После настройки content editor веб-части, откройте страницу SharePoint в браузере.

Карта будет выглядеть на странице: