1

I have this JSON from this API (see : http://staging-lrsm.anagraph.io/wp-json/wp/v2/story)

[![API RESPONSE][1]][1]

Then I use the below code to access the GeoJSON by jQuery:

    var map = L.map('map').setView([45.5314,-73.6750], 10);

    L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png').addTo(map);

    function renderStory(story)

    {       
    var story = story ;     
    var geo = story.geo_infos.features;
    var title = story.title.rendered
    var auteurs = story.acf.auteurs[0].post_title
    marker = L.geoJSON(geo,  {
    onEachFeature: function (feature, layer) {
        layer.bindPopup('<h1>'+title+'</h1><p>'+ auteurs+'</p>');
        feature.layer = layer;

        }
     }).addTo(map);


    var searchControl = new L.Control.Search({
    layer: marker,
    propertyName: 'title', 
    circleLocation: true
});

    searchControl.on('search_locationfound', function (e) {

    e.layer.setStyle({
        fillColor: '#3f0',
        color: '#0f0'
    });
    if (e.layer._popup) e.layer.openPopup();

}).on('search_collapsed', function (e) {

    marker.eachLayer(function (layer) { //restore feature color
        marker.resetStyle(layer);
    });
});

map.addControl(searchControl); //inizialize search control  
}       
$.getJSON('http://staging-lrsm.anagraph.io/wp-json/wp/v2/story', 
        function(stories) {
        stories.map(renderStory);

        })

I would like to be able to search ID, Title, Authors etc... with this plugin https://github.com/stefanocudini/leaflet-search, but every time I try to access the Title for example, I get this error from the console

leaflet-search.js:555 Error: propertyName 'title' not found in marker

Full html code below`

<html>
<head>
  <title></title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.5/MarkerCluster.css" />
   <link rel= "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.5/MarkerCluster.Default.css" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css"/>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet">

   <link rel="stylesheet" href="leaflet-search-master/style.css" /> 
    <link rel="stylesheet" href="leaflet-search-master/src/leaflet-search.css" />

   <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.5/leaflet.markercluster-src.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.5/leaflet.markercluster.js"></script>
   <script src="https://unpkg.com/leaflet.icon.glyph@latest"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
   <script src="leaflet-search-master/src/leaflet-search.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.0.4/fuse.min.js"></script>



  <style>

    #mapid{ height: 100% }


  </style>
</head>
<body>



  <div id="mapid"></div>
<div id="content">
    </div>
  <script> 

var map = L.map('mapid').setView([45.5314,-73.6750], 10);

L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png').addTo(map);

function renderStory(story)

    {       
    var story = story ;     
    var geo = story.geo_infos.features;
    var title = story.title.rendered
    var auteurs = story.acf.auteurs[0].post_title
    marker = L.geoJSON(geo,  {
    onEachFeature: function (feature, layer) {
        layer.bindPopup('<h1>'+title+'</h1><p>'+ auteurs+'</p>');
        feature.layer = layer;

        }
     }).addTo(map);


    var searchControl = new L.Control.Search({
    layer: marker,
    propertyName: 'title', 
    circleLocation: true
});

    searchControl.on('search_locationfound', function (e) {

    e.layer.setStyle({
        fillColor: '#3f0',
        color: '#0f0'
    });
    if (e.layer._popup) e.layer.openPopup();

}).on('search_collapsed', function (e) {

    marker.eachLayer(function (layer) { //restore feature color
        marker.resetStyle(layer);
    });
});

map.addControl(searchControl); //inizialize search control  
}       
$.getJSON('http://staging-lrsm.anagraph.io/wp-json/wp/v2/story', 
        function(stories) {
        stories.map(renderStory);

        })

  </script>
</body>
</html>
  • the leaflet-search library requires you to add submit the search data to be indexed by searchCtrl.indexFeatures(jsonData, ['name', 'company', 'details']);. And it appears that it is expecting a GeoJSON feature collection. – Adam Paxton Jun 3 '17 at 20:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.