MULTISOUP

MULTISOUP

MULTISOUP

マルティスープ
Staff Blog

Introduction example

2016.08.14

Google Maps で OpenStreetMap を表示する!

img

みなさん、こんにちは!

今回は、Google Maps 上に「OpenStreetMap」を表示する方法を説明いたします。

 

「OpenStreetMap」 を知らない方がいるかもしれませんので簡単に説明しますと、有志の方で世界中の地図を作成するプロジェクトがあります。このプロジェクトの目的は、誰でも自由に使える地図を作成することです。メンバーになれば、自分自身で地図の作成、編集を行うことも可能です。私も一応、メンバーに登録しています。詳しくは、下記のサイトをご参照ください。

 

OpenStreetMapのサイトはコチラ

 

では、早速コードを見ていきましょう。

//地図の初期化
function initMap() {
  var osm = 'OpenStreetMap';
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: {lat: 35.7, lng: 139.7}, 
    mapTypeControlOptions: {
      // GoogleMapの道路地図とOpenStreetMapを使用する設定
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, osm] 
    }
  });

 // OpenStreetMaps のImageMapTypeを作成
  var osmMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
      var normalizedCoord = getNormalizedCoord(coord, zoom);
      if (!normalizedCoord) {
         return null;
      }
   // OpenStreetMaps のタイル画像を取得するURL
      return 'https://tile.openstreetmap.jp/' +  
        + zoom + '/' 
        + normalizedCoord.x + '/' 
        + normalizedCoord.y + '.png';
    },
    tileSize: new google.maps.Size(256, 256), //地図画像のサイズ
    maxZoom: 19, //最大ズームレベル
    minZoom: 0, //最小ズームレベル
    radius: 1738000,
    name: osm //名前
  });

  // マップタイプに「OpenStreetMap」追加
  map.mapTypes.set(osm, moonMapType);
 // デフォルトを「OpenStreetMap」にする
  map.setMapTypeId(osm);		
}

google.maps.ImageMapType で「OpenStreetMap」のマップタイプを作成しています。その中の getTileUrl で 「OpenStreetMap」 のサイトから地図画像を取得するためのURLを作成しています。

// 連続してタイルを表示するときのX,Yを算出
function getNormalizedCoord(coord, zoom) {
  var y = coord.y;
  var x = coord.x;
  var tileRange = 1 << zoom;
  // Y方向はループしない
  if (y < 0 || y >= tileRange) {
    return null;
  }
  // X方向はループする
  if (x < 0 || x >= tileRange) {
    x = (x % tileRange + tileRange) % tileRange;
  }
  return {x: x, y: y};
}

通常であれば左上には「地図」「航空写真』のボタンですが、今回は「地図」「OpenStreetMap」と表示されています。

Full Screen

OpenStreetMapはTMS(Tile Map Service)形式で配信されています。そのため、同様の形式である国土地理院の電子地図も表示可能です。

Full Screen

いかがでしたか?Google Maps 上にわざわざ OpenStreetMap を表示する必要なんてあまりないかもしれませんが、ここでのポイントはTMS形式の画像であれば表示可能ということです。

 

地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ

マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。

現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

【関連記事】こんな記事も読まれています

2017.11.25

Google Maps API 用 JAVAライブラリ

みなさん、こんにちは。

Google Maps Geocodeing API や Directions API  などを JAVAで利用す・・・

続きを読む

2017.01.16

東京の花粉量をヒートマップで可視化する

みなさん、こんにちは!

Google Maps JavaScript API のライブラリには、データ可視化ライブラリ(visualiza・・・

続きを読む

2017.04.08

Googleマップで見る「ブラタモリマップ」を作成してみました

みなさん、こんにちは。

国民的人気番組「ブラタモリ」でタモリさんが訪れた街を Google マップ上で表示する「ブラタモリマップ」を作成し・・・

続きを読む

 - Google Maps APIs, Google Maps JavaScript API, OpenStreetMap, スタッフ日記