Autocomplete text input to grab location details to zoom onto map

More
2 months 2 weeks ago #197164 by tpartner

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?

Try this (untested):

<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(/;/, ' '));
					// Auto-submit
					if($.trim($('input[type=text]:eq(1)', thisQuestion).val()) != '') {
						$('#ls-button-submit').trigger('click');
					}
				}
			}).on('change', function(e) {
				$('input[type=text]:eq(1)', thisQuestion).val(Coords[$.trim($(this).val()).toLowerCase()].replace(/;/, ' '));
				// Auto-submit
				if($.trim($('input[type=text]:eq(1)', thisQuestion).val()) != '') {
					$('#ls-button-submit').trigger('click');
				}
			});
		});	
	});	
</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

Please Log in to join the conversation.

More
2 months 2 weeks ago - 2 months 2 weeks ago #197166 by tpartner

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

Try this hack (in this example, the location question has code "Q1" and the coordinates sub-question has code "SQ002").

(also untested) :)

<script type="text/javascript" charset="utf-8">	
 
	$(document).on('ready pjax:complete',function() {
 
		var latLong = '{Q1_SQ002}'.split(' ');
 
		setTimeout(function() {
			$('#answer_lat{SGQ}_c').val($.trim(latLong[0]));
			$('#answer_lng{SGQ}_c').val($.trim(latLong[1])).trigger('blur');
		}, 1000);
 
	});
</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 2 weeks ago by tpartner.

Please Log in to join the conversation.

More
2 months 2 weeks ago #197169 by KhemrajC

Please Log in to join the conversation.

More
2 months 2 weeks ago - 2 months 2 weeks ago #197170 by KhemrajC
Hi,

I added the hack code the second question for the map display.

It was supposed after a delay, to assign the Lat and Lon separately in their respective input boxes.

Then the marker would be displayed.

At present, it is not passing the values to the input boxes, hence the marker is not displayed.

Thanks and regards
Last edit: 2 months 2 weeks ago by KhemrajC.

Please Log in to join the conversation.

More
2 months 2 weeks ago #197171 by tpartner
It would help to know which code snippet you are referring to.

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 2 weeks ago #197172 by KhemrajC
Pls see above, the hack code.

Thanks and regards

Please Log in to join the conversation.

More
2 months 2 weeks ago - 2 months 2 weeks ago #197173 by tpartner
Place it in the source of the map question.

(make sure that the question and sub-question codes are correct)

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 2 weeks ago by tpartner.

Please Log in to join the conversation.

More
2 months 2 weeks ago #197174 by KhemrajC
Hi,

That is so good!

Thanks a lot.

Best regards

Please Log in to join the conversation.

More
2 months 2 weeks ago #197494 by KhemrajC
Hi,

Trust you are well.

Following last main working code for location selection via autocomplete, I am willing to include a choice to the user of either choosing his location by GPS or from the autocomplete input to then zoom to the map. Should the GPS not be available the autocomplete input would remain the default as it is.

I do not know of how to add a button or checkbox next to the autocomplete input. This would be mixing question types!

The only way I can do it is to have a single choice question and two conditional upcoming questions for either GPS Map or Autocomplete Input Map. However this is not a practical way out to afterwards deal with location details from two separate fields. I want to stick with a single map.

Any idea?


Thanks a lots


Best regards
Attachments:

Please Log in to join the conversation.

More
2 months 2 weeks ago #197495 by KhemrajC
Hi,

Is it possible to have map style set to Humanitarian on load?

Thanks and regards
Attachments:

Please Log in to join the conversation.

More
2 months 2 weeks ago #197529 by KhemrajC
Hi,

I attempted by mixing the codes for the GPS and Autocomplete by using a switch case. Only the GPS executes.

Whatever else I tried, the autocomplete just does not execute when it is mixed with the GPS code.

LSS attached and here is the code:

Location:<button class="gpsLink" type="button">Get GPS Data</button><script type="text/javascript" charset="utf-8">

<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() {


var x = 0;
myFunction(x);

$('.gpsLink').click(function(){
var x = 1;
myFunction(x);
});


function myFunction(x) {

switch (x) {

case 0:

// 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(/;/, ' '));
// Auto-submit
if($.trim($('input[type=text]:eq(1)', thisQuestion).val()) != '') {
$('#ls-button-submit').trigger('click');
}
}
}).on('change', function(e) {
$('input[type=text]:eq(1)', thisQuestion).val(Coords[$.trim($(this).val()).toLowerCase()].replace(/;/, ' '));
// Auto-submit
if($.trim($('input[type=text]:eq(1)', thisQuestion).val()) != '') {
$('#ls-button-submit').trigger('click');
}

});
});

alert("Case 0");
break;

case 1:

getGPS();

function getGPS() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showGPS, gpsError);
} else {
$("#answer{SGQ}SQ003").val('No GPS Functionality');
}
}

function gpsError(error) {
alert('GPS Error: '+error.code+', '+error.message);
}

function showGPS(position) {
$("#answer{SGQ}SQ003").val(position.coords.latitude+';'+position.coords.longitude).trigger('keyup');
}

alert("Case 1");
break;

}

}


});
</script>



Any idea?

Thanks and regards
Attachments:

Please Log in to join the conversation.

More
2 months 2 weeks ago #197612 by KhemrajC
Hi,

I attempted it using:

$('#question{QID} input:radio[name=leaflet-base-layers]:eq(1)').prop('checked', true).trigger('change');

Logically, it should be correct that function to access that specific second radio button.

However, nothing happens, may be cause the radio selection are hidden and only show up upon mouseover!

Please assist.

Thanks regards

Please Log in to join the conversation.

More
2 months 2 weeks ago #197693 by tpartner

I attempted it using:

Attempted what?

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 2 weeks ago #197700 by KhemrajC
Hi TPartner,

Glad to hear back from you. Trust all is ok.

As per previous related posts:


Is it possible to have the map style set to Humanitarian on load (pls see attachment)?


Then I tried this:

$('#question{QID} input:radio[name=leaflet-base-layers]:eq(1)').prop('checked', true).trigger('change');


Logically, it should be correct for that function to access that specific second radio button.

However, nothing happens, may be cause the radio selection are hidden and only show up upon mouseover!


Please figure out my mistake.


Thanks and regards
Attachments:

Please Log in to join the conversation.

More
2 months 2 weeks ago #197702 by KhemrajC
Hi TPartner,

Please see also see my previous posts:


I wish to achieve this,

www.limesurvey.org/forum/can-i-do-this-w...-map?start=15#197494

And this is my attempt,

www.limesurvey.org/forum/can-i-do-this-w...-map?start=15#197529


Both have the LSS attached.


Thank you very much.


Best regards

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now