CODEWITHSUNDEEP
iosswiftgoogle-mapsmapbox
Denis
Denis

Reputation: 71

polygon around polyline with radius?

I have the problem with drawing polygon around polyline. I have coordinates of every polyline's point and I want to get coordinates of polygon around this polyline. I use MapBox's map. Any ideas? I didn't find solutions. Something, that seems like this. I need to get coordinates for drawing polygon around line.

enter image description here

Upvotes: 1

Views: 2508

Answers (2)

Denis
Denis

Reputation: 71

I found solution, guys! That was really diffucult :D According to last hint about Turf :)

I found pod "SwiftTurf"

var coordsPointer = UnsafeMutablePointer<CLLocationCoordinate2D>.allocate(capacity: Int(polyline.pointCount))
    polyline.getCoordinates(coordsPointer, range: NSMakeRange(0, Int(polyline.pointCount)))

    // save coords
    var lineCoords: [CLLocationCoordinate2D] = []
    for i in 0..<polyline.pointCount {
        lineCoords.append(coordsPointer[Int(i)])
    }

    let lineString:LineString = LineString(geometry: lineCoords)

    let bufferLineString = SwiftTurf.buffer(lineString, distance: width, units: .Meters)

    let outer = bufferLineString!.geometry![0]
    let interiors = bufferLineString?.geometry![1..<bufferLineString!.geometry.count].map({ coords in
        return MGLPolygon(coordinates: coords, count: UInt(coords.count))
    })
    // This polygon is solution
    self.currentBufferPolygon = MGLPolygon(coordinates: outer, count: UInt(outer.count), interiorPolygons: interiors)
    mapView.addAnnotation(self.currentBufferPolygon!)

U can find more info on github in the pod's repo :) Good luck!

Upvotes: 3

mapsam
mapsam

Reputation: 91

If you're looking to draw a polygon around a polyline in the browser, I suggest using turf.js. Turf's buffer method should work nicely for this exact case.

Here's an example on a Mapbox GL JS map 

var line = {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "LineString",
    "coordinates": [
      [-122.40447521209718,
        37.79367718768535
      ],
      [-122.40803718566895,
        37.79171022624846
      ],
      [-122.40769386291502,
        37.79096412372944
      ],
      [-122.40662097930908,
        37.789641468930114
      ],
      [-122.40941047668457,
        37.789675383451495
      ],
      [-122.40992546081543,
        37.78875968591083
      ],
      [-122.40962505340575,
        37.78791180770003
      ]
    ]
  }
};

mapboxgl.accessToken = 'pk.eyJ1IjoibWFwc2FtIiwiYSI6ImNqNzI4ODR4djBkZmczMnJzZjg3eXZhcDgifQ.5xM2OR_RvuO6YvirBVeiOg';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  zoom: 15,
  center: [-122.4067, 37.7899]
});

map.on('load', function() {
  map.addLayer({
    "id": "route",
    "type": "line",
    "source": {
      "type": "geojson",
      "data": line
    }
  });

  var polygon = turf.buffer(line, 50, 'meters');

  map.addLayer({
    "id": "poly",
    "type": "fill",
    "source": {
      "type": "geojson",
      "data": polygon
    },
    "layout": {},
    "paint": {
      "fill-color": '#d9d838',
      "fill-opacity": 0.3
    }
  });
});
body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
<html>

<head>
  <meta charset='utf-8' />
  <title></title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />

  <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
</head>

<body>
  <div id='map'></div>
</body>

</html>

Upvotes: 3

Related Questions