Skip to main content

Lines on a map

Contents

Draw lines on a map using LineString objects.

lines on a map

import UIKit
import TrimbleMaps
import TrimbleMapsAccounts
import RoutePlugin
import TrimbleMapsWebservicesClient

class LinesOnAMapViewController: UIViewController, AccountManagerDelegate, TMGLMapViewDelegate {

    internal var mapView: TMGLMapView!

    let SOURCE_ID = "tristatepoints"
    let LAYER_ID = "tristatepoints"

    override func viewDidLoad() {
        super.viewDidLoad()

        let apiKey = "E9E5E10279843C4EA9724D59CBE5889D"
        let account = Account(apiKey: apiKey, region: Region.northAmerica)
        AccountManager.default.account = account
        AccountManager.default.delegate = self
    }

    func stateChanged(newStatus: AccountManagerState) {
        if newStatus == .loaded {
            DispatchQueue.main.async {
                // Create a map view
                self.mapView = TMGLMapView(frame: self.view.bounds)
                self.mapView.delegate = self

                // Set the map location
                let center = CLLocationCoordinate2D(latitude: 40.60902838712187, longitude: -97.73800045737227)
                self.mapView.setCenter(center, zoomLevel: 2.5, animated: false)

                // Add the map
                self.view.addSubview(self.mapView)
            }
        }
    }

    func mapViewDidFinishLoadingMap(_ mapView: TMGLMapView) {
        // In this example a .json file is being used as the source

        let filePath = Bundle.main.path(forResource: "lines", ofType: "json")!
        let fileUrl = URL(fileURLWithPath: filePath)

        // Create a source and add it to the style. Important to note, sources are linked to styles.
        // If you change the style you may need to re-add your source and layers
        let shapeSource = TMGLShapeSource(identifier: SOURCE_ID, url: fileUrl, options: .none)
        mapView.style?.addSource(shapeSource)

        // Create a LineLayer to display our source information.
        let lineLayer = TMGLLineStyleLayer(identifier: LAYER_ID, source: shapeSource)
        lineLayer.lineWidth = NSExpression(forConstantValue: 6)
        lineLayer.lineColor = NSExpression(forConstantValue: UIColor.blue)
        lineLayer.lineOpacity = NSExpression(forConstantValue: 0.8)

        // add the layer
        mapView.style?.addLayer(lineLayer)
    }

}

Sample JSON (lines.json)

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -119.091796875,
            44.08758502824516
          ],
          [
            -108.80859375,
            44.213709909702054
          ],
          [
            -114.2578125,
            44.213709909702054
          ],
          [
            -113.90625,
            36.31512514748051
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -111.09374999999999,
            36.94989178681327
          ],
          [
            -111.357421875,
            42.5530802889558
          ],
          [
            -107.138671875,
            41.83682786072714
          ],
          [
            -108.10546875,
            39.36827914916014
          ],
          [
            -111.005859375,
            39.30029918615029
          ],
          [
            -108.017578125,
            36.80928470205937
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -105.64453124999999,
            42.22851735620852
          ],
          [
            -100.1953125,
            42.35854391749705
          ],
          [
            -102.919921875,
            42.22851735620852
          ],
          [
            -103.0078125,
            36.94989178681327
          ],
          [
            -105.908203125,
            37.020098201368114
          ],
          [
            -99.931640625,
            36.94989178681327
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -98.349609375,
            36.87962060502676
          ],
          [
            -98.173828125,
            42.48830197960227
          ],
          [
            -95.80078125,
            39.33429742980725
          ],
          [
            -94.0869140625,
            42.5530802889558
          ],
          [
            -94.04296874999999,
            37.055177106660814
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -92.548828125,
            42.48830197960227
          ],
          [
            -92.548828125,
            36.73888412439431
          ],
          [
            -89.1650390625,
            37.26530995561875
          ],
          [
            -89.4287109375,
            39.50404070558415
          ],
          [
            -92.021484375,
            39.842286020743394
          ],
          [
            -89.384765625,
            40.51379915504413
          ],
          [
            -89.384765625,
            42.391008609205045
          ],
          [
            -92.493896484375,
            42.49640294093705
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -87.4072265625,
            42.35854391749705
          ],
          [
            -87.9345703125,
            37.23032838760387
          ],
          [
            -83.583984375,
            37.19533058280065
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -78.837890625,
            37.33522435930639
          ],
          [
            -82.4853515625,
            37.3002752813443
          ],
          [
            -82.44140625,
            39.774769485295465
          ],
          [
            -79.27734374999999,
            39.70718665682654
          ],
          [
            -82.44140625,
            40.01078714046552
          ],
          [
            -82.3974609375,
            41.705728515237524
          ],
          [
            -79.1455078125,
            41.672911819602085
          ]
        ]
      }
    }
  ]
}
Last updated December 2, 2022.
Contents