『 Map API 』超簡単ライブラリ（BmapQuery.js）

#MapAPI の選択


##### Note記事： [Google一択「WebサイトのMap」に一石を投じる！](https://note.mu/daisu_yamazaki/n/na326fad00628)
こちらは、先日「 Note 」に書きましたので、良ければ見てください。
以下につながる話でもあります。

##解説：Youtube動画を用意しました
どんなことができるか解説しています！

https://youtu.be/XrSQWPNVeEg


#学習コストを減らしたライブラリと通常コードの比較
今回作成した「BmapQuery.js」はサンプルサイトでの動作確認や、Githubでのライブラリダウンロードが可能です。

- サンプルサイト: [BmapQuery.js](https://bingmapsgo.azurewebsites.net)
※沢山のサンプルコードがあるので是非試してください。

- ライブラリダウンロード: [Github](https://github.com/yamazakidaisuke/BmapQuery)
※Readmeにも基本サンプルコードを載せています。



##◇1.シンプルな処理で比較
【処理内容】
・MAP表示
・MAPにPINを立てる
・MAPにINFOBOXを立てる


#####「ライブラリ無し」MapAPIを利用して書いたコード
```javascript
:

    //Map表示
    const map = new Microsoft.Maps.Map('#myMap', {
        center: new Microsoft.Maps.Location(47.6149, -122.1941),
        zoom: 15
    });
    //Get MAP Infomation
    let center = map.getCenter();

    //PushPin
    let pin = new Microsoft.Maps.Pushpin(center);
    pin.metadata = {
         color: "#ff0000"
    };
    map.entities.push(pin); //Add Pushpin to Map

    //infobox
    let infobox = new Microsoft.Maps.Infobox(center, {
        title: 'title',
        description: 'description'
    });
    infobox.setMap(map); //Add infobox to Map

```




#####「ライブラリ有り」MapAPIを利用して書いたコード
```JavaScript:

//0. Map初期化
const map = new Bmap("#myMap");
    
//1. Map表示
map.startMap(47.6149, -122.1941, "load", 10);
    
//２．PushPinを立てる
let pin = map.pin(47.6149, -122.1941, "#ff0000");
    
//３．テキストボックスをMapに立てる
map.infobox(47.6149, -122.1941, "Title", "Description");

```

どちらも、このような結果で表示されます。

![picture_pc_a2a87a921cfda8759fdda566f8412670.png](https://qiita-image-store.s3.amazonaws.com/0/104530/c4ebd2fe-5efc-5e22-92f3-9f3bda895c62.png)


　

##◇2.範囲円を作成するコードで比較
【処理内容】
・範囲円を描く
#####「ライブラリ無し」MapAPIを利用して書いたコード（１つ作成のコード）

```JavaScript:

//Map表示
map = new Microsoft.Maps.Map('#myMap', {
    center: new Microsoft.Maps.Location(47.6149, -122.1941),
    zoom: 12
});
//Circle設定
const style = {
    pinColor:"#0000ff",
    fillColor:"rgba(0,0,100,0.4)",
    strokeWidth:10
};
//Circle表示
const lat =47.6149;
const lon = -122.1941;
const meter = 3000;
//Load the spatial math module
Microsoft.Maps.loadModule("Microsoft.Maps.SpatialMath", function () {
    //Request the user's location
    const loc = new Microsoft.Maps.Location(lat, lon);
    //Create an accuracy circle
    const path = Microsoft.Maps.SpatialMath.getRegularPolygon(loc, meter, 36, Microsoft.Maps.SpatialMath.Meters);
    const poly = new Microsoft.Maps.Polygon(path,{
        fillColor: style.fillColor,
        strokeThickness: style.strokeWidth
    });
    map.entities.push(poly);
    //Event:add [click,mousedown,mouseout,mouseover,mouseup]
    if((event==="click" || event==="mousedown" || event==="mouseout" || event==="mouseover" || event==="mouseup") && typeof callback==="function"){
        Microsoft.Maps.Events.addHandler(poly, event, callback);
    }
    //Add a pushpin at the user's location.
    const pin = new Microsoft.Maps.Pushpin(loc,{
        color: style.pinColor
    });
    map.entities.push(pin);
});
```
※3つ作成のサンプルは少し長くなるので省略（下部のライブラリでは３つ作成しています）


#####「ライブラリ有り」MapAPIを利用して書いたコード（３つ作成）
```JavaScript:

//Map初期化
const map = new Bmap("#myMap");
map.startMap(47.6149, -122.1941, "load", 13);
//MapCircle設定
const style = {
      pinColor:"#0000ff",
      fillColor:"rgba(0,0,100,0.4)",
      strokeWidth:10
};
//以下３つのCircleを作成
map.circleSet(47.6200, -122.1100, 2000, style); //2000=2Km
map.circleSet(47.6000, -122.1599, 3000, style); //3000=3km
map.circleSet(47.6149, -122.1941, 1000, style); //1000=1km

```

ライブラリでは「３つ作成」ではこのような結果で表示されます。
<img width="670" alt="SnapCrab_NoName_2019-2-26_4-31-26_No-00.png" src="https://qiita-image-store.s3.amazonaws.com/0/104530/1026d6fb-d504-e688-0efa-91d9d2858a52.png">


　
##◇3.ライブラリを使って「経路検索」
【処理内容】
・経路検索
ライブラリ使用：  3～4行
ライブラリ不使用：60～80行

##### 経路検索：経由地あり（最短で3~4行）
```JavaScript:
//Map初期化
const map = new Bmap("#myMap");
map.startMap(47.6149, -122.1941, "load", 13);

//経由地あり
const array = ["新宿", "恵比寿"];                     //Waypoints...
map.direction("#direction", "walking", "御茶ノ水", "表参道", array);  //walking or driving

```
<img width="520" alt="SnapCrab_NoName_2019-2-26_8-57-33_No-00.png" src="https://qiita-image-store.s3.amazonaws.com/0/104530/9e7e367f-f43c-1c08-db57-0faffcf1f771.png">

　

#####経路検索：経由地なし（最短で3~4行）
```JavaScript:

//Map初期化
const map = new Bmap("#myMap");
map.startMap(47.6149, -122.1941, "load", 13);

//経由地なし
const array = [];
map.direction("#direction", "walking", "御茶ノ水", "表参道, array ); //walking or driving

```
 <img width="641" alt="SnapCrab_NoName_2019-2-26_9-2-54_No-00.png" src="https://qiita-image-store.s3.amazonaws.com/0/104530/ed5cf059-108c-74ce-fe10-3c058b86e36c.png">

 　
　　



###再掲、以下サイトから動作確認＆ライブラリダウンロード可能です
- サンプルサイト: [BmapQuery.js](https://bingmapsgo.azurewebsites.net)

- ライブラリダウンロード: [Github](https://github.com/yamazakidaisuke/BmapQuery)
沢山のサンプルコードがあるので是非試してください。