Autocomplete text input to grab location details to zoom onto map

More
2 months 4 weeks ago #197015 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:

Please Log in to join the conversation.

LimeSurvey Partners
More
2 months 4 weeks ago #197018 by Joffm
You find everything here:
https://www.limesurvey.org/forum/german-forum/120374-postleitzahl-eintippen,-name-der-stadt-in-fragen-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

Please Log in to join the conversation.

More
2 months 4 weeks ago #197074 by KhemrajC
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

Please Log in to join the conversation.

More
2 months 4 weeks ago - 2 months 4 weeks ago #197075 by tpartner
Assuming you have all of the resouces in the correct folder, jQuery UI is included by this line in the question source:

<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:

minLength: 5,

To this:

minLength: 2,

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.
Official LimeSurvey Partner - partnersurveys.com
Last edit: 2 months 4 weeks ago by tpartner.

Please Log in to join the conversation.

More
2 months 4 weeks ago #197076 by KhemrajC
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

Please Log in to join the conversation.

More
2 months 4 weeks ago #197077 by tpartner
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:

$(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.
Official LimeSurvey Partner - partnersurveys.com

Please Log in to join the conversation.

More
2 months 4 weeks ago - 2 months 4 weeks ago #197081 by KhemrajC
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: 2 months 4 weeks ago by KhemrajC.

Please Log in to join the conversation.

More
2 months 4 weeks ago #197085 by Joffm
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

Please Log in to join the conversation.

More
2 months 4 weeks ago #197108 by KhemrajC
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

Please Log in to join the conversation.

More
2 months 4 weeks ago #197111 by tpartner
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.
Official LimeSurvey Partner - partnersurveys.com

Please Log in to join the conversation.

More
2 months 4 weeks ago #197113 by KhemrajC
Hi,

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

Thanks and regards
Attachments:

Please Log in to join the conversation.

More
2 months 4 weeks ago #197114 by tpartner
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.
Official LimeSurvey Partner - partnersurveys.com
Attachments:

Please Log in to join the conversation.

More
2 months 4 weeks ago #197116 by KhemrajC
Hi,

I am aware that I have to clean for duplicate locations.

I just mildly trim unnecessary data from the raw format as available at the geonames website.

For now, I am just focusing on the logic, preparation of questionnaire and coding.

With help from the forum, it is working but the autocomplete displays the name along with the coordinates which does not add any value.

I would not have done all these if there was not a bug in the Google Map for mobile display. As you instructed, I have already reported the bug.

Users are not map oriented yet and the survey is focused on geographic distribution. All derived statistics would be map based.

So I am trying my best to guide the respondent through either their embedded location data from their mobile phone or with the autocomplete for places to zoom to their area where they may fine tune.

Many place and street names are missing in openstreetmap for my country. Google Map is a bit better.

I am just trying my best to come up with something for the community and you guys are really helping out.

For now, I am doing it with a hosted version of LS. Thanks to the Host Provider as well.

Thanks and regards

Please Log in to join the conversation.

More
2 months 4 weeks ago - 2 months 4 weeks ago #197130 by tpartner
Okay, assuming that you are using a clean version of Joffm's CSV (two columns, no duplicates) I would suggest:

- Use a multiple-short-text question with two sub-questions
- Hide the second sub-question
- Apply autocomplete to the first sub-question to load it with the location name (first CSV column)
- Use the select and change events to load the second sub-question with the location coordinates (second CSV column)

Then, you can use the value in the second sub-question as default coordinates for a map or elsewhere in the survey.

The script in the multiple-short-text question would be like this:

<link href="/upload/surveys/{SID}/files/jquery-ui.min.css" rel="stylesheet" type="text/css" /> 
<script src="/upload/surveys/{SID}/files/jquery-ui.min.js"></script>
<script src="/upload/surveys/{SID}/files/jquery.csv.min.js"></script>
<script type="text/javascript" charset="utf-8">	
 
	$(document).on('ready pjax:complete',function() {
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// Hide the second input
		$('.question-item:eq(1)', thisQuestion).hide();
 
		var url = "/upload/surveys/{SID}/files/NAMES_cleaned.csv";
 
		var Names = [];
		var Coords = { };
 
		$.get(url, function(data){
			fullArray = $.csv.toArrays(data);
			$(fullArray).each(function(i, item){
				Names.push(item[0]);
				Coords[item[0].toLowerCase()] = item[1];
			});
 
			// Initiate the Autocomplete plugin
			$('input[type=text]:eq(0)', thisQuestion).autocomplete({
				minLength: 2,
				source: Names,
				select: function(event, ui) {
					$('input[type=text]:eq(1)', thisQuestion).val(Coords[ui.item.value.toLowerCase()].replace(/;/, ' '));
				}
			}).on('change', function(e) {
				$('input[type=text]:eq(1)', thisQuestion).val(Coords[$.trim($(this).val()).toLowerCase()].replace(/;/, ' '));
			});
		});	
	});	
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...2111.lss
File Size:37 KB


Cleaned CSV attached:

File Attachment:

File Name: NAMES_cleaned.csv
File Size:15 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
Last edit: 2 months 4 weeks ago by tpartner.
The following user(s) said Thank You: Joffm

Please Log in to join the conversation.

More
2 months 4 weeks ago #197161 by KhemrajC
Hi,

It runs out marvellously.

This forum is just so alive and you guys are making so.

Is it possible that after the selection for the autocompletion, the NEXT is button is automatically clicked to immediately display the map which is in the next question?

For google map, the marker is drawn.

Is it possible to have it equally drawn for openstreetmap, now its not the case?

Thanks and regards

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now