leafletプラグイン > leaflet-fusesearch

4881 ワード
fuse.js leaflet leaflet テキストリンク

あいまい検索Fuse.jsをLeafletで使えるようにするプラグイン

naomap/leaflet-fusesearch

install fuse.js

$ npm install fuse.js


    <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css" />
    <script src="./node_modules/leaflet/dist/leaflet.js"></script>

    <script src="./node_modules/fuse.js/dist/fuse.min.js"></script>
    <link rel="stylesheet" href="./leaflet-fusesearch/src/leaflet.fusesearch.css" />
    <script src="./leaflet-fusesearch/src/leaflet.fusesearch.js"></script>
    <script src="./js/data.js"></script>
    <link rel="stylesheet" href="./css/leaflet.infopane.css" />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

JS

    var map = L.map('map');
    map.setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);


    var searchCtrl = L.control.fuseSearch()
    searchCtrl.addTo(map);
    map.addControl(searchCtrl);

    var props = ['nom_comple', 'libcategor', 'commune'];
    searchCtrl.indexFeatures(jsonData.features, props);