でじたるのもり

PCやスマホでできることをあれこれ見つけて書いてます

5分で完成!OpenStreetMap(OSM)をサイトに埋め込む方法

Googleマップにとって替わろうという勢いのオープンソースのマップシステム、それがOpenStreetMap(OSM)だ。Googleマップと比較するとマップ情報などはまだまだ少ないし、

 ストリートビューなどの高機能のコンテンツはないが、その手軽さと、何より無料であるということが話題を呼び、大手サイトが採用したことも後押しになって急速にシェアを広げつつある。

ベーシックな貼り付け方はカンタン。ソースはこんな感じ。 

<html>
  <head><title>OpenLayers Marker Popups</title></head>
  <body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
    
    epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
    projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
   
    var lonLat = new OpenLayers.LonLat( 135.49774 ,34.54613 ).transform(epsg4326, projectTo);
          
    var zoom=10;
    map.setCenter (lonLat, zoom);

    var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
    
    // Define markers as "features" of the vector layer:
    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( 135.51378, 34.6459 ).transform(epsg4326, projectTo),
            {description:'あべのハルカス<BR>300m'} ,
            {externalGraphic: 'https://dl.dropboxusercontent.com/u/11256045/star48.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
        );    
    vectorLayer.addFeatures(feature);
    
    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( 135.29944, 34.41094  ).transform(epsg4326, projectTo),
            {description:'りんくうゲートタワービル<BR>256.1m'} ,
            {externalGraphic: 'https://dl.dropboxusercontent.com/u/11256045/star48.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
        );    
    vectorLayer.addFeatures(feature);

    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( 135.41488, 34.63809  ).transform(epsg4326, projectTo),
            {description:'大阪府咲洲庁舎 コスモタワー<BR>256m'} ,
            {externalGraphic: 'https://dl.dropboxusercontent.com/u/11256045/star48.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
        );    
    vectorLayer.addFeatures(feature);

    map.addLayer(vectorLayer);
    
    //Add a selector control to the vectorLayer with popup functions
    var controls = {
      selector: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })
    };
    function createPopup(feature) {
      feature.popup = new OpenLayers.Popup.FramedCloud("pop",
          feature.geometry.getBounds().getCenterLonLat(),
          null,
          '<div class="markerContent">'+feature.attributes.description+'</div>',
          null,
          true,
          function() { controls['selector'].unselectAll(); }
      );
      //feature.popup.closeOnMove = true;
      map.addPopup(feature.popup);
    }

    function destroyPopup(feature) {
      feature.popup.destroy();
      feature.popup = null;
    }
    map.addControl(controls['selector']);
    controls['selector'].activate();
  </script>
</body></html>

・地図の中央にしたい座標

var lonLat = new OpenLayers.LonLat( 135.49774 ,34.54613 ).transform(epsg4326, projectTo);    

・マーカーの座標とポップアップのテキスト

var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( 135.51378, 34.6459 ).transform(epsg4326, projectTo),
            {description:'あべのハルカス<BR>300m'} ,
            {externalGraphic: 'https://dl.dropboxusercontent.com/u/11256045/star48.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
        );    
    vectorLayer.addFeatures(feature);  

スクリプトをそのまま埋め込めるようなブログやファイルを別置き出来るブログサイトならそのまま使える。そうでない場合はどこかに置いてiframeで置くしかないかな。