Leafletで地図に画像を重ねる
重ねて表示表示結果 コード<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Leafletで地図に画像を重ねる|艮電算術研究所</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <script> function init() { // 画像の設定 var image_url = "img/i083.jpg"; var bounds = L.latLngBounds( [36.980, 136.59], [36.645, 137.31], ); //
都道府県を楽に選択できるコンポーネント作りました【Vue 3】 - Qiita
こんにちは、株式会社FunctionalLabでフロントエンド主軸の開発を行なっているしゅうです。 今回は、都道府県を楽に選択できるコンポーネント作ったので紹介します。 公開リンク npm: https://www.npmjs.com/package/vue3-prefecture-selector github: https://github.com/shu-pf/vue3-prefecture-selector なぜ作ったのか 会員登録の際に「都道府県を選択してください」と出てくる際に、このような選択肢が現れますが入力に時間がかかります。 今回はこのセレクトボックスに対して別の表現の選択肢は無いか考えてみました。 作ったもの Vue3のコンポーネントを作成しました。 CodesandBoxでも動作を確認できます。 Codesandbox 上の画像のように、 都道府県を選択する用のモーダ
【D3.js】ブラウザで日本地図を県別に描画・制御する - Qiita
この記事では、以下のように D3.js を使用して描画した地図に対して、インタラクティブに制御する方法を共有します。 地図を自在に描画・制御できると、色々と幅が広がりそうでワクワクします。 1. D3.js とは D3.js はデータに基づいてドキュメント(SVG や DOM など)を操作するための JavaScript ライブラリです。 今回は D3.js を使い地図情報(GeoJson データ)から SVG を生成してブラウザに描画します。 2. 地図データの準備 D3.js を使ってブラウザで地図を描画するためには GeoJson 形式のファイルを用意する必要があります。 ネット上を探してみると直ぐに利用できる状態の GeoJson 形式ファイルもありますが、ここでは信頼性のありそうでライセンス的に扱いが簡単な Natural Earth からデータを取得して加工する方法を解説します
Creating an interactive SVG metro map with JointJS
As a child I was always fascinated with the map prints. It was an absorbing activity to study those beautiful graphic forms and yet stunning to realise this is the form of presentation of actual data. Years passed, I didn’t become a cartographist, but the childhood days fascination remained intact. Knowing that, imagine how happy I was, when asked to join the team that was to implement map functio
[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js
Google Mapをはじめ、YouTube, Vimeo, Vine, TEDなどの動画、SpotifyやSoundCloudなどの音楽、GitHub, CodePen, JS Binなどのコードなど、さまざまなメディアをWebページに簡単に埋め込むことができるスクリプトを紹介します。 :heart:（ハート）や:smile:（スマイル）などの絵文字を使ったテキストを埋め込めます。 リンクを検出して、bit.ly, buff.ly などの短縮URLに置き換えます。 Twitterのツイートを埋め込みます。 YouTubeやVimeoの動画をAPIから取得して埋め込みます。 dailymotion, vine, TEDなどの動画共有サービスもサポート。 SpotifyやSoundCloudなどの音楽サービスもサポート。 HTML5プレイヤーにサポートされた音楽ファイル（.wav, .mp3
![[JS]埋め込みはこれでOK！Google Mapも動画も音楽もコードもツイートも簡単に埋め込めるスクリプト -embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/b29e845c6df328575d3756fb3316de2a165a7046/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061401.png)
百度地図をブログに埋め込むには
ブログやWebサイトに地図を埋め込む場合、中国国内からGoogle Mapは閲覧できない（2015年9月現在）ため、中国国内の住所を埋め込む場合は、Google Mapよりも百度地図を利用した方が便利です。しかし、百度地図の画面内に埋め込みコード発行機能はないようです。どうすれば埋め込みコードを発行できるのでしょうか？ 百度地図APIを使用する。 百度地図APIを使用することにより、地図の埋め込みコードを発行することができます。 まずは百度地図APIのホームページへアクセスし、「开始制作」をクリックします。 今回は上海ヒルズ（環球金融中心）の埋め込みコードを発行してみましょう。画面内に必要事項を入力し、「提交」ボタンをクリックします。 URLと埋め込みコードが生成されました。前の画面にて入力した内容や、交通手段が表示されますが、不要な場合はすべてチェックを外して、コードをコピーすればブログ
Map Rollovers - The Media Temple Blog
Let’s say you have a map of the world and you want to be able to highlight the country (or state, or county, etc.) as the cursor hovers over it or it is tapped. Doable! First, the map should probably be vector. SVG is almost certainly the right image format choice here. It will give us a crisp looking map at likely a reasonable size, and most importantly, give us the interactivity and easy styling
創作にいい！異世界の島の地図を次々に描き出すジェネレーター -Islands Generator
以前、異世界の地図を生成するジェネレーターを紹介しましたが、今度はこの地球上にはないファンタジーの世界や異世界の島を生成するジェネレーターを紹介します。
Generating fantasy maps
mewo2.com is the website of Martin O'Leary artist, designer, teacher, researcher These are some notes on how I generate the maps for my Twitter bot @unchartedatlas, which is based on a generator I originally produced during NaNoGenMo 2015. There's JavaScript code for the generator on Github here, and the original messy Python generator code can be seen here. You may also be interested in this comp
A Guide To Building SVG Maps From Natural Earth Data — Smashing Magazine
Interactive maps can be intimidating, but they don’t have to be a black box. You can create your own custom SVG maps with open data and software. In no time at all, you will have enhanced your website with a beautiful, fully customizable, interactive map. In this article Chris Youderian will explain how to create your own SVG maps using Natural Earth data and open source tools. You will then be ab
Google Mapsの地図に目的地までのルートをJavaScriptで描画する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンジニアのおじいちゃんです。 今回は、任意で入力した場所から指定された場所までのルートをGoogleマップに描画する方法を紹介したいと思います。 Googleマップ描画 サンプルとして、任意に入力した場所からLIGまでの、徒歩でのルートを描画することにしたいと思います。 まずは通常のGoogleマップを設置します。 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js/sensor=TRUE"></script> <div id="map_canvas" style="width: 800px; height: 600px;"></div> <div class="searchBox"> <form> <input id="mapSearch" type="text"> <
GoogleMapを静止画の形でページにサクッと埋め込めるjQueryプラグイン「Static-google-Maps」:phpspot開発日誌
GoogleMapを静止画の形でページにサクッと埋め込めるjQueryプラグイン「Static-google-Maps」 2014年09月08日- ShvedDmutro/Static-google-Maps GitHub GoogleMapを静止画の形でページにサクッと埋め込めるjQueryプラグイン「Static-google-Maps」 スマホサイトなどでグリグリ動くマップがWEBに埋め込まれていると逆に使いづらかったりしますが、このプラグインで画像として埋め込み、クリックしたらGoogleマップに飛ぶという形のほうが最近の事情では合理的かもしれません。 実装もとにかく簡単で、住所やズーム率、画像のサイズを指定してあげればOK 関連エントリ Googleマップを好みの色にカスタマイズできるスタイルまとめ「Snazzy Maps」 新し目のAPIにも対応したGoogleマップ操作jQu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Baidu MapをWebページに埋め込む
TechCrunch
世界中の衛星写真から「アルファベット」を集めてみた
AGEN SLOT MAPS INDONESIA
「世界中の地下鉄」に乗り換えできる路線図をつくってみた
2点間をつなぐストリートビューをGIFアニメにしてくれる『Google Maps Streetview Player』 | IDEA*IDEA
https://gori.me/google/google-news/66126
ヒートマップが簡単に描画できるライブラリ「heatmap.js」:phpspot開発日誌