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

More
5 years 5 months 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
The topic has been locked.
More
5 years 5 months ago - 5 years 5 months 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:

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}');
 
    // 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.18 KB


Cleaned CSV attached:

File Attachment:

File Name: NAMES_cleaned.csv
File Size:14.68 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 5 years 5 months ago by tpartner.
The following user(s) said Thank You: Joffm
The topic has been locked.
More
5 years 5 months 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
The topic has been locked.
More
5 years 5 months 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):

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}');
 
    // 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.
The topic has been locked.
More
5 years 5 months ago - 5 years 5 months 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) :)

Code:
<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.
Last edit: 5 years 5 months ago by tpartner.
The topic has been locked.
More
5 years 5 months ago #197169 by KhemrajC
The topic has been locked.
More
5 years 5 months ago - 5 years 5 months 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: 5 years 5 months ago by KhemrajC.
The topic has been locked.
More
5 years 5 months 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.
The topic has been locked.
More
5 years 5 months ago #197172 by KhemrajC
Pls see above, the hack code.

Thanks and regards
The topic has been locked.
More
5 years 5 months ago - 5 years 5 months 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.
Last edit: 5 years 5 months ago by tpartner.
The topic has been locked.
More
5 years 5 months ago #197174 by KhemrajC
Hi,

That is so good!

Thanks a lot.

Best regards
The topic has been locked.
More
5 years 4 months 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
The topic has been locked.
More
5 years 4 months ago #197495 by KhemrajC
Hi,

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

Thanks and regards
The topic has been locked.
More
5 years 4 months 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
The topic has been locked.
More
5 years 4 months 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
The topic has been locked.
Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose