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 9 months ago #197116 by KhemrajC

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

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.

tpartner
Offline
LimeSurvey Community Team

More

4 years 9 months ago - 4 years 9 months ago #197130 by tpartner

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

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

Last edit: 4 years 9 months ago by tpartner.

The following user(s) said Thank You: Joffm

The topic has been locked.

KhemrajC
Topic Author
Offline
Premium Member

More

4 years 9 months ago #197161 by KhemrajC

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

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.

tpartner
Offline
LimeSurvey Community Team

More

4 years 9 months ago #197164 by tpartner

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

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.

tpartner
Offline
LimeSurvey Community Team

More

4 years 9 months ago - 4 years 9 months ago #197166 by tpartner

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

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: 4 years 9 months ago by tpartner.

The topic has been locked.

KhemrajC
Topic Author
Offline
Premium Member

More

4 years 9 months ago #197169 by KhemrajC

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

Working great! Thanks

The topic has been locked.

KhemrajC
Topic Author
Offline
Premium Member

More

4 years 9 months ago - 4 years 9 months ago #197170 by KhemrajC

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

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: 4 years 9 months ago by KhemrajC.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

4 years 9 months ago #197171 by tpartner

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

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.

KhemrajC
Topic Author
Offline
Premium Member

More

4 years 9 months ago #197172 by KhemrajC

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

Pls see above, the hack code.

Thanks and regards

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

4 years 9 months ago - 4 years 9 months ago #197173 by tpartner

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

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: 4 years 9 months ago by tpartner.

The topic has been locked.

KhemrajC
Topic Author
Offline
Premium Member

More

4 years 9 months ago #197174 by KhemrajC

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

Hi,

That is so good!

Thanks a lot.

Best regards

The topic has been locked.

KhemrajC
Topic Author
Offline
Premium Member

More

4 years 9 months ago #197494 by KhemrajC

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

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:

..._CK_972388.lss

The topic has been locked.

Moderators: tpartner, holch

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:

File Attachment:

Lime-years ahead

Legal

About Us

Open Source