1

I need to show route between 2 points in OpenLayers. I have received the route details from Google Directions API. The API has given start location / end location, Steps and overlay_polyline (encoded) data.

The overlay_polyline shows right path using url 'https://developers.google.com/maps/documentation/utilities/polylineutility' , but as this is encrypted I extracted coordinates from Steps array as lat/long and added a vector layer on OpenLayers map but in this way many points are left in between and road curvature is not considered.

Output of my API (which formats Directions API output):

{
  "end_address": "100 Universal City Plaza, Universal City, CA 91608, USA",
  "end_location": {
    "lat": 34.1358593,
    "lng": -118.3511633
  },
  "start_address": "1313 Disneyland Dr, Anaheim, CA 92802, USA",
  "start_location": {
    "lat": 33.8160897,
    "lng": -117.9225226
  },
  "distance": {
    "text": "35.1 mi",
    "value": 56511
  },
  "duration": {
    "text": "49 mins",
    "value": 2924
  },
  "Locations": [
    {
      "lat": 33.8160897,
      "lng": -117.9225226
    },
    {
      "lat": 33.8160679,
      "lng": -117.9225314
    },
    {
      "lat": 33.8155824,
      "lng": -117.9235917
    },
    {
      "lat": 33.816278,
      "lng": -117.9242395
    },
    {
      "lat": 33.817613,
      "lng": -117.924097
    },
    {
      "lat": 33.8179964,
      "lng": -117.9235637
    },
    {
      "lat": 33.8179846,
      "lng": -117.9223305
    },
    {
      "lat": 33.8207878,
      "lng": -117.9230963
    },
    {
      "lat": 34.0256221,
      "lng": -118.2059515
    },
    {
      "lat": 34.1294658,
      "lng": -118.3475583
    },
    {
      "lat": 34.1307998,
      "lng": -118.3485738
    },
    {
      "lat": 34.1338819,
      "lng": -118.3515888
    },
    {
      "lat": 34.1358593,
      "lng": -118.3511633
    }
  ],
  "overview_polyline": {
    "points": "qukmEvvvnUz@l@\\n@H|@KvAI`BsB@Ee@O?e@BoAC_@H}@?_@??S?_@?ACCe@_@[OGm@BiEAs@_@Bm@HyEhAaC|@eCv@eF_BgB]wAHmAb@oJdIeCxB}@nAmI~H{JtKgOfPg@b@qDnGsAvDoAvEeC~PeBhKoAhEqDrIwa@b_AyCzGyBdEqFnJqB~DeFxMiOh_@gVdk@oCxEiD~EgDpEkHhKa@x@wAxDc@nBcDzNaDxNkCbIgFfL_JrOmG~M{MxZkN~ZgC`GiFjLaDpGgDzEkDbEiE|FqBlDgIzQoRlc@aIrQuEjK{CrGaD`GmDbHcCnG}GhNaUnj@kDhIwBrFaK|TkG`MqRp`@iEdJoC|GkBfE_GpL_FfIuFtH}GrHySlSuE|EmEjGgFjKwFxLeHfK{FrGqC|BmFvDyIvF}D`Cuu@be@ySvN{ThNe\\fRo]fSmR~KoNrIkDzCeCrC{I|Mu^xj@gSxZyAbBmC`C}AfA{DvBoC~@sNzC_L`CaFdAoEpAsHxDqM~IyCzBuCjCeGfGgShS{H`IyCnEoD~FyB~CgCfCkElEom@tk@{DjC}BhAmCvAqDjCkVbUsCvCoH`JuGjIuF~JeE`FwF`FgA`AcCvCkChFyBfG{JhY}AdFuAnHo@rCw@rBuBhEMTy@jBcMp^}BjH[pAqAjJWrI@zo@m@nJu@vEgAbEuJ~YkHrTsD`Lq@pC@h@}BzI}Mn`@wF~O}DjJqDzFoAzA]PiChC{C|BwBbAgFdAeDDsGk@qHTsEK_Dg@aKw@wJDuFRwCXqDr@gEtAoEjBsItDkBnBiAfCc@~Bg@bHyCp]a@|Ge@zKPtFWhCa@jBu@rBqChFoLrTgEjHyF`IoFbFgKpIeDrCkEbG_NzSaDnHcB`GkK~a@sFhQ_DlJwChJ_CfHkCtGmDfMqGx\\wE~ZuBlP_BjLwAbGiAzCkGzNmJnWcDlHcOxVeDbFcCrCqFjE{MdHwBjA_C`BiCpCoAnB_HhMcDnFkB|BqE`EcEfCuOvHsDlBkBxAiBrB{B~Dy@`Cs@zCa@pDKlFInGe@vEYtAwAfEeFxJ{M`XkDzGeAzAqDtD{AhAqAl@sCt@qLxCoRpDeErAmD`BaEbCqC~BqEzEaBnB}FnHmB|BkBdBsG|DcElDsFvFkCdCM?qBdB_ChB_IdFmDdFiA~@gA~ASBe@KiB_AcAU_BKo@@"
  }
}

There is a difference for other searches when I draw a line using locations array and using overview_polyline in the polylineutility. overview_polyline is accurate.

Is there a better way to show route in OpenLayersor? How can I use this overlay_polyline property in OpenLayers?

  • Found an answer at stackoverflow.com/questions/3852268/…. Decoding code worked as expected ! – user684805 Apr 18 at 19:23
  • If you are using OpenLayers new ol.format.Polyline().readGeometry() decodes a polyline directly to a linestring – Mike Apr 18 at 20:15
  • Thanks ! I tried and this worked as expected.. – user684805 Apr 19 at 7:36
3

You can decode polylines directly in OpenLayers to create a series of LineString features (which could be also combined as a single MultiLineString geometry)

result.routes[0].legs.forEach(function(leg) {
    leg.steps.forEach(function(step) {
        googleRouteLayer.getSource().addFeature(
            new ol.Feature({
                geometry: new ol.format.Polyline().readGeometry(step.polyline.points).transform('EPSG:4326', viewProjection)
            })
        );
    });
});

You should not use Google routes on publicly accessible non-Google maps as the Google ToS prohibit it.

| improve this answer | |
  • I used the steps returned from google api and pushed them in my locations array in the same order. Here the issue is like, if a road is straight but have a curve then the api given 2 end points as lat/long and not the intermediate point hence exact path is not followed. But the encrypted overline follows the same. I am using google API through my api using google key. – user684805 Apr 18 at 18:37
  • I need to show a path following the road for reach the destination. – user684805 Apr 18 at 18:41
  • I used below approach : let l_data = this.FetchCoordinatesArrOL(argDirectionResponseModel.Locations); this._RouteDataLayer = new Vector({ source: new VectorSource({ features: [new Feature({ geometry: new LineString(l_data).transform('EPSG:4326', 'EPSG:3857'), name: 'RouteLayer' })] }), }); this.map.addLayer(this._RouteDataLayer); – user684805 Apr 18 at 18:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.