Googleアイコン（SVG）をpng画像に変換して活用(その２）webixで一覧管理しますNo.064

前回の記事では、Googleアイコンの色を指定してpng画像でダウンロードする機能を紹介しましたが、20pxや24pxでは、Google mapのポインタにはサイズが小さかったです。そこで、色以外にサイズも指定して画像ファイルを作成するように機能を改造しました。
以下は、実際に変換した画像をgoogle Mapに表示した例です。
画像サイズを32pxで作成しました。（家とスマホの画像です）

ポインタ表示は、アイコンと文字を指定して決めた位置（緯度、経度）に表示しています。
webixで表示する方法は、一例ですが、以下のようなソースで表示できます。以下のURLクリックで、実際の動作を確認できます。

Code Snippet

const iconBase =
    "https://sunsun.sakura.ne.jp/webix02/image/";
  

webix.ui({
  // provide your own Google API key
  // https://developers.google.com/maps/documentation/javascript/get-api-key
  key:"AIzaSyAi0oVNVO-e603aUY8SILdD4v9bVBkmiTg",
  view:"google-map",
  id:"map",
  zoom:16,
  center:[ 35.507388, 139.616603],
  data:[
        { id:1, lat:35.507,  lng:139.612, label:"地点A",icon:iconBase + "communication_stay_current_portrait_48px_009788.png" },
        { id:2, lat:35.51,  lng:139.62,   label:"地点B",icon:iconBase + "communication_stay_current_portrait_48px_673BB7.png" },
        { id:3, lat:35.512,  lng:139.6112,   label:"地点C",icon:iconBase + "places_house_48px_EA1E63.png"}
    ]
});

Google Mapに指定した地点（複数個所）や、現在の位置（複数人を同時に指定）を表示しようとすると、ポインタの種類や色を複数、定義する必要があり、その準備として、今回の記事で紹介する機能を使います。
前回は、アイコンの色を指定していましたが、追加で、画像サイズも指定できるようにしました。
元の情報がSVGデータです。この情報のサイズ変更は、思ったより大変でうまくいきません。
サイト検索すると、以下のような情報もありました。

【SVG】こんなに複雑なの？SVGのサイズ変更について

実際にSVGデータを編集して表示しても、うまくサイズが変化しません。
いろいろ試す中、png変換するときにキャンバスのサイズを変更すれば、画像も比例して拡大させるので、その方法を採用しました。
まずは、作成したいサイズを指定する機能を画面に追加しました。

サイズは、20,24,32,48.96を選択できるようにして、サイズに応じて、出力するPNGのファイル名にサイズ情報を付与するようにし、PNG変換時にキャンバスサイズを変更することにしています。

{ view:"button",  css:"webix_primary", id:"SV0012_png_download_btn",name:"SV0012_png_download_btn",label: "PNGダウンロード", align:"center", width: 200,
	click:function(){
       	var png_filename =$$("create_img_filename").getValue();
		const svgData = $$("svg_info").getValue();
		if(svgData != "" && png_filename != ""){
			// Canvas要素を作成
			const canvas = document.createElement('canvas');
			const context = canvas.getContext('2d');
			// 高解像度設定
			var px = $$("px").getValue();
			var width = 24; // ダウンロード時の幅
			var height = 24; // ダウンロード時の高さ
			//サイズ指定に応じて、変更
			var size_info = $$("size").getValue();
			width = size_info; // ダウンロード時の幅
			height = size_info; // ダウンロード時の高さ
			canvas.width = width;
			canvas.height = height;
			// SVGデータを元に画像を作成
			const img = new Image();
    		img.src = 'data:image/svg+xml;charset=utf-8;base64,' + btoa(unescape(encodeURIComponent(svgData))); 
    		img.onload = function () {
        		// Canvasに描画
        		context.drawImage(img, 0, 0, width, height);

        		// PNGデータURLを取得
        		const pngDataUrl = canvas.toDataURL('image/png');

        		// ダウンロードリンクを作成してクリック
        		const downloadLink = document.createElement('a');
        		downloadLink.href = pngDataUrl;
        		downloadLink.download = png_filename;
        		downloadLink.click();
   			};
   		}
   		else{
   			webix.alert("SVG情報が存在しません。");
   			return;
   		}
	}
},

    { margin:20,cols:[
		{view:"colorpicker", label:"PNG指定色", labelWidth:80,width: 220, id:"color",name:"color", value:"" ,editable:true,labelAlign:"right",
			on:{
    			onChange: function(newValue, oldValue, config){
    				var size = $$("size").getValue();
    				SV0012_set_create_img_filename( size,newValue);
    			}
  			}
		},
		{view:"select", label:"サイズ", labelWidth:80,width: 220, id:"size",name:"size", value:"24" ,labelAlign:"right",
		 options:["20","24","32","48","64","96"],
		 on:{
    			onChange: function(newValue, oldValue, config){
    				var color = $$("color").getValue();
    				SV0012_set_create_img_filename(newValue,color);
    			}
  			}
  		}
    ]},

以下は、色とサイズを指定して作成した画像情報です。

透過指定なので、背景が黒になっていますが、実際には、背景は、透明です。

これで、Google Mapに情報を表示する準備ができましたので、次回は、GPS情報を定期的に収集してログとして保存と、マップ上に表示する機能を紹介します。