HTML5 Geolocation API

HTML5 Geolocation API

Никита Лукьянец

Департамент стратегических технологий [email protected]@nikiluk, Twitter

О чем пойдёт речь?

• К чему нам HTML5• Что значит “локально”• Use Cases• Пару простых примеров

семантика

l.storage, l.db

геолокация

геолокация

Что значит локально ?

Локация: Контекст и Релевантность

Что определяет местность ?

Что определяет местность?

Киев | Kyiv | Київ | Kiew

Что определяет местность?

Что определяет местность?

Широта: 50° 25' N

Долгота: 30° 30' E

C чего начать?

2 базовых метода:

1. IP

2. Триангуляция– GPS– Wi-Fi– Вышка

IP геолокация

Достоинства Недостатки

• Широкая доступность• Определение: server-side

• Точность на уровне города• SL <= 85%• Дорого

Поставщики:

MaxMind - http://www.maxmind.com

Quova - http://www.quova.com

IPligence - http://www.ipilgence.com

IP2Location - http://www.ip2location.com

Триангуляция

• WiFi ~ 20 м• GPS ~ 10 м• Вышка сотовой связи ~ 1 км

Короткий ответ:

Гибрид

W3C Geolocation API

navigator.geolocation.getCurrentPosition(function(pos){//show map at (pos.coords.latitude, pos.coords.longitude)});

Пример№1

http://lukianets.com/uxnext/helloworld.html

W3C Geolocation API

Latest Published Version: http://www.w3.org/TR/geolocation-API/

Latest Editor's Draft: http://dev.w3.org/geo/api/spec-source.html

Объекты Position и Coordinates

interface Position {readonly attribute Coordinates coords;readonly attribute DOMTimeStamp timestamp;};interface Coordinates {readonly attribute double latitude;readonly attribute double longitude;readonly attribute double altitude;readonly attribute double accuracy;readonly attribute double altitudeAccuracy;readonly attribute double heading;readonly attribute double speed;};

+ callback

function showMap(pos) {//show map at pos.coords.latitude, pos.coords.longitude}function showError(err) {alert(err.message + ‘, ’ + err.code);}navigator.geolocation.getCurrentPosition(showMap, showError);

Пример№2

http://lukianets.com/uxnext/bing.html

+ Объект ошибки локации

interface PositionError {const unsigned short UNKNOWN_ERROR = 0;const unsigned short PERMISSION_DENIED = 1;const unsigned short POSITION_UNAVAILABLE = 2;const unsigned short TIMEOUT = 3;readonly unsigned short code;readonly DOMString message;};

+ Опции

interface PositionOptions {attribute boolean enableHighAccuracy;attribute long timeout;attribute long maximumAge;};

Всё вместе

function showMap(pos) {//show map at pos.coords.latitude, pos.coords.longitude}function showError(err) {alert(err.message + ‘, ’ + err.code);}navigator.geolocation.getCurrentPosition(showMap, showError,{enableHighAccuracy:true, maximumAge:300000, timeout:0});

Слежение!

function moveMap(pos) {//update map to pos.coords.latitude, pos.coords.longitude}function showError(err) {alert(err.message + ‘, ’ + err.code);}// Track location with periodic updateswatchId = navigator.geolocation.watchPosition(moveMap, showError);function stopTracking() {navigator.geolocation.clearWatch(watchId);}

Резюме

• Геолокация = релевантность• Гибридное решение может быть дешевле• HTML5 => мобильный веб

Никита Лукьянец

[email protected]/nikiluk

?