Showing Geo LineString on Google Maps

Server Code Codeless
1

I was wondering how I can show Geo LineString data (which shows up perfectly fine in the data browser) on my pages with Google Maps?

Binding the property coming from the database to “Markers Logic” doesn’t seem to work.

2

Hi @Tom_Van_den_Eynde

Currently it’s not available. But I’ve created the internal ticket BKNDLSS-23713 to add the ability to display LineString and Polygon data on the Google Map component.

Best Regards,
Maksym

1 Like
3

Hi all,

Just interested to know if anything came from this query.

Kind Regards,
Raymond

4

Hi Raymond,

Not yet, the ticket was in the backlog for some time and recently was moved up into one of the near-term iterations.

Mark

5

Hi Mark,

Thanks for your reply, I have come up with a work around in the time being (with a few additions that don’t really apply to this thread), although not ideal it may help a few folk.

This method returns a polygon which is reflected on a leaflet map,

Initially it decodes the encoded routes supplied by a google directions API, It then doubles back on the coordinates, creating a Polygon which accurately portrays what the intended polyline would have been, it is obviously extremely verbose but as I said could help a few folk.

image
image954×556 79.2 KB

image
image938×730 122 KB 

function decode() {
  var encodedPolyline = Data;
  var coords = polyline.toGeoJSON(encodedPolyline);
  return coords
}

var polyline = {};

function encode(current, previous, factor) {
  current = Math.round(current * factor);
  previous = Math.round(previous * factor);
  var coordinate = current - previous;
  coordinate <<= 1;
  if (current - previous < 0) {
    coordinate = ~coordinate;
  }
  var output = '';
  while (coordinate >= 0x20) {
    output += String.fromCharCode((0x20 | (coordinate & 0x1f)) + 63);
    coordinate >>= 5;
  }
  output += String.fromCharCode(coordinate + 63);
  return output;
}

polyline.decode = function(str, precision) {
  var index = 0,
    lat = 0,
    lng = 0,
    coordinates = [],
    shift = 0,
    result = 0,
    byte = null,
    latitude_change,
    longitude_change,
    factor = Math.pow(10, precision || 5);

  while (index < str.length) {

    byte = null;
    shift = 0;
    result = 0;

    do {
      byte = str.charCodeAt(index++) - 63;
      result |= (byte & 0x1f) << shift;
      shift += 5;
    } while (byte >= 0x20);

    latitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));

    shift = result = 0;

    do {
      byte = str.charCodeAt(index++) - 63;
      result |= (byte & 0x1f) << shift;
      shift += 5;
    } while (byte >= 0x20);

    longitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));

    lat += latitude_change;
    lng += longitude_change;

    coordinates.push([lat / factor, lng / factor]);
  }

  return coordinates;
};


polyline.encode = function(coordinates, precision) {
  if (!coordinates.length) {
    return '';
  }

  var factor = Math.pow(10, precision || 5),
    output = encode(coordinates[0][0], 0, factor) + encode(coordinates[0][1], 0, factor);

  for (var i = 1; i < coordinates.length; i++) {
    var a = coordinates[i],
      b = coordinates[i - 1];
    output += encode(a[0], b[0], factor);
    output += encode(a[1], b[1], factor);
  }

  return output;
};

function flipped(coords) {
  var flipped = [];
  for (var i = 0; i < coords.length; i++) {
    flipped.push(coords[i].slice().reverse());
  }
  return flipped;
}

polyline.fromGeoJSON = function(geojson, precision) {
  if (geojson && geojson.type === 'Feature') {
    geojson = geojson.geometry;
  }
  if (!geojson || geojson.type !== 'LineString') {
    throw new Error('Input must be a GeoJSON LineString');
  }
  return polyline.encode(flipped(geojson.coordinates), precision);
};

polyline.toGeoJSON = function(str, precision) {
  var coords = polyline.decode(str, precision);
  return {
    type: 'LineString',
    coordinates: flipped(coords)
  };
};

if (typeof module === 'object' && module.exports) {
  module.exports = polyline;
}
return decode()

Kind Regards,
Raymond

1 Like
6

Good Morning all,

Just following up if there has been development regarding this query.

Kind Regards,
Raymond

7

Hello @Raymond_Woodley,

The ticket is still in Backlog in Open state.
However, I can suggest you using the Mapbox component from the Marketplace instead.
Here’s it’s documentation.

8

Hi @olhadanylova

Thank you i have indeed done so along while ago, the issue with mapbox is that they don’t update the imagery often, the current satellite imagery is ± 4 years out of date.

Kind Regards,
Raymond

9

I see…
If Mapbox doesn’t suit your needs, I can only suggest creating your own custom component based on Google Maps (or continuing using a workaround).
Unfortunately right now the ticket is in Backlog state and we have no estimations about it.