1

I do not know if someone has already lived the same thing as me, I work with JSTS API to create a polygon that surrounds the route of the google services but the problem is that when there are intersections in the polygon route Does not take the given distance but the complete surface between the two roads, the following image 1 explains the problem in detail, and here is the code used. Result in jsfiddle

enter image description here

<style type="text/css">
    #right-panel {
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
  }

  #right-panel select, #right-panel input {
    font-size: 15px;
  }

  #right-panel select {
    width: 100%;
  }

  #right-panel i {
    font-size: 12px;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map-canvas {
    height: 100%;
    float: left;
    width: 70%;
    height: 100%;
  }
  #right-panel {
    margin: 20px;
    border-width: 2px;
    width: 20%;
    height: 400px;
    float: left;
    text-align: left;
    padding-top: 0;
  }
  #directions-panel {
    margin-top: 10px;
    background-color: #FFEE77;
    padding: 10px;
    overflow: scroll;
    height: 174px;
  }

</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!--    // from https://github.com/bjornharrtell/jsts  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://marocexpress.marocgeo.ovh/modules/trip/js/javascript.util.js"></script>
<script src="http://marocexpress.marocgeo.ovh/modules/trip/js/jsts.js"></script>

<script type="text/javascript">
    var mapCanvas = "map-canvas";
    var map;
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;

    var mapConfig = {
        zoom: 6,
        center: { lat: 32.082575, lng: -6.921387 },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
            mapTypeIds: [google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN]
        },
        overviewMapControl: true,
        scaleControl: true,
        streetViewControl: true,
        panControl: true,
        rotateControl: true,
        maxZoomForCenter:17
    };

function initialize() {
    map = new google.maps.Map(document.getElementById(mapCanvas),mapConfig);
    directionsDisplay.setMap(map);
    calculateAndDisplayRoute(directionsService, directionsDisplay);
};

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var waypts = [];
    var checkboxArray = document.getElementById('waypoints');

    waypts.push({
        location: new window.google.maps.LatLng(33.494873,-7.718875),
        stopover: true
    });

    waypts.push({
        location: new window.google.maps.LatLng(33.595501,-7.578152),
        stopover: true
    });


    directionsService.route({
      origin: new window.google.maps.LatLng(33.563656, -7.636282),
      destination: new window.google.maps.LatLng(33.477188, -7.945458),
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: 'DRIVING'
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
        var route = response.routes[0];

        var legs = response.routes[0].legs;
        overviewPath = response.routes[0].overview_path,
        overviewPathGeo = [];
        for (var i = 0; i < legs.length; i++) {
          var steps = legs[i].steps;
          for (j = 0; j < steps.length; j++) {
             var nextSegment = steps[j].path;
             for (k = 0; k < nextSegment.length; k++) {
                 overviewPathGeo.push(
                   [nextSegment[k].lng(), nextSegment[k].lat()]
                 );
            }
          }
        }
        bermudaTriangle = new google.maps.Polygon({
              paths: createPolygon(overviewPathGeo),
              fillColor: '#ff0000',
        });
        bermudaTriangle.setMap(map);

        var summaryPanel = document.getElementById('directions-panel');
        summaryPanel.innerHTML = '';
        // For each route, display summary information.
        for (var i = 0; i < route.legs.length; i++) {
          var routeSegment = i + 1;
          summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
              '</b><br>';
          summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
          summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
          summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
        }
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

  createPolygon = function(overviewPath) {
    if(overviewPath && overviewPath.length>= 0){
        last_width_long = 7;
        var distance = last_width_long / 1000;  //en km.
        distance = (distance / 111.12);
        geoInput = {
            type: "LineString",
            coordinates: overviewPath
        };
        var geoReader = new jsts.io.GeoJSONReader(),
            geoWriter = new jsts.io.GeoJSONWriter();
        var geometry = geoReader.read(geoInput).buffer(distance);
        var polygon = geoWriter.write(geometry);
        polygon_route = polygon;

        var areaCoordinates = [];
        var polygonCoordinates = polygon.coordinates[0];
        for (i = 0; i < polygonCoordinates.length; i++) {
            var coordinate = polygonCoordinates[i];
            areaCoordinates.push(new google.maps.LatLng(coordinate[1], coordinate[0]));//set latitude a
        }
        return areaCoordinates;
    }else return false;
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>

  <div id="map-canvas"></div>
  <div id="directions-panel"></div>

Your Answer

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

Browse other questions tagged or ask your own question.