Vectorレイヤーによるマーカーの表示 - プログラマーのメモ書き

静的なマーカーのサンプルで書いたように、この方法はちょっと古いやりk他のようです。なので、ここではVectorレイヤーによるマーカーの表示を行ってみます。

//
// Vector Marker Sample
// http://dev.openlayers.org/examples/osm-marker-popup.html を参照
//
// 画像は下記ディレクトリから拝借
// http://dev.openlayers.org/img/
//
function vector_marker_sample() {
        
    // The overlay layer for our marker, with a simple diamond as symbol
    var overlay = new OpenLayers.Layer.Vector('Overlay', {
        styleMap: new OpenLayers.StyleMap({
            externalGraphic: 'http://dev.openlayers.org/img/marker.png',
            graphicWidth: 20, graphicHeight: 24, graphicYOffset: -24,
            title: '${tooltip}'
        })
    });

    // The location of our marker and popup. We usually think in geographic
    // coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
    var myLocation = new OpenLayers.Geometry.Point(10.2, 48.9)
        .transform('EPSG:4326', 'EPSG:3857');

    // We add the marker with a tooltip text to the overlay
    overlay.addFeatures([
        new OpenLayers.Feature.Vector(myLocation, {tooltip: 'OpenLayers'})
    ]);

    // Finally we create the map
    var map = new OpenLayers.Map({
        div: "demoMap", projection: "EPSG:3857",
        layers: [new OpenLayers.Layer.OSM(), overlay],
        center: myLocation.getBounds().getCenterLonLat(), zoom: 15
    });
}

マーカー上にカーソルを重ねるとツールチップが表示されます。

最初に、11行目で、Vectorレイヤーを生成しています。第１引数は、作成したレイヤーの名前です。第２引数でオプションを与えますが、ここでは、StyleMapを指定しています。

StyleMap というのはそのレイヤーをどう表示するかを決めるものです。StyleMapを使うことで、柔軟にいろいろな表示ができるようになります。こちらの使い方は、別の機会にまとめたいと思います。ここでは、マーカーを外部ファイルで与えることと、titleとして、tooltipとして与えられる要素を表示する、ということを指定しています。

Vectorレイヤーで利用するマーカーは、26行目でOpenLayers.Feature.Vector として生成しています。この際、21,22行目で緯度経度を生成して、それをコンストラクタ引数としています。また、もう一つ、tooltipという名前でオブジェクトを与えています。これがStyleMapのtitleと紐づくことになります。

最後に、Mapを生成しています。ここでは、レイヤーの指定、地図の中心の指定などもコンストラクタの引数で与えています。

このサンプルだけだと、見た目は静的なマーカーで示したものと大して変わりませんが、StyleMapによる柔軟な表示やクリックによるポップアップなども可能になっています。

次は、Vectorレイヤーのマーカーを使ったポップアップを行ってみます。