BingMaps：Pushpin画像のサイズ指定

#BingMaps：Pushpinを画像にした場合の「画像サイズ指定」
##【本記事の前提条件】
BingMapsのPushpinを使いはじめてる人
Pushpinで画像使用した際に「画像サイズの指定に困った人」


##【 Pushpin とは？ 】
Pushpinは以下画像のようにMap上の場所を示すときにつかう印し（Pushpin）です。
Pushpinを置く場合は「デフォルトPushpin」か***「画像（自信で用意）」***の選択ができます。

- デフォルトのPushpinを使う方法 （デフォルトで色の変更は可能です( 例：#ff0000; )
<img width="500" alt="map0.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/104530/d4d1406b-de34-b184-14d1-63370e465f71.jpeg">

- Pushpinを***自分で用意した画像***で使用する方法
<img width="449" alt="map1.JPG" src="https://qiita-image-store.s3.amazonaws.com/0/104530/3b82c85a-0910-905f-e9a4-9d2a6b2d5a72.jpeg">

##【 画像を使用したPushpinでのサイズ変更方法 】
画像を使用する場合には簡単に設定はできません。
以下「スクリプト全体」を見た後に、「１．追加スクリプト１」と「２．追加スクリプト２」の
２箇所のスクリプトを通常のPushpinを立てるスクリプトに追加することで可能になります。

##【 スクリプト全体 】

```html:例）imgSizeChg.html

<!-- Pushpin Object：https://msdn.microsoft.com/en-us/library/mt712673.aspx -->
<script src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=[ *** Your My KEY *** ]' async defer></script>
<script>
    function GetMap() {
        let map = new Microsoft.Maps.Map('#myMap', {
            center: new Microsoft.Maps.Location(47.6149, -122.1941),
            zoom:15
        });

        //-------------------------------------------------------------------------
        //ImageSize1
        //-------------------------------------------------------------------------
        const scaleSize = 3; //scale!!ここで大きさを指定!!
        const imagePath = 'poi_custom.png';
        createScaledPushpin(map.getCenter(), imagePath, scaleSize, function(pin) {
            map.entities.push(pin); //MapにPushpinを追加！
        });

    }

    //-------------------------------------------------------------------------
    //ImageSize2
    //-------------------------------------------------------------------------
    function createScaledPushpin(location, imgUrl, scale, callback) {
        const img = new Image();
        img.onload = function () {
            const c = document.createElement('canvas');
            c.width = img.width * scale;    //scale
            c.height = img.height * scale;  //scale
            //Draw scaled image
            const context = c.getContext('2d');
            context.drawImage(img, 0, 0, c.width, c.height);
            const pin = new Microsoft.Maps.Pushpin(location, {
                icon: c.toDataURL()
            });
            //callback
            if (callback) {
                callback(pin);
            }
        };
        img.src = imgUrl;
    }


</script>

```


###１．追加スクリプト１
コメントの"//ImageSize1"の箇所（5行のスクリプト）を「GetMap関数」に追加しましす。
※createScaledPushpin関数はこの後に定義します。

```javascript:例）imgSizeChg.html
...

<script>
    function GetMap() {
        let map = new Microsoft.Maps.Map('#myMap', {
            center: new Microsoft.Maps.Location(47.6149, -122.1941),
            zoom:15
        });

        //-------------------------------------------------------------------------
        //ImageSize1
        //-------------------------------------------------------------------------
        const scaleSize = 3;                 //画像のScale値を設定
        const imagePath = 'poi_custom.png';  //Pushpin画像へのパス
        //以下 createScaledPushpin関数は次で定義します（この関数で画像のサイズを指定します）。
        createScaledPushpin(map.getCenter(), imagePath, scaleSize, function(pin) {
            map.entities.push(pin);
        });

    }

...
```

###２．追加スクリプト２
コメントの"//ImageSize2"の箇所下には、
『 createScaledPushpin関数 』を定義します。




***注意点!!「GetMap関数の外に記述」すること！！***

```javascript:例）imgSizeChg.html
...

    //-------------------------------------------------------------------------
    //ImageSize2
    //-------------------------------------------------------------------------
    function createScaledPushpin(location, imgUrl, scale, callback) {
        const img = new Image();    //Imageオブジェクトを生成
        img.onload = function () {  //この画像が読み込まれたら実行
            const c = document.createElement('canvas'); //Canvasを作成
            c.width = img.width * scale;    //scale-横幅
            c.height = img.height * scale;  //scale-縦幅
            //Draw scaled image
            const context = c.getContext('2d');                //Canvasに書き込み権限付与
            context.drawImage(img, 0, 0, c.width, c.height);   //Canvasに書き込む
            const pin = new Microsoft.Maps.Pushpin(location, { //Pushpinを作成
                icon: c.toDataURL()
            });
            //callback
            if (callback) {
                callback(pin); //Pushpin設定を関数の実行箇所に送る
            }
        };
        img.src = imgUrl; //画像のPathをセット
    }


...
```

###注意ポイント！！
HTTP/HTTPS通信でブラウザ確認しないとErrorになるようです！！
VisualStudioCodeを使用していれば、以下の画像のように拡張機能「Live Share」を入れると簡単にHTTP/HTTPS通信での確認が可能です。
![48426531_2382555675147708_1748399203865853952_o.jpg](https://qiita-image-store.s3.amazonaws.com/0/104530/a02087c9-1ffe-fd95-dcd5-247c6de76459.jpeg)



##【上記のサンプル動作は以下サイトで見れます！！】 
１．以下の『 BingMaps GO! 』サイトにてコードも動作も見れます。
<img width="435" alt="zoomit.png" src="https://qiita-image-store.s3.amazonaws.com/0/104530/b4de5f19-9651-4c62-2536-46b24e08fcf2.png">
２．以下リンクより
[ Pushpinカテゴリ >> 「Pushpin：Icon | Image Size」を選択]
(https://mapapi.org/open.php?file=example07_imgsize)

３．「Pushpinカテゴリ」→「Pushpin：Icon | Image Size」の順番で見てくださいね！


## BmapQuery Download.
[Github](https://github.com/yamazakidaisuke/BmapQuery)