UIにレトロ感を出したい

今日は、地図を表示するアプリでもレトロ感を出すには、というお話です。

レトロ感のある地図とは

Webで地図を表示する場合に、一番スタンダードなのはGoogle Mapだと思います。

この地図は割とモダンな感じで、ビビッドは青やオレンジ、パステル調の色彩などで分かりやすい表示を目指しているように見えます。

しかし、UI全体にレトロ感を持せたい場合には、地図表示にGoogle Mapを使うと、そこだけがモダンな感じになって、少し違和感が出てきます。

そこでお勧めなのが、OpenStreetMapです。

大体同じ領域で比較してみます。

上がGoogle Mapで、下がOpenStreetMapです。上の方がすっきりして見やすいですが、下の方が色遣いがレトロっぽいと思いませんか。

Google Mapの色使いを変えてみる。

Google Mapでも、路線図や道路、町の様子の色を変更することができるので、少しそれを試してみました。

若干はレトロ感は出てきましたが、OpenStreetMapほどではありません。違いは、ごちゃごちゃ感のような気がします。
OpenStreetMapの方は、この縮尺でも家を一軒一軒表示して色を塗っており、それがごちゃごちゃしている感じを出しています。

GoogleMapでは、もう2段階ほどズームインしないと、こまかい家の様子が現われてきません。

Javascriptでの使い方

ただ地図を表示するだけであれば、非常に簡単です。
まずは、モジュールのインポートが必要です。

OpenStreetMap

<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

この2行を<head>の部分に追加して、あとは表示したいHTMLのコンポーネントに、タイルレイヤーを追加するだけです。
ここでは、"map"というコンポーネントに表示させます。

OpenStreetMap

    <div id="map"></div>
    <script>
        // ページの読み込み後に地図を初期化
        document.addEventListener("DOMContentLoaded", function() {
            // 地図の初期化
            var map = L.map('map').setView([35.681236, 139.767125], 15); // 15: ズームレベル 
            // 東京駅をデフォルトに設定

            // OpenStreetMapのタイルレイヤーを追加
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
       });
    </script>

フリーなので、API Keyも必要なく、簡単に地図を表示することが出来ます。

Google Mapとの違いは、店舗の情報などがほとんど無いということで、地図素材として使いたいということであれば、こちらの方がシンプルで良いかと思いました。

ちなみに、Google Mapでの地図表示の場合は、モジュールのインポートは必要ないのですが、API Keyを取得する必要があります。Keyさえ入手できれば、こんな感じで同じように表示できます。

Google Map

    <div id="map"></div>
    <script>
        function initMap() {
            // 東京駅をデフォルトで設定
            const tokyoStation = { lat: 35.681236, lng: 139.767125 };
            // 地図を表示
            const map = new google.maps.Map(document.getElementById('map'), {
                center: tokyoStation,
                zoom: 15 // ズームレベル
            });
    </script>

    <!-- Google Maps JavaScript APIの読み込み -->
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&callback=initMap" loading="lazy">
    </script>

地図の活用は意外と簡単

今日ご紹介したのは、ただ地図を出すというだけですが、見た目を調整するとか、検索機能を付けるなど色々と付加機能を付け加えていくことができます。

そういったこともリソースの設定で簡単にできるので、レトロな見た目の地図を活用するアプリやWebサイトを作りたい方は、OpenStreetMapを活用することをお勧めします。

以上