geojson の simplestyle （Google Maps 実装）

こんにちは。
geojson の simplestyle（geojson のスタイル指定）の Google Maps 実装（JavaScript ）を作ってみました¹。

下記はこれを使った表示例です。この geojsonデータ² を使用しました。

var styleDefaultMarker = {
	symbol: '',
	color: '#7e7e7e',
	size: 'medium'
};
var anchors = {'medium': -30, 'small': -20, 'large': -40};
var styleDefault = {
	title: "",
	description: "",
	icon: markerImage(styleDefaultMarker),
	strokeColor:  "#555555",
	strokeOpacity:  1.0,
	strokeWeight:  2,
	fillColor:  "#555555",
	fillOpacity:    0.6,
//	draggable: true,
//	editable: true,
};
var keyStyle = {
	'title': 'title',
	'description': 'description',
	'stroke': 'strokeColor',
	'stroke-opacity': 'strokeOpacity',
	'stroke-width': 'strokeWeight',
	'fill': 'fillColor',
	'fill-opacity': 'fillOpacity'
};

function markerImage(properties) {
    for (var k in styleDefaultMarker) {
        if (properties[k] === undefined) {properties[k] = styleDefaultMarker[k];}
    }
    var siz = properties["size"][0];
    if (properties["symbol"] != "") {siz += "-";}
    var pinUrl = 'https://api.tiles.mapbox.com/v3/marker/pin-' + siz + properties["symbol"] + '+' + properties["color"].replace(/^#/,"") + '.png';
	var img = new google.maps.MarkerImage(pinUrl, null, new google.maps.Point(0, anchors[properties["size"]]), null);
	return img;
}

function copyObject(obj){
	var newObj = {};
	for(var i in obj){newObj[i] = obj[i]}
	return newObj;
};

var styleFeature = function(feature) {
	var style = copyObject(styleDefault);
	for (var i in keyStyle){
	   var x = feature.getProperty(i);
	   if (x != undefined) {style[keyStyle[i]] = x;}
	}
	var markerProperties = copyObject(styleDefaultMarker);
	for (var k in markerProperties) {
	    markerProperties[k] = feature.getProperty("marker-" + k);
	}
	if (markerProperties["symbol"]) {style['icon'] = markerImage(markerProperties);}
	return style;
}

var map;
function init() {
	map = new google.maps.Map(...);
	map.data.setStyle(styleFeature);
//	map.data.setControls(['Point', 'LineString', 'Polygon']);
}

function loadGeoJson(geojsonData) {
    map.data.addGeoJson(geojsonData);
}

---

1. なお本当はマーカーの style 指定に関して、simplestyle として正しいことのチェックを加えるべきだと思っています（参考：Leaflet.MakiMarkers ）。 ↩

2. このデータは "Diffable, more customizable maps"（Github の blog）でも表示例に使われています。しかしこの Github での表示の実装は specification に忠実ではないです（色など）。 ↩