Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Autocomplete text input to grab location details to zoom onto map

  • KhemrajC
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 9 months ago #197015 by KhemrajC
Autocomplete text input to grab location details to zoom onto map was created by KhemrajC
Hi,

Following my earlier post of grabbing the GPS coordinates and accordingly zooming to the map, this was brilliantly answered by JOFFM who adapted a solution by TPARTNER.

www.limesurvey.org/forum/can-i-do-this-w...that-location#196230

www.limesurvey.org/community/forums/can-...coordinates?start=30

I am sticking to OpenStreetMap since Google Map is buggy for mobile display under LS Version 3.22.9+200317. This bug has already been reported.

The issue is that OpenStreetMap is not enough covered as in Google Map, the respondent would find it cumbersome to locate his area.

Also, there is the possibility that the GPS is not enabled and no default position is obtained.

As a way of overcoming the above, I am wishing of having an option of an autocomplete text input when the location value is absent.

The Autocomplete would refer to a CSV or JSON file which has the name of localities and their corresponding location.

I came across this post by JOFFM:

www.limesurvey.org/forum/german-forum/12...t-in-fragen-anzeigen

Once the user starts typing, the autocomplete would bring suggestion and the selected choice should rope in the location data to zoom the map where the user may still fine tune the position of the marker.

I am attaching a raw version of the CSV and JSON file.

Please help me out to find a solution.

Thank you very much.

Best regards
Attachments:
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago #197018 by Joffm
Replied by Joffm on topic Autocomplete text input to grab location details to zoom onto map
You find everything here:
www.limesurvey.org/forum/german-forum/12...agen-anzeigen#194744

In that example the csv file has the structure
zipcode city1
zipcode city2
You search for zipcode and get the whole text

In your case the structure could be
city,long,lat
You search for city and get the full text.
Afterwards you use some of the implemented string functions to separate longitude and latitude.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • KhemrajC
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 9 months ago #197074 by KhemrajC
Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map
Hi,

I understood the logic behind.

I imported:

www.limesurvey.org/media/kunena/attachme...31211_2020-03-01.lss

And the resources as well.

When survey is run, nothing is now happening at the suggestion input for autocomplete after typing 999.

LS Version 3.22.9+200317

Any particular settings?

Does it require Jquery UI which is not included in LS?

I remember Tpartner saying that in a post, for Jquery Autocomplete to function.

Please assist.

Thanks and regards
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago - 4 years 9 months ago #197075 by tpartner
Replied by tpartner on topic Autocomplete text input to grab location details to zoom onto map
Assuming you have all of the resouces in the correct folder, jQuery UI is included by this line in the question source:

Code:
<script src="/survey/upload/surveys/831211/files/jquery-ui.min.js"></script>

I think the problem is that the minimum length for the autocomplete ia set to 5 which is the full length of the postal code. This effectively means that you need to enter the entire postal code before the autocomplete kicks in.

Change this line:

Code:
minLength: 5,

To this:

Code:
minLength: 2,

Code:
Gib die PLZ ein
<link href="/upload/surveys/831211/files/jquery-ui.min.css" rel="stylesheet" type="text/css" /> 
<script src="/upload/surveys/831211/files/jquery-ui.min.js"></script>
<script src="/upload/surveys/831211/files/jquery.csv.min.js"></script>
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:complete',function() {
    var url = "/limeSurvey3x/upload/surveys/831211/files/plzort.csv";
 
    var Names = new Array();
 
    $.get(url,function(data){
      fullArray = $.csv.toArrays(data);
      $(fullArray).each(function(i, item){
        Names.push(item[0]);
      });
      $("#question{QID} input[type=text]").autocomplete({
        minLength: 2,
        source: Names
      });
    });  
  });  
</script>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 4 years 9 months ago by tpartner.
The topic has been locked.
  • KhemrajC
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 9 months ago #197076 by KhemrajC
Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map
Hi,

Yes indeed, I had to enter the five digits number.

Now it works and I move on to adapt to my survey.

I just want another clarification regarding javascript libraries.

Regards the inclusion of external javascript libraries, it is always recommended to have it the head section but for this case, it ended working by having them in the upload folder.

I guess not all external libraries, in particular other jquery autocomplete plugins, would allow that?

Thanks and regards
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago #197077 by tpartner
Replied by tpartner on topic Autocomplete text input to grab location details to zoom onto map
You need to include the library before any functions are called. So, yes it is recommended to place them in the <head> element but in this case nothing is called until the page is fully loaded so it's okay to include the libraries in the question source.

This ensures that nothing happens until the page is fully loaded:

Code:
$(document).on('ready pjax:complete',function() {
...
});
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • KhemrajC
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 9 months ago - 4 years 9 months ago #197081 by KhemrajC
Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map
Hi,

Thanks for the previous clarification.

The autocomplete is obviously working and the selected string ( for e.g, "This Place '-20.10278 57.67639'" ) required some manipulation. I found it easier with javascript to extract the location string:

<script>
var str = "This Place '-20.10278 57.67639'";
var pos = str.indexOf("'") + 1;
var pos2 = str.lastIndexOf("'");
var pos3 = str.slice(pos,pos2);
</script>

Variable pos3 returns -20.10278 57.67639 and I need to pass it on to a parameter for the next question.

My queries are:

(1) How to grab the value of the selected autocomplete input?
(2) After manipulating that input string, how to pass it to a parameter of the next question, for this case it would be the default location?

Thanks and regards
Last edit: 4 years 9 months ago by KhemrajC.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago #197085 by Joffm
Replied by Joffm on topic Autocomplete text input to grab location details to zoom onto map
Hi,

I found it easier with javascript to extract the location string:

obviously it was not easier if there arise two more questions. ;)

Assuming your question is "Q0" and the result string is This Place '-20.10278 57.67639'
In my opinion the simplest way is to pass the coords to the next question is
by entering this equation to the appropriate field ("start position")
{substr(Q0,strpos(Q0,"'")+1)}

But this means you will pass this '-20.10278 57.67639'
Do you really want to pass the single quotes?
Is the syntax really latitude_blank_longitude? Or is it separated by colon or comma?
You should adapt your csv to these requirements, like
My Place,-20.10278;57.67639
Then you will get a parameter - colon separated - by entering
{substr(Q0,strpos(Q0,",")+1)}

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • KhemrajC
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 9 months ago #197108 by KhemrajC
Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map
Hi,

With reference to your smart solution for autocompletion with a csv plugin for jquery, I noticed that the CSV was one single string representing two items separated by a space and the autocompletion brought forward that whole single string which you then splitted with ES for the next questions.

So I adapted my CSV to be of two fields separated by a space, one for the name string and the other for a combined location string.

The Apostrophe caused a lot of complications and it was not detected even after using chr(39).

Though in the end, I managed to extract the coordinates from the next question through ES, I am now adapting it to your trick which is simpler and better. After applying your proposed solution, I would then need do a replacement of the semicolon with space as is required by the default location of a map based question. And you taught me that already.

My hurdle is that I want only the Name to be displayed in the autocompletion suggestion input. I think the jquery grab one row as a string to insert it into an array as one element. Now it displays as "This Place '-20.10278 57.67639'"

Is it possible to display the Name only ?

Is it possible to grab the corresponding coordinates in the background after a name is selected using the jquery csv?

Thank you very much.

Best regards
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago #197111 by tpartner
Replied by tpartner on topic Autocomplete text input to grab location details to zoom onto map
Can you attach the CSV that you are now working with?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • KhemrajC
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 9 months ago #197113 by KhemrajC
Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map
Hi,

Please find attached the raw file, modified as suggested by Joffm and mine before posting the queries.

Thanks and regards
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 9 months ago #197114 by tpartner
Replied by tpartner on topic Autocomplete text input to grab location details to zoom onto map
My understanding is that you would like to select a location via autocomplete and have the associated lat/long coordinates saved to use as default for a later map question.

But I don't see how that will be possible with the attached CSV files as they have many location names with multiple sets of coordinates.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source