14 Replies Latest reply on Oct 23, 2017 4:06 PM by fumrigar RSS
    fumrigar Newbie

    Creating Map Mashup with 100 points

    Hello,

     

    I am trying to create a openmap mashup that shows multiple points (100) on it with specific information as you click on each point. I am new to the Thingworx software but I was able to plot many different things using bar graphs and now I am having trouble mapping coordinates. I take the steps below to upload a csv file using parsley and create a mashup but when it comes to mapping the separate points the map is blank (see attachments).

     

    1. Create a CSV with the correct Longitude and Latitude formatting. I used the Location formatting that is specified on the PTC website (http://support.ptc.com/cs/help/thingworx_hc/thingworx_7.0_hc/index.jspx?id=ThingProperties&action=show). On this site it shows the Location format should be Location = [longitude, latitude]. While on the Mashup it puts the location formatting as Location = [latitude, longitude] I tried uploading the data both ways and also with and without brackets.
      Screen Shot 2017-10-16 at 2.30.52 PM.png
    2. I upload the CSV using Parsley and the data is shown is services.
    3. Then I Execute the program in service to check if the data transferred over as needed. As shown in the screenshot attached.
      Thingworx Services.png
    4. I save the information and the data shape. Create a visual mashup click and drag the open maps template over and transfer all data into the graph.
    5. In the Locations field I put LatLong and leave everything else alone and click view mashup.
      Thingworx Map Mashup Information.png
    6. Doing so creates a blank map with only one dot that is on london.
      Screen Shot 2017-10-16 at 2.15.22 PM.png


    Please let me know if you need more information.

      • Re: Creating Map Mashup with 100 points
        asmith Explorer

        You need the LatLong column to be of type Location. The Location type takes three parameters: Latitude, Longitude, Elevation. Try removing the brackets and adding a 0.0 to the end of each value.

          • Re: Creating Map Mashup with 100 points
            fumrigar Newbie

            Al,

             

            Thank you for the quick response I changed my values in the CSV file as you recommended, it didn't work. I changed the value to 29.7,78.52,0.0 and reuploaded the file. I was reading online and i wonder if this has to do with js snippet I used. Below is the snippet, is this in the right format to read the data?

             

            Screen Shot 2017-10-16 at 4.29.01 PM.png

             

            Do I need to split up the two columns into longitude and latitude? or should I leave it combined?

          • Re: Creating Map Mashup with 100 points
            qngo Creator

            Hi, the "LatLong" must be of type LOCATION. You need to convert the data parsed in that type. For example:

             

            var location = new Object();

            location.latitude = Latitude;

            location.longitude = Longitude;

            location.elevation = 0;

            location.units = "WGS84";

             

            Than something like:

             

            data[i].LatLong = location;

              • Re: Creating Map Mashup with 100 points
                fumrigar Newbie

                Hello,

                 

                I apologize I have little to no experience with javascript. As I understand from the above suggestion I need convert the parsed data to a location type. Is there anyway someone can write the js code or show me a working example? Currently in my Services I have the below code what should I add to the code so that it reads the excel column above with the latitude and longitude?

                 

                var params = {

                path: "/CSV_January_UP.csv" /* STRING */,

                hasHeader: true /* BOOLEAN */,

                //dateFormat: undefined /* STRING */,

                fileRepository: me.name /* THINGNAME */,

                //latitudeField: undefined /* NUMBER */,

                fieldDelimiter: "," /* STRING */,

                stringDelimiter: '"' /* STRING */,

                //dataShape: undefined /* DATASHAPENAME */

                };

                 

                // result: INFOTABLE

                var result = Resources["Parsley"].ParseCSV(params);

                 

                Do I add the suggested code here? Also what do I add where it says (data[i]).

                  • Re: Creating Map Mashup with 100 points
                    raghun Explorer

                    In step 3 you are getting an infotable that has the location info from your CSV file. So you just need to modify this infotable to add a column with a base type of "LOCATION" and then pass the latitude longitude information to create data. So in your excel store latitude and longitude in 2 separate columns for easy access during conversion process. Try to follow below steps,

                    1. Lets say you call the infotable from ParseCSV service as location table

                         var locationTable= Resources["Parsley"].ParseCSV(params);

                     

                    2. Modify this table to add a column called location

                    var newField = new Object();

                            newField.name = "location";

                            newField.baseType = 'LOCATION';

                            locationTable.AddField(newField);

                    3. Now loop through the table to read the longitude and latitude columns and convert them into location field

                         for (var i=0;i<locationTable.rows.length;i++){

                         var row=locationTable.rows[i]

                         var templocation = new Object();

                         templocation.latitude = row.Latitude;  //this is the coulmn where latitude got loaded from CSV

                         templocation.longitude = row.Longitude; //this is the coulmn where longitude got loaded from CSV

                         templocation.elevation = 0;

                         templocation.units = "WGS84";

                    locationTable.rows[i].location =templocation

                     

                    }

                    var result = locationTable

                    now the result table should have the new column with Location data type that will display on the map. I have not tested this code but some modification may be required if you run into syntax issues !! Hopefully it works on the 1st run

                      • Re: Creating Map Mashup with 100 points
                        fumrigar Newbie

                        Raghu,

                        Thank you for the quick response I made the changes you requested and I feel like everything is right but the new column that is created is just showing   (--:--). Below is the code I am using and it seems like the the code above works but the information is not being read correctly?

                         

                        Screen Shot 2017-10-17 at 2.27.03 PM.png

                         

                         

                         

                        var params = {

                        path: "/CSV_January_UP_ds.csv" /* STRING */,

                         

                        hasHeader: true /* BOOLEAN */,

                         

                        //dateFormat: undefined /* STRING */,

                        fileRepository: me.name /* THINGNAME */,

                        //latitudeField: undefined /* NUMBER */,

                        fieldDelimiter: "," /* STRING */,

                        stringDelimiter: '"' /* STRING */,

                        //dataShape: undefined /* DATASHAPENAME */

                        };

                         

                         

                        // result: INFOTABLE

                        var result = Resources["Parsley"].ParseCSV(params);

                        var locationTable= Resources["Parsley"].ParseCSV(params);

                         

                         

                         

                         

                        var newField = new Object();

                                newField.name = "Location";

                                newField.baseType = 'LOCATION';

                                locationTable.AddField(newField);

                         

                         

                             for (var i=0;i<locationTable.rows.length;i++){

                             var row=locationTable.rows[i]

                             var templocation = new Object();

                             templocation.Latitude = row.latitude;  //this is the coulmn where latitude got loaded from CSV

                             templocation.Longitude = row.longitude; //this is the coulmn where longitude got loaded from CSV

                             templocation.elevation = 0;

                             templocation.units = "WGS84";

                        locationTable.rows[i].location =templocation

                        }

                        var result = locationTable

                        • Re: Creating Map Mashup with 100 points
                          qngo Creator

                          Hello, in your code, about this part:

                           

                          templocation.Latitude = row.latitude;  //this is the coulmn where latitude got loaded from CSV

                          templocation.Longitude = row.longitude; //this is the coulmn where longitude got loaded from CSV

                           

                          "latitude" and "longitude" of "templocation" must be in lowercase

                           

                          templocation.latitude = row.latitude;  //this is the coulmn where latitude got loaded from CSV

                          templocation.longitude = row.longitude; //this is the coulmn where longitude got loaded from CSV

                            • Re: Creating Map Mashup with 100 points
                              fumrigar Newbie

                              Hello,

                               

                              I made a mistake I accidentally uploaded the wrong code that I was just testing. I tried to use what Raghu suggested above and I am getting a (NaN:NaN ) error in the location column as shown below. I believe this is a Not a Number error.

                               

                              var params = {

                              path: "/CSV_January_UP_ds.csv" /* STRING */,

                              hasHeader: true /* BOOLEAN */,

                              //dateFormat: undefined /* STRING */,

                              fileRepository: me.name /* THINGNAME */,

                              //latitudeField: undefined /* NUMBER */,

                              fieldDelimiter: "," /* STRING */,

                              stringDelimiter: '"' /* STRING */,

                              //dataShape: undefined /* DATASHAPENAME */

                              };

                               

                               

                              // result: INFOTABLE

                              var result = Resources["Parsley"].ParseCSV(params);

                               

                               

                              var locationTable= Resources["Parsley"].ParseCSV(params);

                               

                               

                              var newField = new Object();

                                      newField.name = "location";

                                      newField.baseType = 'LOCATION';

                                      locationTable.AddField(newField);

                               

                               

                              for (var i=0;i<locationTable.rows.length;i++){

                                   var row=locationTable.rows[i]

                                   var templocation = new Object();

                                   templocation.latitude = row.Latitude;  //this is the coulmn where latitude got loaded from CSV

                                   templocation.longitude = row.Longitude; //this is the coulmn where longitude got loaded from CSV

                                   templocation.elevation = 0;

                                   templocation.units = "WGS84";

                              locationTable.rows[i].location =templocation

                              }

                              var result = locationTable

                               

                              Screen Shot 2017-10-18 at 11.17.38 AM.png

                                • Re: Creating Map Mashup with 100 points
                                  raghun Explorer

                                  Javascript can sometimes do incorrect type coercion resulting into such issues... just to debug this problem can you hard code the below and see if the location column gets properly populated with same value.. if yes then we can see where to fix the problem

                                  just replace the 2 statements with below 2 lines..let me know what you get?

                                  templocation.latitude =25

                                  templocation.longitude = 80

                                    • Re: Creating Map Mashup with 100 points
                                      fumrigar Newbie

                                      Raghu,

                                       

                                      Yes I noticed that. With the first code below I get the same result where it says (NaN:NaN) for every row but if I take away the for loop the the code runs and inputs the first values into the rows as shown below but nothing after.

                                       

                                      Code 1:

                                      var locationTable= Resources["Parsley"].ParseCSV(params);

                                       

                                       

                                      var newField = new Object();

                                              newField.name = "location";

                                              newField.baseType = 'LOCATION';

                                              locationTable.AddField(newField);

                                       

                                       

                                       

                                      for (var i=0;i<locationTable.rows.length;i++){

                                           var row=locationTable.rows[i]

                                           var templocation = new Object();

                                           templocation.latitude = 25;  //this is the coulmn where latitude got loaded from CSV

                                           templocation.longitude = 80; //this is the coulmn where longitude got loaded from CSV

                                           templocation.elevation = 0;

                                           templocation.units = "WGS84";

                                      locationTable.rows[i].location =templocation

                                      }

                                      var result = locationTable

                                       

                                      Screen Shot 2017-10-18 at 11.17.38 AM.png

                                       

                                      Code2:

                                       

                                      var locationTable= Resources["Parsley"].ParseCSV(params);

                                       

                                       

                                      var newField = new Object();

                                              newField.name = "location";

                                              newField.baseType = 'LOCATION';

                                              locationTable.AddField(newField);

                                       

                                       

                                       

                                       

                                       

                                           var row=locationTable

                                           var templocation = new Object();

                                           templocation.latitude = 25;  //this is the coulmn where latitude got loaded from CSV

                                           templocation.longitude = 80; //this is the coulmn where longitude got loaded from CSV

                                           templocation.elevation = 0;

                                           templocation.units = "WGS84";

                                      locationTable.location =templocation

                                       

                                       

                                      var result = locationTable

                                       

                                      Screen Shot 2017-10-18 at 2.54.18 PM.png

                                        • Re: Creating Map Mashup with 100 points
                                          raghun Explorer

                                          ok, i should have been clear in my response. I did not ask you to remove the for loop. just replace the 2 lines within for loop with hard coded values. But what you did is OK too as I can see that the numbers are going through fine in the 1st row which means the type within spreadsheet is being converted in String i guestt

                                           

                                          Please try the below. Dont remove the for loop just replace the below line from the initial code

                                          replace below

                                          templocation.latitude = row.Latitude;  //this is the coulmn where latitude got loaded from CSV

                                          templocation.longitude = row.Longitude; //this is the coulmn where longitude got loaded from CSV

                                           

                                          with below

                                          templocation.latitude = Number(row.Latitude); 

                                          templocation.longitude = Number(row.Longitude);

                                            • Re: Creating Map Mashup with 100 points
                                              fumrigar Newbie

                                              Raghu,

                                              As you asked below is the code I used and the result.

                                               

                                              Code:

                                              var locationTable= Resources["Parsley"].ParseCSV(params);

                                               

                                               

                                              var newField = new Object();

                                                      newField.name = "location";

                                                      newField.baseType = 'LOCATION';

                                                      locationTable.AddField(newField);

                                               

                                                 for (var i=0;i<locationTable.rows.length;i++){

                                                   var row=locationTable.rows[i]

                                                   var templocation = new Object();

                                                   templocation.latitude = Number(row.Latitude);

                                                   templocation.longitude = Number(row.Longitude);

                                                   templocation.elevation = 0;

                                                   templocation.units = "WGS84";

                                              locationTable.rows[i].location =templocation

                                               

                                              }

                                              var result = locationTable

                                               

                                              Screen Shot 2017-10-18 at 4.27.20 PM.png

                                                • Re: Creating Map Mashup with 100 points
                                                  raghun Explorer

                                                  hmmm, that is interesting... I would have asked to replace Number() with parseInt() but not sure if that works either.. try to log the value of your latitude and longitude as below and see whats printed to log file

                                                  logger.warn (row.Latitude)

                                                  logger.warn (row.Longitude)

                                                  You should see the logged value in monitoring munu (Monitoring>Logs>Script). See if the Long and Lat values are coming in fine... if you can attach the csv you are using and I will give it a try sometime today or monday! Thanks

                                                    • Re: Creating Map Mashup with 100 points
                                                      fumrigar Newbie

                                                      Raghu,

                                                       

                                                      I updated the services as you requested. Below is the service code and also the warns I get on my logs. I apologies but I dont know how to attach the CSV file. The screen only shows how to upload video and image files but the CSV file I am using is just three columns (City, Latitude and Longitude).

                                                       

                                                      Code:var params = {

                                                      path: "/CSV_January_UP_ds.csv" /* STRING */,

                                                      hasHeader: true /* BOOLEAN */,

                                                      //dateFormat: undefined /* STRING */,

                                                      fileRepository: me.name /* THINGNAME */,

                                                      //latitudeField: undefined /* NUMBER */,

                                                      fieldDelimiter: "," /* STRING */,

                                                      stringDelimiter: '"' /* STRING */,

                                                      //dataShape: undefined /* DATASHAPENAME */

                                                      };

                                                       

                                                      // result: INFOTABLE

                                                      var result = Resources["Parsley"].ParseCSV(params);

                                                      var locationTable= Resources["Parsley"].ParseCSV(params);

                                                      var newField = new Object();

                                                              newField.name = "location";

                                                              newField.baseType = 'LOCATION';

                                                              locationTable.AddField(newField);

                                                      for (var i=0;i<locationTable.rows.length;i++){

                                                           var row=locationTable.rows[i]

                                                           var templocation = new Object();

                                                           templocation.latitude = logger.warn (row.Latitude); 

                                                           templocation.longitude = logger.warn(row.Longitude);

                                                           templocation.elevation = 0;

                                                           templocation.units = "WGS84";

                                                           locationTable.rows[i].location = templocation

                                                      }

                                                      var result = locationTable

                                                       

                                                      Screen Shot 2017-10-23 at 2.47.06 PM.png