ぬるぬる動く！Web地図クライアント「Leaflet」を使おう！
D3.jsと組み合わせても使いやすい、Web地図クライアントライブラリの大本命……だと、個人的には思ってる……たぶん。 leaflet leaflet.jsとは何か leafletはWeb上で地図を表示するオープンソースのマップクライアントライブラリです。 軽量でスマートフォンなどのタッチ操作にも対応した地図を手軽に表示することができます。 ユーザーによって様々なプラグインが作成されているのが特徴で、それらを組み合わせることで多様な表現を行うことができるので「地図なんてGoogle Maps APIで十分じゃね？」という方も、一度触ってみてください。 そんな訳で、簡単な「Leaflet クイックスタート」的なものを書いてみました。 ベースマップの作成 cdnからcssファイルとjsファイルを読み込みます。 <link rel="stylesheet" href="http://cdn.le
Googleマイマップのススメ。食べ歩きMAPを作っておくと、すごく便利ですよ。 - いつもマイナーチェンジ！
いまやお出かけの必需品となったGoogleマップですけれども。 マイマップって使ってますか？ かなり前からあるサービスなので、使ってる人は当たり前のように使ってると思いますが、 これ、とても便利です。 もし使ってない人がいたら、ちょっと見ていってください。 僕の使い方を説明しますので。 マイマップとは Googleマップで住所や地名で検索すると赤いピンが立ちます。 例えば、「東京駅」で検索すると、こんなふうになりますね。 このピンを、ひとつじゃなくて複数立てられて、且つそれを保存できるのがマイマップです。 こんな感じで。 僕のマイマップの使い方 上のマイマップを見ると、ピンが色分けされているのが分かると思います。 これ、僕の食べ歩きMAPなんですが、 僕はピンを立てる時に、こんな使い分けをしています。 青色：すごく美味しかった店 水色：結構美味しかった店 黄色：普通に美味しかった店 桃色：
東京の鉄道路線図SVGを作りました＆パブリックドメインで配布します
東京の鉄道路線図SVGを作りました＆パブリックドメインで配布します ロンドン地下鉄路線図での作図方法に基づいた東京の鉄道路線図を作ったので公開・配布します time2014/12/20 hatenabookmark- Illustratorを使って、東京圏の交通路線図を作りました。 現在、これを書きだしたSVGファイルを以下に置いて、ウェブ上から見られるようにしています。まだマップとして大した処理はしていないので、PCとかだとスクロールが面倒ですが、スマートフォンなどタッチ端末だとそこそこ見られると思います。 なお、AIファイル・SVGファイルはパブリックドメイン(CC0)としますので、配布・改変・販売含め、煮るなり焼くなり好きに使っていただいてかまいません。 railmaps - github どうして描いたの？ 昔からハリーベック氏のロンドン地下鉄路線図がとても好きで、自分もこういうも
【Unity】簡単明快なdrawcall削減の例 - Qiita
お疲れ様です。 Unity書いてたら、たまたまいい感じのdrawcall削減例が出来たので、 投稿したいと思います。 どんなUnityプロジェクトなの？ テキストファイルを読み込む パースし、マップデータに変換 変換したマップデータからマップを生成する という簡単なモノです。 8bit RPGのようなマップチップを配置するものではなく、 昨今のソーシャルゲームにあるようなマスを進むタイプのマップになります。 こんな感じ。 現在、draw call : 12となっています。 コードはこんな感じ using UnityEngine; using System.Collections; using System.Collections.Generic; using System.IO; public class LoadText { // Resources/text/から指定のテキストファイル
立体地図（地理院地図3D・触地図）
地理院地図の「3D機能」や地理院地図Globeでは、「誰でも・簡単に・日本全国どこでも」3次元で見ることができます。 地理院地図の3D機能では3Dプリンタ用のデータをダウンロードすることもできます。 本サイトでは、立体地図の使い方や立体模型、触地図の作り方をご紹介します。 最新情報 立体地図を作る（ダウンロード編）に日本の典型地形の立体模型を追加しました。（平成30年7月4日） 地理院地図を改良し、地下の空中の3D表示や、3D表示範囲の選択が可能になりました。（平成29年3月14日） 地理院地図Globeを正式公開しました。（平成29年3月14日） 海外の地形も3D表示できるようになりました。（平成28年12月21日） 地理院地図3Dのプログラムの修正について（平成28年11月21日）
GoogleMapの簡単な埋め込み方法。アイコンやデザインのカスタマイズも！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、はやちです(◞‸◟) いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じませんか？(◞‸◟) どーにかこれをうまくデザインできないだろうか(◞‸◟) ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و Googleマップを表示させよう まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝ Googleマップの設置 <script src="http://maps.google.com/maps/api/js?key=ここにAPIキーを入れます&language=ja"> </script> headerタグAPIを取得するスクリプトをつけます。 APIの取得はこちらをご参照ください <div id="js-map-tae
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
Rails で、Controller に定義されている action を一度に取得する方法はありますか？ - QA@IT
平素よりQA＠ITをご利用いただき、誠にありがとうございます。 QA＠ITは「質問や回答を『共有』し『編集』していくことでベストなQAを蓄積できる、ITエンジニアのための問題解決コミュニティー」として約7年間運営をしてきました。これまでサービスを続けることができたのは、QA＠ITのコンセプトに共感をいただき、適切な質問や回答をお寄せいただいた皆さまのご支援があったからこそと考えております。重ねて御礼申し上げます。 しかしながら、エンジニアの情報入手方法の多様化やQAサービス市場の状況、＠ITの今後のメディア運営方針などを検討した結果、2020年2月28日（金）15:00をもちましてQA＠ITのサービスを終了することにしました。 これまでご利用をいただきました皆さまには残念なお知らせとなり、誠に心苦しく思っております。何とぞ、ご理解をいただけますと幸いです。 QA＠ITの7年間で皆さまの知識
個人的に使ってるtableの日本地図をjQueryで叩く
CSSはこちら。特に変わったことはしていません。CSS3はtext-shadowとtransitionです。これは必須という訳ではないですね。 #map1 a{ font-size: 14px; color: #666; text-decoration: none; text-shadow: rgba(255,255,255,0.6) -1px 1px 0; } #map1 td{ padding: 6px 3px; text-align: center; } #map1 td.frame{ padding: 0; width: 20px; height: 10px; } #map1 td.land{ background-color: #eef2bf; } #map1 td.sea{ background-color: #f0f9ff; } #map1 td.selected{ back
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでforEach, filter, map, reduceとか - Qiita
HTML/CSSも吐き出す超お手軽な世界地図素材作成サービス「Pixel Map」
https://jp.techcrunch.com/2015/02/01/20150131once-399-a-year-google-earth-pro-is-now-free/
https://qiita.com/fl04t/items/57ebb0fe8009d00c8499
Flatis
Loading...
鉄道Now
地図の無料素材 - 地図AC