画像をクリックしたときに詳細情報を表示するのに スライドするパネルを用いました。 最初はアコーディオンメニューというのかと思ってぐぐってたのですが、 そのあとスライド、メニューとか、サイド、スライドとか。。。 意外と簡単、hide/showを$().animateで実現できるのですね! 私だけの世界地図(3) 表示している情報は、取れたExif情報すべてです。 参照:jQuery でスライドしつつ隠れるサイドバー : dogmap.jp
Category: Google Maps
私だけの世界地図(2) ♥ 角丸
やっぱり角丸だよね♥ ヽ(*´∀`*)ノ ということでマーカーの写真を角丸にしました。 私だけの世界地図(2) phpにimagickモジュールが入っていないので、 別途サーバにインストールされていたImageMagickに対して execで渡して加工することに。 元画像はこちら。 1. 最小辺を100pxになるようにリサイズ。 [code] // リサイズ //convert -resize n% goreme-s.jpg resize.jpg [/code] ↓こうなります。 2. 中心から100×100をクロッピングし、角丸に。 [code] // クロッピング、角丸 //convert -size 100×100 -quality 100 -gravity center -crop 100×100+0+0 xc:none -fill white -draw "roundRectangle 0,0 100,100 10,10" resize.jpg -compose SrcIn -composite out.png [/code] ↓こうなります。 3. あらかじめ用意した背景の上に重ねてできあがり。 [code] // 枠線 //convert… Continue reading 私だけの世界地図(2) ♥ 角丸
私だけの世界地図(1)
長年ぼんやり夢みてきた「私だけの世界地図」の制作を開始しました。 地図が好きで特にGoogleMapsが好きで、写真が好きで、GPSモノが好きで、 旅行(トレッキング)が好きで、プログラマな私が作る私だけの世界地図です。 ヽ(*´∀`*)ノ まだゴールは見えていません。作りながら落としどころを考えていこうと思っています。 これ→私だけの世界地図(1) JSの勉強をしながらやってます。 現在の要件は、 ・GoogleMaps ・Geoタグ付きの写真 です。 まず第1フェーズは、「画像のExif情報から緯度経度を取ってきて、GooogleMaps上にプロット。」 までしました。いまのところのこだわりは、 ・DB使わない! ・サーバサーバサイドのプログラム使わなーい。 です。でも次のフェーズできっとサーバサイドのスクリプト使います。。。 こないだ行った御岳山と、トルコのカッパドキアの写真だけプロットしてあります。 旅先での記録でも書いたように、旅先って特に海外ではネット環境がひたすら悪いので、オンラインじゃ動かないのは×。 現状は、iPhoneで撮った写真をチビすな !!っていうExif情報を保持したままリサイズするソフトでリサイズしてFTPでアップした画像を使っています。 以下ポイント。 1. binaryajax.js, exif.jsでExif情報がとれます。 Nihilogic : Javascript EXIF Reader – jQuery Plugin jQuery EXIF data plugin – Nihilogic ここを参考にしました。 [code language=”Javascript”] $(‘.photo’).each(function() { var sel_id = $(this).attr(‘id’); var img = document.getElementById(sel_id); var exif = new… Continue reading 私だけの世界地図(1)
ブラウザの画面いっぱいにGoogleMapsが広がってると
うれしい。 画面いっぱいのGoogleMaps
日本測地系と世界測地系はこんだけちがう。
Yahooのローカルサーチをつかいました。 戻りのデータに日本測地系と世界測地系の緯度経度があって、 日本だから日本測地系だっ。て一瞬で決定したら、 なんだか思ったところにマーカーが立たない。。。 DatumTky97 日本測地系緯度経度: * Lat – 緯度(10進形式) * Lon – 経度(10進形式) DatumWgs84 世界測地系経度経度: * Lat – 緯度(10進形式) * Lon – 経度(10進形式) 参照:Yahoo!デベロッパーネットワーク – 地図 – ローカルサーチ WGS 84の経緯度と日本測地系のそれとでは、両者の値に東京付近の地表面では400m程度のずれが存在する。また、日本測地系にもとづく基準点網は古い測量成果の三角網によって設定されているため、測地系以外の要因による地図のゆがみが5~10m程度存在した。 これらのずれやゆがみは、日本国内向けに1:25,000の地形図を発行するには問題を生じないが、海図の国際利用や、精密な位置情報にもとづくGISデータの整備の障害になりつつあった。 参照:wikipedia – 日本の測地系:世界測地系と日本測地系 国会図書館の住所から引いた緯度経度に立ててみました。
OVER_QUERY_LIMIT出た。
というか、出しました。 というか、今まさに出しています。 The webpage has gone over the requests limit in too short a period of time. 参照:http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#GeocoderStatus キャッシュ実装前で、何度もリクエスト投げてすみません。 でも10件くらいなんです。 実際何秒以内に何件でOVER_QUERY_LIMITでるんだろう。
Google Mapの各ズームレベルごとのピクセル数と距離の関係
Google Maps API v3でCircleを書いてるんですが、 パラメータとして指定するradiusの単位はmなのですが、 ズームレベルに応じて大きさを変更したいとのことで 迷っていたら、日本のどこかに私を待っている人がいました。 ので紹介します。 本当にありがとうございます。 引用元: Google Mapの各ズームレベルごとのピクセル数と距離の関係 Lv0 : 10000km = 10,000,000m, 81pix, 123,456.79012 m/pix, 0.00001 pix/m Lv1 : 5000km = 5,000,000m, 81pix, 61,728.39506 m/pix, 0.00002 pix/m Lv2 : 2000km = 2,000,000m, 66pix, 30,303.03030 m/pix, 0.00003 pix/m Lv3 : 1000km = 1,000,000m, 66pix, 15,151.51515 m/pix, 0.00007 pix/m Lv4 : 500km… Continue reading Google Mapの各ズームレベルごとのピクセル数と距離の関係