function mapInit(json){ geojson = json.features; //Leaflet初期設定 map = L.map('map', { maxZoom: 15, minZoom: 1, crs: L.CRS.Simple //(L.CRS.Simpleは緯度経度の代わりにシンプルなXY座標でマップを表示します) }); var southWest = new L.LatLng(54.88, 138.48); var northEast = new L.LatLng(54.88, 138.48); //var southWest = new L.LatLng(64641, -167786); //var northEast = new L.LatLng(126779, -147119); var bounds = new L.LatLngBounds(southWest, northEast); map.fitBounds(bounds); //デフォルトズーム map.setZoom(10); //Leafletに用意されたsvgを使う map._initPathRoot(); // svg要素を選択 var svg = d3.select("#map").select("svg"); g = svg.append("g"); //緯度経度->パスジェネレーター関数作成 var transform = d3.geo.transform({point: projectPoint}); var path = d3.geo.path().projection(transform); var baseMaps = g.selectAll("path.baseMaps") .data(geojson) .enter() .append("path") .attr("d", path) .attr({ "stroke":"gray", "fill":"none", }) ; map.on("viewreset", update); update(); //pathのd属性を更新 function update() { baseMaps.attr("d", path); } //位置→座標変換 function projectPoint(x, y) { var point = map.latLngToLayerPoint(new L.LatLng(y, x)); this.stream.point(point.x, point.y); } }