Basic JavaScript array from an array of ruby arrays containing floats

Question

I am trying to make a basic heatmap using Google Maps API - https://developers.google.com/maps/documentation/javascript/heatmaplayer

I have an array of arrays of map coordinates I am passing from my rails controller like so:

@coordinates = [[51.60382, 0.02785], [51.6038, 0.02785], [51.60401, 0.02799], [51.60389, 0.02789], [51.60389, 0.02789], [51.60389, 0.02789], [51.60389, 0.02789], [51.60389, 0.02789], [51.60385, 0.02785], [51.60385, 0.02785], [51.60386, 0.02785], [51.60386, 0.02785], [51.60387, 0.02783], [51.60387, 0.02781]]

For each of these arrays I want to create a Google maps LatLng JavaScript object like so:

    new google.maps.LatLng(37.782551, -122.445368),

I can get the array of coordinate arrays through to the view ok however am struggling to create an array of the objects that look like that above.

My most recent attempt:

   var coordinatesArray = <%= @coordinates %>;

      function getPoints() {
        function coordinatesArrayTwo () {
          var coordinatesArrayNew = coordinatesArray.map( c => new google.maps.LatLng(c[0], c[1]) );
          return coordinatesArrayNew;
        };

        return[coordinatesArrayTwo()]

The idea being to iterate through the array of arrays and create a new object inserting the array coordinates...

However this does not seem to work and I am having a hard time viewing what it is actually returning.

I have a feeling it is fairly basic but could anyone help with this?

Thanks

What's the error you're facing right now? Can you post the console errors at least to be able to understand your problem? this var coordinatesArray = <%= @coordinates %>; is suspicious. — Ele
– Ele, Commented Sep 12, 2020 at 21:08
visualization_impl.js:formatted:277 Uncaught (in promise) TypeError: b.lat is not a function Is the only error I get in the console. Apparently this is due to the array being in the wrong format... I have tried .to_json and .html_safe on that @coordinates array too... — Gareth32
– Gareth32, Commented Sep 12, 2020 at 21:14
I think you're looking for this: stackoverflow.com/questions/7195943/… — pilchard
– pilchard, Commented Sep 12, 2020 at 21:19
Thanks but I have seen this... I do not think the ruby array itself is the issue rather the JavaScript code that iterates through and builds the new array of objects? — Gareth32
– Gareth32, Commented Sep 12, 2020 at 21:27
The javascript snippet in my answer works, so if you are having a problem I think it lies with your array conversion or google API implementation. — pilchard
– pilchard, Commented Sep 12, 2020 at 21:42

7urkm3n · Accepted Answer · 2020-09-12 23:26:34Z

0

I think you have an issue right on this one: var coordinatesArray = <%= @coordinates %>;

I am suggesting to try this one. JSON.parse('<%= @coordinates %>')

or you have to try raw also, JSON.parse('<%= raw @coordinates %>')

var coordinatesArray = JSON.parse('<%= @coordinates %>')

// Sample below: from googleApi Docs.
var heatmapData = coordinatesArray.map( c => new google.maps.LatLng(c[0], c[1]) );
var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

answered Sep 12, 2020 at 23:26

7urkm3n

6,3304 gold badges33 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

7urkm3n Over a year ago

I have not been working on Rails last 2/3 years, i have had done this previously. Also try those: <%= @ coordinates.to_json %> or JSON.parse(<%= @ coordinates.to_json %>)

Gareth32 Over a year ago

Thanks 7urjm3n there were two issues with my initial code: 1) It required .to_json as per your response 2) The getPoints function needed tweaking as per Raphael St's response...

Gareth32 · Accepted Answer · 2020-09-13 08:23:51Z

The solution borrows from both Raphael St & 7urkm3n repsonses...

I needed to .to_json the ruby array like so:

 var coordinatesArray = <%= @coordinates.to_json %>;

I needed to tweak the getPoints function like so:

   function getPoints() {
          var coordinatesArray = <%= @coordinates.to_json %>;
          return coordinatesArray.map( c => new google.maps.LatLng(c[0], c[1]) );
        };

This gives the following to produce the heatmap:

      let map, heatmap;

      function initMap() {
        function getPoints() {
          var coordinatesArray = <%= @coordinates.to_json %>;
          return coordinatesArray.map( c => new google.maps.LatLng(c[0], c[1]) );
        };

        map = new google.maps.Map(document.getElementById("map"), {
          zoom: 13,
          center: {
            lat: 51.603,
            lng: 0.0232
          },
          mapTypeId: "satellite"
        });
        heatmap = new google.maps.visualization.HeatmapLayer({
          data: getPoints(),
          map: map
        });
      }

      function toggleHeatmap() {
        heatmap.setMap(heatmap.getMap() ? null : map);
      }

      function changeGradient() {
        const gradient = [
          "rgba(0, 255, 255, 0)",
          "rgba(0, 255, 255, 1)",
          "rgba(0, 191, 255, 1)",
          "rgba(0, 127, 255, 1)",
          "rgba(0, 63, 255, 1)",
          "rgba(0, 0, 255, 1)",
          "rgba(0, 0, 223, 1)",
          "rgba(0, 0, 191, 1)",
          "rgba(0, 0, 159, 1)",
          "rgba(0, 0, 127, 1)",
          "rgba(63, 0, 91, 1)",
          "rgba(127, 0, 63, 1)",
          "rgba(191, 0, 31, 1)",
          "rgba(255, 0, 0, 1)"
        ];
        heatmap.set("gradient", heatmap.get("gradient") ? null : gradient);
      }

      function changeRadius() {
        heatmap.set("radius", heatmap.get("radius") ? null : 20);
      }

      function changeOpacity() {
        heatmap.set("opacity", heatmap.get("opacity") ? null : 0.2);
      } // Heatmap data: 500 Points

And it works!

Thanks all for the help.

Raphael St · Accepted Answer · 2020-09-12 21:14:06Z

-1

I am not entirely sure if it is what you are asking for

function getPoints() {
   return coordinatesArray.map( c => new google.maps.LatLng(c[0], c[1]) );
  };
  new_array = getPoints()

answered Sep 12, 2020 at 21:14

Raphael St

6819 silver badges27 bronze badges

2 Comments

Gareth32 Over a year ago

Thanks Raphael - could I ask how you are inspecting the array to see what is being returned? Still getting the error visualization_impl.js:11 Uncaught (in promise) TypeError: b.lat is not a function

Raphael St Over a year ago

Well I am not using a google map api key so i skipped the google api. var coordinatesArray = [[51.60382, 0.02785], [51.6038, 0.02785], [51.60401, 0.02799], [51.60389, 0.02789], [51.60389, 0.02789], [51.60389, 0.02789], [51.60389, 0.02789], [51.60389, 0.02789], [51.60385, 0.02785], [51.60385, 0.02785], [51.60386, 0.02785], [51.60386, 0.02785], [51.60387, 0.02783], [51.60387, 0.02781]]; function getPoints() { return coordinatesArray.map( c => [c[0], c[1]] ); }; new_array = getPoints(); console.log(new_array) //This will output your table

Collectives™ on Stack Overflow

Basic JavaScript array from an array of ruby arrays containing floats

3 Answers 3

2 Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Linked

Related