カテゴリーアーカイブ JavaScript

村上 著者:村上

【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を切り替えたかったんです。

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

  • この記事いいね! (0)
村上 著者:村上

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

  • この記事いいね! (0)
村上 著者:村上

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

  • この記事いいね! (0)
村上 著者:村上

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

  • この記事いいね! (0)
著者:杉浦

javascriptにおける型変換による計算のさわり

 javascriptは型変換を行うことによって記述から予想される実行結果と実際の実行結果が異なることが起きやすい語です。それぐらい大きく変化の起きる型変換を用いた小ネタです。

+[]

 これの実行結果が
 
 です。javascriptは正負の様な数式符号がついた対象を数字として扱う動作があります。大体、空っぽい対象は0、trueっぽい対象は1として評価されます。そのためこの様な結果になります。これを利用すると次の様なこともできます。

 この手の型変換をこれでもかと利用した方法に記号プログラミングというものがあります。例えば、Aを表すコードは次になります。

(([][($+[])[-~-~-~[]]+(({})+[])[-~[]]+([][![]]+[])[-~[]]+(![]+[])[-~-~-~[]]+(!![]+[])[+[]]+(!![]+[])[-~[]]+($+[])[-~[]]+($+[])[-~-~-~[]]+(!![]+[])[+[]]+(({})+[])[-~[]]+(!![]+[])[-~[]]])+[])[-~-~-~[]*-~-~-~[]]
  • この記事いいね! (0)
村上 著者:村上

【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などでも使うことができます。
是非、ご活用ください。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】アプリアイコンにバッヂを表示する方法【解決済み】

以前、アプリのアイコンにバッヂを表示するCordovaのプラグインをご紹介しました。
その時は、何故かバッヂが表示されず、解決方法についても調べきれていなかったのですが、先日対処法が判明しましたのでご紹介。

ちなみに、前回の記事はこちらから。

【Cordova】アプリアイコンにバッヂを追加するプラグイン「cordova-plugin-badge」
https://cpoint-lab.co.jp/article/201807/【cordova】アプリアイコンにバッヂを追加するプラグ/

 

さて、気になるその解決策ですが…単にAndroidとiOSのプラットフォームを一度削除し、再度追加するだけでした。
本当にそれだけでした!
何らかの原因で、プラグインがうまく各プラットフォームに追加できなかったのかな、と思われます。

ちなみに、こちらに気が付いたきっかけはブラウザで実行した時のエラー内容です。
実際のエラー文は保存し忘れてしまいましたが、「プラグインの関数が存在しない」という意味のエラーでした。
で、もしかして…と思い至り、プラグインの再インストールをしたところ、解決したという流れです。

 

以上、cordova-plugin-badge プラグインが動かない時の対処方法でした。
同じことでお悩みの方は、是非お試しください。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】アプリアイコンにバッヂを追加するプラグイン「cordova-plugin-badge」

今回はCordovaのプラグインのご紹介。
お客様からのご要望で、LINEやFacebookのように、アプリのアイコン右上に赤丸や数字で通知数を表示させたいとのことでした。

現在試しているプラグインは「cordova-plugin-badge」というものです。
GitHubのページは下記から。

GitHub – katzer/cordova-plugin-badge: Access and modify badge numbers
https://github.com/katzer/cordova-plugin-badge

 

プラグインの導入方法ですが、まず下記のコマンドでプラグインを追加します。

cordova plugin add cordova-plugin-badge

なお、もしエラーが発生した場合は、下記のコマンドをお試しください。

cordova plugin add https://github.com/katzer/cordova-plugin-badge.git

上記のコマンドで、プラグインの追加まではできたので、今度はソースに下記のようにコードを追加します。

document.addEventListener('deviceready', function () {
    cordova.plugins.notification.badge.set(10);
}, false);

なお、セットしている数値が、バッヂに表示される値になります。

…が、何故か、私の環境では Android、iOS共にバッヂが表示されず…!
現在原因を調査中です。
…アプリを開いた時にリセットされているとかかな?

 

ということで、アプリアイコンにバッヂを表示するためのプラグイン「cordova-plugin-badge」でした。
まだ動いてはいませんが、導入自体はすごく簡単だったので、正常に動作すればかなりおすすめできるプラグインだと思います。
とりあえず、バッヂが表示されるように調整頑張ります…!

  • この記事いいね! (0)
著者:杉浦

多くのcdnリンクを持つcdnjsの紹介

 cdn(contents download link)はjs,cssのライブラリを簡単に読み込む手法です。オープンソース配信サービス、Google Hosted Librariesの紹介で紹介したGoogle Hosted Librariesの様にcdnは多くの場所で配信されています。cdnjsはそのようなcdnの配信リンクをまとめて検索できるサイトです。
 下の画像の様に検索してリンクをコピーするだけでとりあえず使えます。特定のフォーマットで単一のデータを返してくれるAPIも備わっています。
 

 また、cdnjs上でリンクがコピーされた回数をランキングしています。人気が高く、汎用性の高いライブラリが上位に連なっています。jqueryは格別ですね。

  • この記事いいね! (0)
asabakento 著者:asabakento

mapboxのポップアップについて

今回は、mapbox上でピンをタッチすると、画像がポップアップとして出てくるコードを紹介します。

 

ポップアップを付けるときに、画像を撮影した場所にピンを付与して、それをクリックすると

画像がポップアップとして出てくる機能を追加する作業をしていたので備忘録として載せておきます。

 

ざっくりですが説明します。

ポップアップを表示するメソッドを作ったあとに


var el = document.createElement('div');

でピンのオブジェクトを生成します。

 

その後に

 
popup = new mapboxgl.Popup({offset: [16, 0]})

で、ポップアップオブジェクトを生成して使用可能にします。

 

次に、画像をポップアップとして扱うコードなのですが

.setHTMLメソッドを使って表示します。

本来は、htmlの文字列を表示する役割ですが、ここでは

 

 
src = '+image+'

引数のimageを取って中の画像のurlを渡すことができます。

 

ピンが複数立っている時は、そのピンをクリックするときに引数に画像のurlを持たせて

そのurlに合わせて表示するポップアップを変えていると考えるとわかりやすいかもしれません。

 

後は

setLngLat([lmg,lat])

 

 

で、引数のlatとlngを渡せば撮影した場所にピンが立ちま

す。

以上ですが、ここでは肝だけ説明させていただきました。

 

mapboxは柔軟性が高く、細かい箇所まで地図をカスタマイズできるので

慣れてきたらシムシティ感覚で楽しくなってくると思います!

  • この記事いいね! (0)