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
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 1 week 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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 1 week ago - 4 years 1 week 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 1 week ago by tpartner.
The following user(s) said Thank You: Joffm
The topic has been locked.
  • KhemrajC
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 1 week 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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 1 week 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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 1 week ago - 4 years 1 week 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 1 week ago by tpartner.
The topic has been locked.
  • KhemrajC
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 1 week 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
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 1 week ago - 4 years 1 week 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 1 week ago by KhemrajC.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 1 week 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
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 1 week 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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 1 week ago - 4 years 1 week 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 1 week ago by tpartner.
The topic has been locked.
  • KhemrajC
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 1 week 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
  • KhemrajC's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
4 years 6 days 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:
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source