著者アーカイブ 村上

著者:村上

【JavaScript】Mapboxの「There is already a source with this ID」エラーの対処法

先日投稿したMapboxのエラーについて、対処法が分かったのでご紹介！
というか、まさにほぼ同じことにお悩みの方がいらっしゃり、そこで対処法が紹介されていたので、それをコピー＆ペーストしたら、動きました。
検索が下手だったようです…反省。

なお、以前の記事はこちらから。

【JavaScript】Mapboxで「There is already a source with this ID」エラーが発生【未解決】
https://cpoint-lab.co.jp/article/201808/【javascript】mapboxで「there-is-already-a-source-with-this-id」エラーが発生【未解決】

ざっくりと状況を説明すると、Mapboxで追加できるナビゲーション機能を追加してから一旦削除し、もう一度追加しようとすると、「There is already a source with this ID」という IDの重複エラーが発生し、ナビゲーション機能を追加できない状態でした。

さて解決策ですが、ナビ機能を削除する、removeControl() を実行したタイミングで下記の項目も削除するだけでした。

map.removeLayer('directions-route-line');
map.removeLayer('directions-route-line-alt');
map.removeLayer('directions-hover-point-casing');
map.removeLayer('directions-hover-point');
map.removeLayer('directions-waypoint-point-casing');
map.removeLayer('directions-waypoint-point');
map.removeLayer('directions-origin-point');
map.removeLayer('directions-origin-label');
map.removeLayer('directions-destination-point');
map.removeLayer('directions-destination-label');
if (map.getSource('directions')) map.removeSource('directions');

なお、この解決策が紹介されていた投稿はこちらから。

Error when adding controls dynamically #5089・mapbox/mapbox-gl-js・GitHub
https://github.com/mapbox/mapbox-gl-js/issues/5089

実際に、ソースコードに追加するとこのような感じ。

var directions;
function navi() {
    if(['条件：ナビ機能が追加済みだったら']) {
        map.removeControl(directions);

        /* ここから */
        map.removeLayer('directions-route-line');
        map.removeLayer('directions-route-line-alt');
        map.removeLayer('directions-hover-point-casing');
        map.removeLayer('directions-hover-point');
        map.removeLayer('directions-waypoint-point-casing');
        map.removeLayer('directions-waypoint-point');
        map.removeLayer('directions-origin-point');
        map.removeLayer('directions-origin-label');
        map.removeLayer('directions-destination-point');
        map.removeLayer('directions-destination-label');
        if (map.getSource('directions')) map.removeSource('directions');
        /* ここまで */

        directions = null;
    } else {
        directions = new MapboxDirections({
                        accessToken: mapboxgl.accessToken
                    });
        map.addControl(directions, 'top-left');
    }
}

どれか一つがなくてもダメなようで、試しに2行ほど削除してみたのですが、当然ながらその行でエラーが発生し、実行できませんでした。

作業は以上で完了です。
画面をリロードして動作確認をしたところ、問題なく動作しました！

以上、Mapboxのエラーの対処法でした。
前回の記事でも書いたのですが、Mapboxのナビ機能ってそこそこサイズが大きいので、特にスマートフォンでは表示/非表示を行いたかったんですよね。
最初はCSSを操作して、ナビゲーションウィンドウを消すことも考えたのですが、ウィンドウが見えないだけでナビ機能は有効だったので、どうしても機能自体のON/OFFを切り替えたかったんです。

あとは…ラベルとか、ナビの道順のところを日本語化できないかな…と考えています。
こちらもとっかかりが見つかったら、改めてご紹介したいと思います。

著者:村上

【JavaScript】Mapboxで「There is already a source with this ID」エラーが発生【未解決】

タイトルにも書いてありますが、未解決です。

先日からMapboxを触っているのですが、その中でナビゲーション機能を追加・削除したいと考えています。
で、追加して削除までは成功したのですが、その後もう一度追加しようとすると、「There is already a source with this ID」というエラーが発生している状況です。
Google翻訳に掛けたところ「このIDを持つソースが既に存在します。」とのことだったので、削除したコントローラのデータが一部残っているのではと思っております。

ちなみにエラーが発生しているソースコードはこちら。

var directions;
function navi() {
    if(['条件：ナビ機能が追加済みだったら']) {
        map.removeControl(directions);
        directions = null;
    } else {
        directions = new MapboxDirections({
                        accessToken: mapboxgl.accessToken
                    });
        map.addControl(directions, 'top-left');
    }
}

このコードを実行すると、1回目の追加と削除が成功した後、10行でエラーになります。

まだしっかりと読めてはいないのですが、下記の記事が同じ原因で発生しているように見えるので、時間をとってしっかり確認したいと思います。

layers don’t show up after removing them and adding them again・issue #5440・mapbox/mapbox-gl-js
https://github.com/mapbox/mapbox-gl-js/issues/5440

CSSでの単なる表示・非表示の切り替えも考えたのですが、検索窓が見えないだけで実行されてしまうので、結局この方法がベストかな、と考えています。
解決策が分かったら、また改めてご紹介したいと思います！

著者:村上

【JavaScript】Mapboxを使って場所の検索機能を実装する方法

最近、Mapboxを業務で使っているので、今回もMapboxで実装できる機能の紹介を。
できることが多すぎて、いっそ何ができるのかわかりにくいので、個人的に使えそうだと思った機能をピックアップしていこうと思います。
前回はナビゲーション機能でしたが、今回は場所の検索機能について。

公式サイトのサンプルはこちらから。

Add a geocoder｜Mapbox
https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/

まず、実装できる画面はこちら。

画面左上に検索窓が表示されるので、こちらに検索したいキーワードを入力します。
試しに「浜松駅」と入力しましたが、問題なく機能しました。

実装方法ですが、まず下記のJSファイルとCSSファイルを読み込みます

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'https%3A%2F%2Fapi.mapbox.com%2Fmapbox-gl-js%2Fplugins%2Fmapbox-gl-geocoder%2Fv2.3.0%2Fmapbox-gl-geocoder.min.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />

次に、下記のコードを追加します。

map.addControl(new MapboxGeocoder({
    accessToken: mapboxgl.accessToken
}),"top-left");

何と実装は以上で完了です！
とても簡単ですね！
また、第2引数の「top-left」を変更することで、表示位置も調節できます。
例えば、右下に配置したい場合は「bottom-right」と指定します。

以上、Mapboxのマップに検索窓を追加する方法でした。
ただ、検索後、その場所に移動はしますが、マップピンが立つなどの機能はないので、そこは自分で実装する必要がありますね。
が、簡単な検索ならこれで十分すぎるくらいの機能だと思います。

著者:村上

【JavaScript】Mapboxを使ってルート検索を行う方法

Mapboxでルート検索を行いたかったので調べてみたところ、プラグインがあったので試してみました。
導入もとても簡単で、しかも無料とのこと！

なお、今回参考にさせていただいたサイトはこちらから。

Mapbox でルート検索を試してみた – マルティスープ株式会社
https://maps.multisoup.co.jp/blog/2818/

なお、GitHubはこちらから。

GitHub – mapbox/mapbox-gl-directions: Directions plugin for mapbox-gl-js using Mapbox Directions API.
https://github.com/mapbox/mapbox-gl-directions

さて、ルート検索プラグインの導入方法ですが、まずMapboxのアカウントを作成し、画面上に地図を表示させるところから行ってください。
こちらの方法については、下記の公式サイトをご確認ください。

Welcome to Mapbox | Mapbox
https://www.mapbox.com/install/

上記の方法で地図が表示出来たら、下記のコードを追加します。

まずは、プラグインを使用するためのJavaScriptファイル及びCSSファイルの読み込みです。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D'https%3A%2F%2Fapi.mapbox.com%2Fmapbox-gl-js%2Fplugins%2Fmapbox-gl-directions%2Fv3.1.1%2Fmapbox-gl-directions.js'%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.css' type='text/css' />

次に下記のJavaScriptコードを追加します。

// アクセストークン設定
mapboxgl.accessToken='xxxxxxxxxxxxxxxxxxxxx';
// 地図生成
var map = new mapboxgl.Map({
    container: 'map',
    center: [地図の中心座標],
    zoom: 10,
    styles: 'mapbox://styles/mapbox/streets-v10'
});

// ここから下のコードを追加
map.addControl(
    new MapboxDirections({
        accessToken: mapboxgl.accessToken
    }), 'top-left');

なお、地図生成のコードは既に追加されているはずなので、12行目以降のコードを追加してください。

そうすれば、下記のようにルート検索用のメニューが表示されるはずです。

ルート検索を行いたい場合は、地図上で出発地点と到着地点をクリックすればOKです。
ルート検索後は、車や徒歩、自転車から移動手段を選択できます。
また、ルートも3候補くらい出してくれます。

ただ、Googleマップのように建物名や住所では検索できないのが少し難点ですね。

以上、Mapboxでルート検索をする方法でした。
検索機能は少し限定的ですが、導入は簡単だし、何よりも無料なので、簡単なルート検索機能の導入でしたら是非お試しになってはいかがでしょうか。

著者:村上

【JavaScript】部分一致のある複数のキーワードをそれぞれ置換する方法

JavaScriptで複数の文字列を置換するとき、置換したいキーワードの一部が他のキーワードと重複しているため、置換後の文字列が意図しない結果になるという状況に陥りました。
例えば、「#○○○」などのハッシュタグをタグで囲もうとしたとき、ハッシュタグに「#浜松」と「#浜松市中区」というキーワードが一部重複している箇所があるため、「#浜松」の部分が意図せずに2回も置換されてしまうという感じです。

今回は、それの対処法です。
もしかしたらもっといい方法があるのかもしれませんが…個人的に一番しっくり来たのでこの方法を採用しました。

対処法ですが、まず置換したい文字列（ここではハッシュタグ）をいったん別の文字に置き換えます。
この時、他のキーワードと一致しないように特殊な文字列にするようにしましょう。
例えば、%をキーワードの頭と末尾に2つずつつけてみるとか。
サンプルコードは下記のとおりです。

var text = '[ハッシュタグを含む置換したい文字列]';
var result = str.replace(/(#\S+)/g, '%%$1%%');

上記のコードを実行すると、ハッシュタグが2つの%で囲まれた特殊な文字列に置き換えられます。
なお、正規表現でグループ化を使うと、$1 に一致した文字列が代入されるので、これを利用して文字列を置換していきます。

あとは、この文字列を最終的に置き換えたい文字列の形になるように置換します。
ここでは、タグでハッシュタグを囲んでいます。
サンプルは下記に。

result = result.replace(/%%(#\S+)%%/g, '<a href="[リンク先]">$1</a>');

全部通しで書くと下記のようになります。

var text = '[ハッシュタグを含む置換したい文字列]';

// %%[ハッシュタグ]%% となるように置換
var result = str.replace(/(#\S+)/g, '%%$1%%');

// %%[ハッシュタグ]%% を <a href="[リンク先]">[ハッシュタグ]</a> に置換
result = result.replace(/%%(#\S+)%%/g, '<a href="[リンク先]">$1</a>');

作業は以上で完了です。

以上、部分一致のある複数のキーワードをそれぞれ置換する方法でした。
今回はJavaScriptで紹介しましたが、もちろんPHPなどでも使うことができます。
是非、ご活用ください。