Issues with Google map location display off of Appery Backend locations

I had a built a wrapper application around the tutorial http://docs.appery.io/tutorials/addin...

Everything had been working fine for weeks, until around few days ago. Its seems that the Javascript associated with the mapping to local storage variable locationsList in locations_addresses_list_service does not execute any more when the test is run.

I tried implementing the tutorial as a standalone application and run into the same issue: nothing gets displayed on loading of startScreen.

I'd appreciate if you could advise what has resulted in this change.
1 person has
this problem
+1
This topic is no longer open for comments or replies.
  • Hi Cody - thanks for information we will check our tutorial.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited

  • This reply was removed on 2013-08-27.
    see the change log
  • This reply was removed on 2013-08-27.
    see the change log
  • Hi,

    Yes, we have issue with this.

    As workaround I suggest to you move your code from mapping to Success Action for services.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited

    • view 1 more comment
    • Hello -- please debug your code, you can look here. And in Dev tools (F12 in Chrome) you can check in Resources tab if your local storage variables are defined correctly.
    • Thanks for the pointer. However I have indeed looked via all available debugging tools in Chrome, Firebug. The locationsList local storage variable in the tutorial displays - [object Object],[object Object] in Chrome, and the contents of this variable are not accessible, as I pointed in my comment above. The snippet I included was just an example. While I am not expecting for my own code to be debugged by the forum, my worry is that that is there is a erroneous mapping or structural problem with localStorage variable in the tutorial, that is causing the inability to access its content.

      I would greatly appreciate any insights or guidance on the matter.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited

  • This reply was removed on 2013-09-22.
    see the change log
  • Hello!
    1) Most likely you incorrectly save data. Please take a look here how to store arrays, objects in localStorage http://docs.appery.io/documentation/u...
    2) your code
    var pLocations, iLocation; 
    pLocations = localStorage.getItem('locationsList');
    iLocation = pLocations[1].location;
    console.log(iLocation);

    won't work even if you'll save data correctly because in localStorage you can only store string, that means pLocations[1].location returns undefined because in fact you call location property of string, but string doesn't have such property. So if you'll save object and stringify it with JSON.stringify (see item 1) then while retrieving you need to parse this string back into object. Here is some code sample:
    var pLocations, iLocation; 
    try {
    pLocations = JSON.parse(localStorage.getItem("locationsList"));
    iLocation = pLocations[1].location;
    console.log(iLocation);
    }
    } catch ( e ) {
    }
    • view 1 more comment
    • Hi Cody -- can you give exact steps how to reproduce this problem?
    • Hi IIlya,

      Please see below, and let me know if you have any questions and suggestions, so we can troubleshoot.

      1) Replicate the tutorial:
      http://docs.appery.io/tutorials/addin...

      2) In specific, under the section Adding Location Points to the Map on the page above, note point #7: mapping to locationsList local storage variable.

      3) After running the application above, inspect locationsList in Chrome debug. (I do not see a string there).

      4) Add Javascript to access locationsList. E.g.

      getCoords (Component) > Success (Event) > Run JavaScript (Action)

      Add Javascript:

      var pLocations, iLocation;
      try {
      pLocations = JSON.parse(localStorage.getItem(‘locationsList’));
      iLocation = pLocations[1].location;
      console.log(iLocation); }
      catch ( e ) {
      }
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited

  • Hello! The next step in tutorial is adding JS in mapping. locationsList variable is not used and it doesn't matter there is a wrong result. If you need to save entire service response to localStorage variable it's better to add the following code on service success event:
    localStorage.setItem("varName", JSON.stringify(data));

    You can do that using mapping, but if service returns array that would be more complicated.
    • Thanks for the suggestion. I tried that and all variables shown as expected (please see my detailed description in steps below**) on debug console. However I cannot see the location markers displayed on the map (multiGoogleMap). I have described the necessary steps to recreate the issue below**. Can you please provide feedback?

      I suspect that the problem is manifesting because of the issues I have pointed earlier. The console gives these error messages (even in vanilla version of your tutorial below):
      http://docs.appery.io/tutorials/addin...
      Cannot refresh, map is not initialized! appery.js:2242
      Uncaught TypeError: Cannot call method 'getBounds' of undefined

      **Steps to recreate issue:
      ------------------------------

      On loading of main page, locations from backend (as in tutorial) are fetched and stored in localStorage via associated JS as follows:

      var temp = localStorage.getItem('locationResponses');
      if (temp) {
      temp = temp + ',' + JSON.stringify(value);
      } else {
      temp = JSON.stringify(value);
      }
      localStorage.setItem('locationResponses', temp);

      Things work fine and expected.

      On loading of a separate Page-2, I attempt to display locations on multiGoogleMap (as in tutorial) on that page via associated JS (onload) as follows:

      var locationStrings = localStorage.getItem('locationResponses');
      var locationsList = $.parseJSON('[' + locationStrings + ']');
      for(var c = 0; c < locationsList.length; c++) {
      var locationItem = locationsList[c];
      for (var i in locationItem) {
      if(i == 'location') {
      console.log(locationItem.location);
      getCoords.execute({
      'data' : {
      'address' : locationItem.location,
      'sensor' : true
      }
      });
      }
      }
      }
      var map = Appery('multiGoogleMap');
      map.refresh();

      getCoords and mutiGoogleMap above is same as in your tutorial:
      http://docs.appery.io/tutorials/addin...

      Although all variables have values as expected, I do not see anything displayed on the map.

      Will highly appreciate your feedback..
      Thanks
    • Hello! Working on it.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited

  • 1
    Most likely you set markers when map is not ready (not loaded). Try the following code on page Load event:
    function addMarkersAfterMapReady(mapName) {
    if (!Appery(mapName).gmap) {
    setTimeout(function () {addMarkersAfterMapReady(mapName)}, 100);
    } else {
    //HERE IS YOUR CODE
    }
    }
    addMarkersAfterMapReady('multiGoogleMap');

    Instead //HERE IS YOUR CODE put the code you have now on Load event.
    • Thank you, this does solve the marker display problem. I appreciate the help and support. However there is variable display issue that still persists. Please see below.

      I insert the following code in the placeholder (//HERE IS YOUR CODE). Please note two console.log statements towards the end of the snippet

      var locationStrings = localStorage.getItem('locationResponses');
      var locationsList = $.parseJSON('[' + locationStrings + ']');
      for(var c = 0; c < locationsList.length; c++) {
      var locationItem = locationsList[c];
      for (var i in locationItem) {
      if(i == 'location') {
      getCoords.execute({
      'data' : {
      'address' : locationItem.location,
      'sensor' : true
      }
      });
      }
      }
      }
      console.log(locationHelper.aLocations); // first
      console.log(locationHelper.aLocations[0]); // second

      var map = Appery('multiGoogleMap');
      map.refresh();

      The problem is that while first console.log above displays a 4X3 array (please see screen shot in my next reply) as should be the case, the second console.log displays undefined (in its current access of [0] above) and also when tested with any combinations of valid array indices (e.g. [1], [0][1], etc.). This is causing me not being able to access the elements in the array. Please note that the JS object locationHelper is defined exactly as in the tutorial:

      http://docs.appery.io/tutorials/addin...

      Could you advise on this seemingly anomalous behavior?

      Thanks in advance.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited

  • Hello! locationHelper.aLocations[0] handling is correct and should work. Most likely locationHelper.aLocations is not defined in this place. If you follow tutorial locationHelper.aLocations fills in while mapping of convertAddr service. You see convertAddr is filled in because this is how console.log works - shows the last object value. Please try the following way. Add an alert instead console.log, alert shows current value. You're likely to see empty alert with undefined. You can also add:
    alert(locationHelper.aLocations);
    alert(locationHelper.aLocations[0]);

    in the end of code in mapping from results to converted. You should see locationHelper.aLocations array is filling in. All these alerts should be after alerts added in code on page Load event.
    • view 2 more comments
    • This comment was removed on 2013-10-10.
      see the change log
    • Sure. I need to access lcationHelper.alocations array where "third", "fourth", "second", and "first" are marked in code above and at subsequent locations in the project, to add further functionality. Please let me know if you need further clarifications. On a related note, shouldn't the alerts from within getCords.execute show up earlier than the ones from "third" and "fourth" ones in terms of code sequencing?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited

  • 1
    Hello! You need to know that success events for getCoords service can be triggered in order different from order you call them - they're not sync. If you to want to run some code or service when all data is recieved here is what you have to do.
    Create some global variable (for example totalLocations). To do that create JS asset:
    var totalLocations;

    Before this line
    for(var c = 0; c < locationsList.length; c++) { 
    set totalLocations
    totalLocations = locationsList.length;
    on getCoords service success event run the following code:
    totalLocations -= 1; 
    if (totalLocations === 0) {
    //all data is already in locationHelper
    //invoke your service or call function here.
    }
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited