Using Algolia and Leaflet to show results based on what map shows. Having bugs on drag and zoom using...

0

I am creating a page that shows items on a map and results generated from Algolia. Currently I can search, add facets and date slider that changes the map. My current bug is that when I zoom in or drag, I have created a function that searches Algolia base on the insideBoundingBox the page gets the bounds then centers the map, then zooms in to show results. But then this is repeated multiple times.
What is the best way to cure this? Put a delay after the zoom has been processed? Or do I have to specify the zoom level so that it does not change?

This is my code:

search.addWidget(

  instantsearch.widgets.hits({

    container: '#hits',

    templates: {

      item: document.getElementById('hit-template').innerHTML,

      empty: "We didn't find any results for the search <em>"{{query}}"</em>"

    },

    transformItems: function(items) {

      renderMap(items);

      return items.slice(0, curentResultsPerPage);

    },

  })

);



const map = L.map(

  'mapid', {

    renderer: L.canvas(),

    zoom: 18,

    keepInView: true,

    dragging: !L.Browser.mobile,

  }

).setMaxZoom(18).setMinZoom(2);



let markers = ;



function renderMap(items) {

  if (typeof clusters !== 'undefined') {

    clusters.clearLayers();

    clusters.getBounds();

  }



  // remove current markers

  markers.forEach(marker => marker.remove());

  // clear the markers

  markers = ;



  // create cluster group

clusters = L.markerClusterGroup({

  chunkedLoading: true,

  showCoverageOnHover: false,

  maxClusterRadius: 60,

});

  // iterate through search results

  for (var i = 0; i < items.length; i++) {

    // get result

    var item = items[i];

    var geo = item._geoloc;

    // create marker

    var marker = L.marker([geo.lat, geo.lng], {icon: myIcon});



    // create marker popup

    marker.bindPopup(

      '<a href="' + item.field_relative_url + '">' + '<img class="thumbnail__map__icon" src="#"></a>'

    );



    // add the marker to the markers array

    markers.push(marker);



    // add the marker to the cluster group

    clusters.addLayer(marker);

  }



  // add the cluster group to the map

  map.addLayer(clusters);



  if (markers.length) {

    map.fitBounds(L.featureGroup(markers).getBounds());

  }

}



map.on('zoomend dragend', function (event) {

  var bnds = map.getBounds();

  var boundingBox = [

    bnds._northEast.lat,

    bnds._northEast.lng,

    bnds._southWest.lat,

    bnds._southWest.lng

  ];

if (bnds._northEast.lat > -180 && bnds._northEast.lat < 180 &&

  bnds._northEast.lng > -180 && bnds._northEast.lng < 180 &&

  bnds._southWest.lat > -180 && bnds._southWest.lat < 180 &&

  bnds._southWest.lng > -180 && bnds._southWest.lat < 180) {



  search.helper.setState(search.helper.state.setQueryParameter('insideBoundingBox', [boundingBox])).search()

}

});

// Main search function.

search.start(); 

javascript leaflet algolia

share|improve this question

edited Nov 22 '18 at 14:07

Peter Ayello Wright

asked Nov 22 '18 at 12:41

Peter Ayello WrightPeter Ayello Wright

316

add a comment | 

0

I am creating a page that shows items on a map and results generated from Algolia. Currently I can search, add facets and date slider that changes the map. My current bug is that when I zoom in or drag, I have created a function that searches Algolia base on the insideBoundingBox the page gets the bounds then centers the map, then zooms in to show results. But then this is repeated multiple times.
What is the best way to cure this? Put a delay after the zoom has been processed? Or do I have to specify the zoom level so that it does not change?

This is my code:

search.addWidget(

  instantsearch.widgets.hits({

    container: '#hits',

    templates: {

      item: document.getElementById('hit-template').innerHTML,

      empty: "We didn't find any results for the search <em>"{{query}}"</em>"

    },

    transformItems: function(items) {

      renderMap(items);

      return items.slice(0, curentResultsPerPage);

    },

  })

);



const map = L.map(

  'mapid', {

    renderer: L.canvas(),

    zoom: 18,

    keepInView: true,

    dragging: !L.Browser.mobile,

  }

).setMaxZoom(18).setMinZoom(2);



let markers = ;



function renderMap(items) {

  if (typeof clusters !== 'undefined') {

    clusters.clearLayers();

    clusters.getBounds();

  }



  // remove current markers

  markers.forEach(marker => marker.remove());

  // clear the markers

  markers = ;



  // create cluster group

clusters = L.markerClusterGroup({

  chunkedLoading: true,

  showCoverageOnHover: false,

  maxClusterRadius: 60,

});

  // iterate through search results

  for (var i = 0; i < items.length; i++) {

    // get result

    var item = items[i];

    var geo = item._geoloc;

    // create marker

    var marker = L.marker([geo.lat, geo.lng], {icon: myIcon});



    // create marker popup

    marker.bindPopup(

      '<a href="' + item.field_relative_url + '">' + '<img class="thumbnail__map__icon" src="#"></a>'

    );



    // add the marker to the markers array

    markers.push(marker);



    // add the marker to the cluster group

    clusters.addLayer(marker);

  }



  // add the cluster group to the map

  map.addLayer(clusters);



  if (markers.length) {

    map.fitBounds(L.featureGroup(markers).getBounds());

  }

}



map.on('zoomend dragend', function (event) {

  var bnds = map.getBounds();

  var boundingBox = [

    bnds._northEast.lat,

    bnds._northEast.lng,

    bnds._southWest.lat,

    bnds._southWest.lng

  ];

if (bnds._northEast.lat > -180 && bnds._northEast.lat < 180 &&

  bnds._northEast.lng > -180 && bnds._northEast.lng < 180 &&

  bnds._southWest.lat > -180 && bnds._southWest.lat < 180 &&

  bnds._southWest.lng > -180 && bnds._southWest.lat < 180) {



  search.helper.setState(search.helper.state.setQueryParameter('insideBoundingBox', [boundingBox])).search()

}

});

// Main search function.

search.start(); 

javascript leaflet algolia

share|improve this question

edited Nov 22 '18 at 14:07

Peter Ayello Wright

asked Nov 22 '18 at 12:41

Peter Ayello WrightPeter Ayello Wright

316

add a comment | 

0

0

0

I am creating a page that shows items on a map and results generated from Algolia. Currently I can search, add facets and date slider that changes the map. My current bug is that when I zoom in or drag, I have created a function that searches Algolia base on the insideBoundingBox the page gets the bounds then centers the map, then zooms in to show results. But then this is repeated multiple times.
What is the best way to cure this? Put a delay after the zoom has been processed? Or do I have to specify the zoom level so that it does not change?

This is my code:

search.addWidget(

  instantsearch.widgets.hits({

    container: '#hits',

    templates: {

      item: document.getElementById('hit-template').innerHTML,

      empty: "We didn't find any results for the search <em>"{{query}}"</em>"

    },

    transformItems: function(items) {

      renderMap(items);

      return items.slice(0, curentResultsPerPage);

    },

  })

);



const map = L.map(

  'mapid', {

    renderer: L.canvas(),

    zoom: 18,

    keepInView: true,

    dragging: !L.Browser.mobile,

  }

).setMaxZoom(18).setMinZoom(2);



let markers = ;



function renderMap(items) {

  if (typeof clusters !== 'undefined') {

    clusters.clearLayers();

    clusters.getBounds();

  }



  // remove current markers

  markers.forEach(marker => marker.remove());

  // clear the markers

  markers = ;



  // create cluster group

clusters = L.markerClusterGroup({

  chunkedLoading: true,

  showCoverageOnHover: false,

  maxClusterRadius: 60,

});

  // iterate through search results

  for (var i = 0; i < items.length; i++) {

    // get result

    var item = items[i];

    var geo = item._geoloc;

    // create marker

    var marker = L.marker([geo.lat, geo.lng], {icon: myIcon});



    // create marker popup

    marker.bindPopup(

      '<a href="' + item.field_relative_url + '">' + '<img class="thumbnail__map__icon" src="#"></a>'

    );



    // add the marker to the markers array

    markers.push(marker);



    // add the marker to the cluster group

    clusters.addLayer(marker);

  }



  // add the cluster group to the map

  map.addLayer(clusters);



  if (markers.length) {

    map.fitBounds(L.featureGroup(markers).getBounds());

  }

}



map.on('zoomend dragend', function (event) {

  var bnds = map.getBounds();

  var boundingBox = [

    bnds._northEast.lat,

    bnds._northEast.lng,

    bnds._southWest.lat,

    bnds._southWest.lng

  ];

if (bnds._northEast.lat > -180 && bnds._northEast.lat < 180 &&

  bnds._northEast.lng > -180 && bnds._northEast.lng < 180 &&

  bnds._southWest.lat > -180 && bnds._southWest.lat < 180 &&

  bnds._southWest.lng > -180 && bnds._southWest.lat < 180) {



  search.helper.setState(search.helper.state.setQueryParameter('insideBoundingBox', [boundingBox])).search()

}

});

// Main search function.

search.start(); 

javascript leaflet algolia

share|improve this question

edited Nov 22 '18 at 14:07

Peter Ayello Wright

asked Nov 22 '18 at 12:41

Peter Ayello WrightPeter Ayello Wright

316

I am creating a page that shows items on a map and results generated from Algolia. Currently I can search, add facets and date slider that changes the map. My current bug is that when I zoom in or drag, I have created a function that searches Algolia base on the insideBoundingBox the page gets the bounds then centers the map, then zooms in to show results. But then this is repeated multiple times.
What is the best way to cure this? Put a delay after the zoom has been processed? Or do I have to specify the zoom level so that it does not change?

This is my code:

search.addWidget(

  instantsearch.widgets.hits({

    container: '#hits',

    templates: {

      item: document.getElementById('hit-template').innerHTML,

      empty: "We didn't find any results for the search <em>"{{query}}"</em>"

    },

    transformItems: function(items) {

      renderMap(items);

      return items.slice(0, curentResultsPerPage);

    },

  })

);



const map = L.map(

  'mapid', {

    renderer: L.canvas(),

    zoom: 18,

    keepInView: true,

    dragging: !L.Browser.mobile,

  }

).setMaxZoom(18).setMinZoom(2);



let markers = ;



function renderMap(items) {

  if (typeof clusters !== 'undefined') {

    clusters.clearLayers();

    clusters.getBounds();

  }



  // remove current markers

  markers.forEach(marker => marker.remove());

  // clear the markers

  markers = ;



  // create cluster group

clusters = L.markerClusterGroup({

  chunkedLoading: true,

  showCoverageOnHover: false,

  maxClusterRadius: 60,

});

  // iterate through search results

  for (var i = 0; i < items.length; i++) {

    // get result

    var item = items[i];

    var geo = item._geoloc;

    // create marker

    var marker = L.marker([geo.lat, geo.lng], {icon: myIcon});



    // create marker popup

    marker.bindPopup(

      '<a href="' + item.field_relative_url + '">' + '<img class="thumbnail__map__icon" src="#"></a>'

    );



    // add the marker to the markers array

    markers.push(marker);



    // add the marker to the cluster group

    clusters.addLayer(marker);

  }



  // add the cluster group to the map

  map.addLayer(clusters);



  if (markers.length) {

    map.fitBounds(L.featureGroup(markers).getBounds());

  }

}



map.on('zoomend dragend', function (event) {

  var bnds = map.getBounds();

  var boundingBox = [

    bnds._northEast.lat,

    bnds._northEast.lng,

    bnds._southWest.lat,

    bnds._southWest.lng

  ];

if (bnds._northEast.lat > -180 && bnds._northEast.lat < 180 &&

  bnds._northEast.lng > -180 && bnds._northEast.lng < 180 &&

  bnds._southWest.lat > -180 && bnds._southWest.lat < 180 &&

  bnds._southWest.lng > -180 && bnds._southWest.lat < 180) {



  search.helper.setState(search.helper.state.setQueryParameter('insideBoundingBox', [boundingBox])).search()

}

});

// Main search function.

search.start(); 

javascript leaflet algolia

javascript leaflet algolia

share|improve this question

edited Nov 22 '18 at 14:07

Peter Ayello Wright

asked Nov 22 '18 at 12:41

Peter Ayello WrightPeter Ayello Wright

316

share|improve this question

edited Nov 22 '18 at 14:07

Peter Ayello Wright

asked Nov 22 '18 at 12:41

Peter Ayello WrightPeter Ayello Wright

316

share|improve this question

share|improve this question

edited Nov 22 '18 at 14:07

Peter Ayello Wright

edited Nov 22 '18 at 14:07

Peter Ayello Wright

edited Nov 22 '18 at 14:07

Peter Ayello Wright

asked Nov 22 '18 at 12:41

Peter Ayello WrightPeter Ayello Wright

316

asked Nov 22 '18 at 12:41

Peter Ayello WrightPeter Ayello Wright

316

asked Nov 22 '18 at 12:41

Peter Ayello WrightPeter Ayello Wright

316

316

add a comment | 

add a comment | 

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431273%2fusing-algolia-and-leaflet-to-show-results-based-on-what-map-shows-having-bugs-o%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

active

oldest

votes

active

oldest

votes

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431273%2fusing-algolia-and-leaflet-to-show-results-based-on-what-map-shows-having-bugs-o%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here