leaflet入門｜プラグインで検索機能を追加する（GeoJSONAutocomplete）

Leafletのプラグイン「GeoJSONAutocomplete」使用して、地図に検索機能を追加します。

実装後のイメージは以下のようになります。

【検索機能を追加】

Demoはこちらです。

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Plugin GeoJSONAutocomplete</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<!-- plugin -->
    <script src='js/jquery-1.11.3.min.js'></script>
    <link rel="stylesheet" href="css/geojsonautocomplete.min.css" />
    <script src="js/geojsonautocomplete.min.js"></script>
<!-- plugin -->

    <style type="text/css">
     <!--
      #mapid { height: 400px; width: 600px}
    -->
    </style>
  </head>
  <body>
    <div id="mapid"></div>
    <div id='searchContainer' style="position: fixed;">

    <script>
    window.onload = function () {
        // Mapの基本設定
        map = L.map('mapid', {
            center: [35.7102, 139.8132],
            zoom: 15,
            zoomControl: false
        });
        map.addControl(L.control.zoom({position: 'topright'}));

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      		maxZoom: 18,
      		attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
      	}).addTo(map);

        var options = {
            geojsonServiceAddress: "./features.json",
            placeholderMessage: "検索条件を入力してください。",
            notFoundMessage: "に一致する検索対象がありません。",
            notFoundHint: "検索条件を変えて再検索してください。",
            pointGeometryZoomLevel: 10
        };

        $("#searchContainer").GeoJsonAutocomplete(options);
    }
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Leaflet Plugin GeoJSONAutocomplete</title>

<!--

#mapid { height: 400px; width: 600px}

-->

</style>

</head>

<body>

window.onload = function () {

// Mapの基本設定

map = L.map('mapid', {

center: [35.7102, 139.8132],

zoom: 15,

zoomControl: false

});

map.addControl(L.control.zoom({position: 'topright'}));

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

maxZoom: 18,

attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '

}).addTo(map);

var options = {

geojsonServiceAddress: "./features.json",

placeholderMessage: "検索条件を入力してください。",

notFoundMessage: "に一致する検索対象がありません。",

notFoundHint: "検索条件を変えて再検索してください。",

pointGeometryZoomLevel: 10

};

$("#searchContainer").GeoJsonAutocomplete(options);

}

</script>

</body>

</html>

２．解説

地図を描画するまでの解説は、leaflet入門1に記載しています。

２−１．プラグインの読み込み

GeoJSONAutocomplete では、本体とJQueryを読み込む必要があります。

本体はGitHubからダウンロードできます。

<!-- plugin -->
    <script src='js/jquery-1.11.3.min.js'></script>
    <link rel="stylesheet" href="css/geojsonautocomplete.min.css" />
    <script src="js/geojsonautocomplete.min.js"></script>
<!-- plugin -->

２−２．データの準備（GeoJSON）

地図にマッピングするデータはGeoJSON形式で準備します。

今回使用するデータは、以下の５つになります。

・点（３つ）

・ポリゴン（１つ）

・線（１つ）

{
  "type": "FeatureCollection",
  "features": [
    { "type": "Feature", "properties": { "popupContent": "popupContent1", "title": "タイトル１", "description": "説明１", "image": "marker.png" },  "geometry": { "type": "Point", "coordinates": [139.8107,35.7101] } },
    { "type": "Feature", "properties": { "popupContent": "popupContent2", "title": "タイトル２", "description": "説明２", "image": "marker.png" },  "geometry": { "type": "Point", "coordinates": [139.8207,35.7121] } },
    { "type": "Feature", "properties": { "popupContent": "popupContent3", "title": "タイトル３", "description": "説明３", "image": "marker.png" },  "geometry": { "type": "Point", "coordinates": [139.8207,35.7111] } },
    { "type": "Feature", "properties": { "popupContent": "popupContent4", "title": "タイトル４", "description": "説明４", "image": "polygon.png"},  "geometry": { "type": "Polygon", "coordinates": [[[139.8107,35.7101],[139.8207,35.7121],[139.8207,35.7111],[139.8207,35.7111],[139.8107,35.7101]]]}},
    { "type": "Feature", "properties": { "popupContent": "popupContent5", "title": "タイトル５", "description": "説明５", "image": "polyline.png"}, "geometry": { "type": "LineString", "coordinates": [[139.8107,35.7101],[139.8207,35.7121]]}}
  ]
}

{

"type": "FeatureCollection",

"features": [

{ "type": "Feature", "properties": { "popupContent": "popupContent1", "title": "タイトル１", "description": "説明１", "image": "marker.png" }, "geometry": { "type": "Point", "coordinates": [139.8107,35.7101] } },

{ "type": "Feature", "properties": { "popupContent": "popupContent2", "title": "タイトル２", "description": "説明２", "image": "marker.png" }, "geometry": { "type": "Point", "coordinates": [139.8207,35.7121] } },

{ "type": "Feature", "properties": { "popupContent": "popupContent3", "title": "タイトル３", "description": "説明３", "image": "marker.png" }, "geometry": { "type": "Point", "coordinates": [139.8207,35.7111] } },

{ "type": "Feature", "properties": { "popupContent": "popupContent4", "title": "タイトル４", "description": "説明４", "image": "polygon.png"}, "geometry": { "type": "Polygon", "coordinates": [[[139.8107,35.7101],[139.8207,35.7121],[139.8207,35.7111],[139.8207,35.7111],[139.8107,35.7101]]]}},

{ "type": "Feature", "properties": { "popupContent": "popupContent5", "title": "タイトル５", "description": "説明５", "image": "polyline.png"}, "geometry": { "type": "LineString", "coordinates": [[139.8107,35.7101],[139.8207,35.7121]]}}

]

}

２−３．オプション設定

GeoJSONAutocomplete のオプションを設定します。

var options = {
    geojsonServiceAddress: "./features.json",
    placeholderMessage: "検索条件を入力してください。",
    notFoundMessage: "に一致する検索対象がありません。",
    notFoundHint: "検索条件を変えて再検索してください。",
    pointGeometryZoomLevel: 10
};

var options = {

geojsonServiceAddress: "./features.json",

placeholderMessage: "検索条件を入力してください。",

notFoundMessage: "に一致する検索対象がありません。",

notFoundHint: "検索条件を変えて再検索してください。",

pointGeometryZoomLevel: 10

};

geojsonServiceAddress：Step2で準備したGeoJSONファイルのパスを指定します。
placeholderMessage：検索条件入力欄に表示するメッセージ。
notFoundMessage：検索結果が0件の場合に表示するメッセージ。
notFoundHint：検索結果が0件の場合に、ヒントとして表示するメッセージ。
pointGeometryZoomLevel：検索結果を表示する際の、地図のズームレベルを指定します。

２−４．検索ボックスの追加

検索機能を追加するには、htmlで検索ボックスを配置する場所を指定します。

<div id='searchContainer' style="position: fixed;">

1	<div id='searchContainer' style="position: fixed;">

次に、Step３で作成したオプションを検索ボックスに設定します。

$("#searchContainer").GeoJsonAutocomplete(options);

1	$("#searchContainer").GeoJsonAutocomplete(options);

これで、検索機能を追加できました。

３．まとめ

GeoJSONAutocompleteを使うと簡単に、GeoJSON形式のデータを検索することができました。

似た機能をもつプラグインには、「leaflet-fusesearch」があります。

要件や好みで使い分けというところでしょうか。