More than 5 years have passed since last update.

YOLP JavaScript API 地図に Mapbox GL JS 地図を連動させる

Last updated at 2019-10-18Posted at 2019-10-18

概要

YOLP JavaScript API と Mapbox GL JS の2枚の地図を横に並べる
YOLP JavaScript API の地図のスクロール移動や縮尺変更をした際に、Mapbox GL JS の地図を同じように動かす

ソースコード

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>Twin maps</title>
  <script src="https://map.yahooapis.jp/js/V1/jsapi?appid=___YOUR_APPLICATION_ID___"></script>
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css' rel='stylesheet' />
  <style>
    body  { position:absolute; margin:0; padding:0; width:100%; height:100%; }
    #ymap { position:absolute; top:0; left:0;   width:50%; height:100%; }
    #bmap { position:absolute; top:0; left:50%; width:50%; height:100%; }
  </style>
</head>
<body>

<div id='ymap'></div>
<div id='bmap'></div>

<script>
// YOLP 地図を表示
var ymap = new Y.Map('ymap', {
  configure: {
    doubleClickZoom: true,
    scrollWheelZoom: true,
    continuousZoom: true
  }
});
ymap.drawMap(new Y.LatLng(35.1707925, 136.882763), 16, Y.LayerSetId.NORMAL);

// YOLP 地図の移動後の処理
ymap.bind('moveend', function(){
  // YOLP 地図の中心緯度経度に Mapbox 地図を移動　
  let c = ymap.getCenter();
  bmap.panTo(new mapboxgl.LngLat(c.lng(), c.lat()));
});

// YOLP 地図の縮尺変更後の処理
ymap.bind('zoomend', function(){
  // YOLP 地図のズームレベルに Mapbox 地図を合わせる
  let z = ymap.getZoom();
  bmap.setZoom(z - 2); // ズームレベル数値が2段階ほどちがう
});

// Mapbox のアクセストークンをセット
mapboxgl.accessToken = '___YOUR_MAPBOX_ACCESS_TOKEN___';

// Mapbox 地図を表示
var bmap = new mapboxgl.Map({
  container: 'bmap', // container id
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [136.882763, 35.1707925],
  zoom: 14,
});
</script>

</body>
</html>

スクリーンショット

参考資料

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up