- Posts: 89
- Thank you received: 0
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
- Topic Author
- Offline
- Premium Member
Less
More
4 years 4 weeks 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
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13035
- Thank you received: 4009
4 years 4 weeks ago #197018
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
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
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
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
4 years 3 weeks 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
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10117
- Thank you received: 3597
4 years 3 weeks ago - 4 years 3 weeks ago #197075
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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:
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:
To this:
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 3 weeks ago by tpartner.
The topic has been locked.
- KhemrajC
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
4 years 3 weeks 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
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10117
- Thank you received: 3597
4 years 3 weeks ago #197077
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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:
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
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
4 years 3 weeks ago - 4 years 3 weeks 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
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 3 weeks ago by KhemrajC.
The topic has been locked.
- Joffm
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 13035
- Thank you received: 4009
4 years 3 weeks ago #197085
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Replied by Joffm on topic Autocomplete text input to grab location details to zoom onto map
Hi,
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
obviously it was not easier if there arise two more questions.I found it easier with javascript to extract the location string:
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
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
4 years 3 weeks 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
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10117
- Thank you received: 3597
4 years 3 weeks ago #197111
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
- Topic Author
- Offline
- Premium Member
Less
More
- Posts: 89
- Thank you received: 0
4 years 3 weeks 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
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10117
- Thank you received: 3597
4 years 3 weeks ago #197114
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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.
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.