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

More

4 years 4 days ago #197495 by KhemrajC

Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map

Hi,

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

Thanks and regards

Attachments:

Humanitarian.PNG

The topic has been locked.

KhemrajC
Topic Author
Offline
Premium Member

More

4 years 4 days ago #197529 by KhemrajC

Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map

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:

...TCH_972388.lss

The topic has been locked.

KhemrajC
Topic Author
Offline
Premium Member

More

4 years 3 days ago #197612 by KhemrajC

Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map

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

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

4 years 2 days ago #197693 by tpartner

Replied by tpartner on topic Autocomplete text input to grab location details to zoom onto map

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.

The topic has been locked.

KhemrajC
Topic Author
Offline
Premium Member

More

4 years 2 days ago #197700 by KhemrajC

Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map

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:

...2020-04-22.PNG

The topic has been locked.

KhemrajC
Topic Author
Offline
Premium Member

More

4 years 2 days ago #197702 by KhemrajC

Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map

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

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

4 years 2 days ago - 4 years 2 days ago #197744 by tpartner

Replied by tpartner on topic Autocomplete text input to grab location details to zoom onto map

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

Code:

<script type="text/javascript" charset="utf-8">
 
  $(document).on('ready pjax:complete',function() {
 
    $('#map_{SGQ}').css({
      'position': 'absolute',
      'left': '-9999em'      
    });    
 
    setTimeout(function() {
      $('.leaflet-control-layers-base label:eq(1) :radio').trigger('click');
 
      $('#map_{SGQ}').css({
        'position': 'relative',
        'left': 'auto'      
      });    
    }, 1000);
 
  });
</script>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Last edit: 4 years 2 days ago by tpartner.

The following user(s) said Thank You: KhemrajC

The topic has been locked.

KhemrajC
Topic Author
Offline
Premium Member

More

4 years 1 day ago #197823 by KhemrajC

Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map

Hi TPartner,

You are a real JQuery master!!!

The layer is indeed being automatically selected.

Thanks a lot.

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

LSS are attached to these posts.

I am waiting for your reply to know about the next step forward.

Thanks and regards

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

4 years 1 day ago - 4 years 1 day ago #197865 by tpartner

Replied by tpartner on topic Autocomplete text input to grab location details to zoom onto map

This script will apply autocomplete to the first sub-question of a multiple-short-text question and add a button to the third sub-question that will get the GPS coordinates (if allowed).

Both the autocomplete function and the getGPS() function will load the second sub-question with GPS coordinates formatted for use as the default location for the map.

Code:

<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}');
 
    var url = "/upload/surveys/{SID}/files/NAMES_cleaned.csv";
 
    // Hide the second input
    $('.question-item:eq(1)', thisQuestion).hide();
 
    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(/;/, ' ')).trigger('keyup');
          $('input[type=text]:eq(2)', thisQuestion).val('').trigger('keyup');
        }
      }).on('change', function(e) {
        $('input[type=text]:eq(1)', thisQuestion).val(Coords[$.trim($(this).val()).toLowerCase()].replace(/;/, ' ')).trigger('keyup');
        $('input[type=text]:eq(2)', thisQuestion).val('').trigger('keyup');
      });
    });
 
    // Insert the GPS button
    $('input[type=text]:eq(2)', thisQuestion).before('<button type="button" class="btn btn-primary gps-button" style="margin-bottom: 5px;">Get GPS Coordinates</button>');
 
    // Get GPS coordinates
    $('.gps-button', thisQuestion).on('click', function(e) {
      getGPS();
    });
    function getGPS() {
      disableButtons();
      if (navigator.geolocation) {  
        navigator.geolocation.getCurrentPosition(showGPS, gpsError);
      } else {  
        $('input[type=text]:eq(2)', thisQuestion).val('No GPS Functionality');
        enableButtons();
      }
    } 
    function gpsError(error) {
      alert('GPS Error: '+error.code+', '+error.message);
      enableButtons();
    } 
    function showGPS(position) {
      $('input[type=text]:eq(0)', thisQuestion).val('').trigger('keyup');
      $('input[type=text]:eq(1)', thisQuestion).val(position.coords.latitude+' '+position.coords.longitude).trigger('keyup');
      $('input[type=text]:eq(2)', thisQuestion).val(position.coords.latitude+';'+position.coords.longitude).trigger('keyup');
      enableButtons();
    }
    function disableButtons() {
      $('#ls-button-submit').prop('disabled', true);
      $('.gps-button', thisQuestion).prop('disabled', true);
    }
    function enableButtons() {
      $('#ls-button-submit').prop('disabled', false);
      $('.gps-button', thisQuestion).prop('disabled', false);
    }
  });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...1211.lss
File Size:57 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Last edit: 4 years 1 day ago by tpartner.

The following user(s) said Thank You: KhemrajC

The topic has been locked.

KhemrajC
Topic Author
Offline
Premium Member

More

4 years 19 hours ago #197886 by KhemrajC

Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map

Hi TPartner,

Just tested it and as usual it is doing the job. Hats off.

Is there any possibility to avoid the second sub question to accept input by the user though it is not affecting any functionality?

Also, I wish that once the autocomplete is selected or the gps button is successful, that next button is automatically activated to the map.

Thanks a lot.

Best regards

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

4 years 15 hours ago #197895 by tpartner

Replied by tpartner on topic Autocomplete text input to grab location details to zoom onto map

The requirements here keep escalating. I'm afraid I'm done.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The following user(s) said Thank You: DenisChenu

The topic has been locked.

KhemrajC
Topic Author
Offline
Premium Member

More

4 years 15 hours ago #197897 by KhemrajC

Replied by KhemrajC on topic Autocomplete text input to grab location details to zoom onto map

Hi,

You have really helped at the most complicated section and I am learning a lot from your codes.

I have now also shifted my attention to other part of the questionnaire.

Thanks a lot.

Best regards

The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Autocomplete text input to grab location details to zoom onto map

File Attachment:

Lime-years ahead

Legal

About Us

Open Source