みつきんのメモ

組み込みエンジニアです。Interface誌で「Yocto Projectではじめる 組み込みLinux開発入門」連載中

obnizとGPSモジュールで地図(その4)

Leaflet obniz javascript GPS

概要

前回の続き、というか番外編。

Google Map以外の地図

Google MapのJavaScript APIのキーを取得するには、どうやら課金情報(クレジットカードなど)の登録も必要になるらしい。 実際にはしなくても使用できるっぽいことをネットで見かけているけど。。。

JavaScriptで使用できるオープンソースの地図ライブラリを探したところ、Leafletを見つけた

こちらは制限なく地図データを使用できる。

任意の場所を地図で表示

こちらも表示したい緯度と軽度がわかれば、次のようにするだけで地図は表示することができる。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Leaflet Test</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
<div id="map" style="width: 700px; height: 400px"></div>
<script>
    let map = L.map('map').setView([35.69496, 139.76746000000003], 18);
    $(function () {
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            {
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
                maxZoom: 18
            }
        ).addTo(map);
    });
</script>

</body>
</html>

こちらもかなり手軽に地図を表示することができる。

地図データはL.tileLayerに設定するURLによって切り替えることができる。 今回はOpenStreetMapを使用している。

f:id:mickey_happygolucky:20181210232145p:plain
Leaflet + OpenStreetMap

obniz + Leafletのサンプル

obniz + GPSモジュール + 地図のサンプルをLeafletを使用するように変更する。

obnizとGPSモジュールの接続についてはその1を参照。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Obniz GPS Leaflet Sample</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://unpkg.com/obniz/obniz.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/infusion/GPS.js@v0.4.7/gps.min.js"></script>
</head>
<body>

<div id="obniz-debug"></div>
<div id="map" style="width: 700px; height: 400px"></div>

<script>
    let gps = new GPS;
    let obniz = new Obniz('OBNIZ_ID_HERE');
    let buffer = '';
    let counter = 0;
    let map = null;

    obniz.onconnect = async function () {
        obniz.io0.output(1); //VCC
        obniz.io3.output(0); //GND

        obniz.display.print('waiting GPS...');
        const uart = obniz.getFreeUart();
        uart.start({tx: 1, rx: 2, baud: 9600});

        uart.onreceive = function (data, text) {
            buffer += text;
            if (++counter % 3 === 0) {
                const lines = buffer.split(/\n/);
                for (const s of lines) {
                    if (s.indexOf('$GPGGA') !== -1) {
                        gps.update(s);
                    }
                }
                buffer = '';
            }
        };
    };

    gps.on('data', function(parsed) {
        const lat = parsed.lat;
        const lon = parsed.lon;
        if (lat != null && lon != null) {
            update_map(lat, lon);
        }
    });

    function update_map(lat, lon) {
        if (map == null) {
            map = L.map('map').setView([lat, lon], 18);
            L.tileLayer(
                'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                {
                    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
                    maxZoom: 18
                }
            ).addTo(map);
            obniz.display.clear();
            obniz.display.print('GPS ok');
        } else {
            map.setView([lat, lon]);
        }
    }

</script>

</body>
</html>

前回のプログラムとは地図の部分を変更しただけなので、それ以外の部分は全く同じ。

前回と同様の理由で実行画面は載せない。