https://labs.cybozu.co.jp/blog/akky/tags/locator-map/ Recent content in Locator-Map on akky@サイボウズラボ・ブログ Hugo ja Fri, 26 Oct 2018 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2018/10/datawrappers-locator-map-generator/ Fri, 26 Oct 2018 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2018/10/datawrappers-locator-map-generator/ <p>ジャーナリストやビジネスパーソン向けのグラフ/地図作成サービス Datawrapper で、<a href="https://blog.datawrapper.de/locator-maps/">地図上の複数地点を示す Locator Map というタイプの地図を作る機能が追加されています</a>。</p> <p><a href="http://developer.cybozu.co.jp/akky/2017/06/nihonbashi-budget-lunch-list-2017/">東京日本橋500円ランチガイド</a>のお店で作ってみました。</p> <iframe id="datawrapper-chart-7v2Yd" src="//datawrapper.dwcdn.net/7v2Yd/2/" scrolling="no" frameborder="0" allowtransparency="true" style="width: 0; min-width: 100% !important;" height="586"></iframe> <script type="text/javascript">if("undefined"==typeof window.datawrapper)window.datawrapper={};window.datawrapper["7v2Yd"]={},window.datawrapper["7v2Yd"].embedDeltas={"100":772,"200":654,"300":636,"400":586,"500":586,"700":586,"800":586,"900":586,"1000":586},window.datawrapper["7v2Yd"].iframe=document.getElementById("datawrapper-chart-7v2Yd"),window.datawrapper["7v2Yd"].iframe.style.height=window.datawrapper["7v2Yd"].embedDeltas[Math.min(1e3,Math.max(100*Math.floor(window.datawrapper["7v2Yd"].iframe.offsetWidth/100),100))]+"px",window.addEventListener("message",function(a){if("undefined"!=typeof a.data["datawrapper-height"])for(var b in a.data["datawrapper-height"])if("7v2Yd"==b)window.datawrapper["7v2Yd"].iframe.style.height=a.data["datawrapper-height"][b]+"px"});</script> <p>広い範囲のどこに当たるかを差し挟んだりもできるので、意味なく地球上での位置など入れてみたりしました。</p> <p>地図の方角を変えたり、斜めから見たように角度をつけることも自由にできます。</p> <p>上のサンプルは手で入力しましたが、店舗のリストなど、データをまとめて渡して地図を生成することもできます。地図のベースとして使われているのは OpenStreetMap ですね。</p> <p><a href="https://www.datawrapper.de/">Datawrapper</a> はフリーミアムのサービスで、無料でも限定された形で利用できますが、多数のチャートや地図を作ったり、それらの図をサイト上で何万回も表示したり、画像やpdfにして配布したりする場合には月額制の有料プランに入る必要があります。</p> <p>見栄えのよいグラフや地図を作るのもスキルが必要ですが、データを与えるだけでデザインされたものが出たり、インタラクティブな仕組みを持たせたりできるのであれば、お金を払ってもいいというユーザーがいて、こういったサービスが存在できているのかもしれません。</p> <p>via <a href="http://googlemapsmania.blogspot.com/2018/10/how-to-create-locator-maps.html">Maps Mania</a></p>