• Save
HTML5勉強会#23_GeoHex
Upcoming SlideShare
Loading in...5
×
 

HTML5勉強会#23_GeoHex

on

  • 10,680 views

HTML5勉強会#23で使用した資料です。

HTML5勉強会#23で使用した資料です。

Statistics

Views

Total Views
10,680
Views on SlideShare
5,301
Embed Views
5,379

Actions

Likes
16
Downloads
0
Comments
0

13 Embeds 5,379

http://www.atmarkit.co.jp 4599
http://d.hatena.ne.jp 648
http://infout.tumblr.com 80
http://a0.twimg.com 13
http://webcache.googleusercontent.com 11
http://us-w1.rockmelt.com 8
https://twitter.com 7
http://aitcms-w.atmarkit.co.jp 5
http://preview.itmedia.co.jp 3
http://paper.li 2
http://twitter.com 1
http://flavors.me 1
http://safe.tumblr.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5勉強会#23_GeoHex HTML5勉強会#23_GeoHex Presentation Transcript

  • HTML5 2011.11.16 CC BY-SA(@sa2da)
  • @ sa 2 d a
  • O’ReillyW here2.0 2010 @sa2da
  • @IT 2011.8 @sa2da
  • ⽇日
  • ⽇日
  • http://www.w3.org/TR/ geolocation-API/
  • JavaScript ← Location
  • Safari#import <CoreLocation/CoreLocation.h> GeoLocationAPI coreLocationFramework OS
  • navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
  • navigator.geolocation.getCurrentPosition(successCallback, errorCallback);function errorCallback(error)function successCallback(position)
  • navigator.geolocation.getCurrentPosition(successCallback, errorCallback);function successCallback(position) coordinates position.coords.latitude: position.coords.longitude: position.coords.altitude: m position.coords.accuracy: m position.coords.altitudeAccuracy: m position.coords.heading: position.coords.speed: m/s ※HTML
  • navigator.geolocation.getCurrentPosition(successCallback, errorCallback);function errorCallback(error) error.code: 1 PERMISSION_DENIED 2 POSITION_UNAVAILABLE 3 TIMEOUT
  • navigator.geolocation.*****(); getCurrentPosition(); ! watchPosition(); ! clearWatch(); !watchPosition()watchID = navigator.geolocation.watchPosition(); 1navigator.geolocation.clearWatch(watchID);
  • ⽇日
  • <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>※V3API API OK
  • <div id="map_canvas"></div> ※ CSS html, body { height: 100%; } #map_canvas { height: 100%; }
  • <script type="text/javascript"> var map; function initialize() { var myOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById(map_canvas), myOptions); geolocation if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(successCallback, errorCallback); } function successCallback(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); map.setCenter(pos); } function errorCallback(){ } } google.maps.event.addDomListener(window, load, initialize);</script>
  • <script type="text/javascript"> var map; function initialize() { var myOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById(map_canvas), myOptions); // Try HTML5 geolocation if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var infowindow = new google.maps.InfoWindow({ map: map, position: pos, content: Location found using HTML5. }); map.setCenter(pos); successCallback }, function() { handleNoGeolocation(true); }); } else { errorCallback // Browser doesnt support Geolocation handleNoGeolocation(false); } } function handleNoGeolocation(errorFlag) { if (errorFlag) { var content = Error: The Geolocation service failed.; } else { var content = Error: Your browser doesnt support geolocation.; } var options = { map: map, position: new google.maps.LatLng(60, 105), content: content }; var infowindow = new google.maps.InfoWindow(options); map.setCenter(options.position); } google.maps.event.addDomListener(window, load, initialize);</script>
  • ⽇日
  • Safari#import <CoreLocation/CoreLocation.h> GeoLocationAPI coreLocationFramework OSGPS IP Wi-Fi
  • GPS m 1km IP 5kmWi-Fi 10m 300m 100m 5km
  • GPS GPS/Wi-Fi IPWi-Fi Wi-Fi GPS/Wi-Fi
  • position.coords.latitude:position.coords.longitude:position.coords.altitude: mposition.coords.accuracy: mposition.coords.altitudeAccuracy: mposition.coords.heading:position.coords.speed: m/s
  • position.coords.latitude:position.coords.longitude:position.coords.accuracy: m × accuracy accuracy
  • position.coords.latitude:position.coords.longitude:position.coords.altitude: mposition.coords.accuracy: mposition.coords.altitudeAccuracy: mposition.coords.heading:position.coords.speed: m/s GPS
  • Safari#import <CoreLocation/CoreLocation.h> GeoLocationAPI coreLocationFramework OSGPS IP Wi-Fi
  • × getCurrentPosition() watchPosition()
  • watchPosition()clearWatch()
  • ON/OFFGPS ON/OFFWi-Fi ON/OFFJavaScript ON/OFF
  • ON/OFFGPS ON/OFF ※iPhoneWi-Fi ON/OFFJavaScript ON/OFF
  • ⽇日
  • ⽇日
  • ⾒見見
  • SEO
  • http://miniapps.co.uk/geometer/
  • ⽇日
  • 35.76643787028846139.63561688507 10cm
  • 20(+/-)n byte 35.60970, 139.74828 pinpoint
  • Zone: quhNzoV
  • Level:0 Level:25
  • ⾕谷⾕谷
  • ⽤用 ⾮非 ⽤用 ⽤用 ⼆二⽤用 ⽤用 ⽤用 ⼈人⽤用 ⽤用 ⽣生⽤用 ⽤用⽤用 ⼊入⼊入 ⽤用
  • CC CC N BY-SA BY-SA N CC N BY-SA N⼆二 ⼆二 ⽤用 ⼀一 ⾃自 ⽣生 ⽬目
  • ⽇日
  • UNTIC.JP
  • UNT
  • http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
  • <script src="http://geohex.net/gm.js" type="text/javascript" content="text/html;charset=utf-8"></script>function initialize() { var gMapType = new google.maps.StyledMapType(stylez,    {name: "green"});  // Create a map object, and include the MapTypeId to add  // to the map type control.  var mapOptions = {    zoom: 11,    mapTypeControlOptions: {      mapTypeIds: [google.maps.MapTypeId.ROADMAP, green]    }  };  var map = new google.maps.Map(document.getElementById(map_canvas),    mapOptions);  //Associate the styled map with the MapTypeId and set it to display.  map.mapTypes.set(green, gMapType);  map.setMapTypeId(green);}
  • <style type="text/css"> @-webkit-keyframes mycolor {$ 0%$ { right:100%;$ $ }$ 100%$ { right:-45%;$ $ }$ } #gradation$ {$ position: absolute;$ top:0px;$ z-index:10; width: 50%;$ height:100%; -webkit-animation-name: mycolor; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), to(rgba(0,204,0,0.5)));$ }</style><div id="gradation"></div>
  • <script src="http://geohex.net/hex_v3.01_core.js" type="text/javascript" content="text/html;charset=utf-8"></script><script src="http://geohex.net/hex_v2_gmap3.js" type="text/javascript" content="text/html;charset=utf-8"></script>var zone = GeoHex.getZoneByLocation(position.coords.latitude,position.coords.longitude,level);var zone_center =new google.maps.LatLng(zone.lat , zone.lon );zone.drawHex(map, {linecolor:"#FF0000",fillcolor:"#FF0000",popinfo:1});map.setCenter(zone_center);
  • ⼩小
  • ⾦金金
  • ⽥田