Integrating Galli Maps on iOS using UIKit with Maplibre

MapLibre Native for iOS serves as a toolkit, empowering developers to easily integrate dynamic map displays with scalable, adaptable vector maps of Galli Maps into their iOS applications.
In this guide, we'll walk you through the integration of Maplibre Native into your iOS application using UIKit with step-by-step examples.

1. Integrating GalliMaps with Maplibre

#### Step 1: Add Maplibre Native SDK

Add Maplibre Native SDK to your project using Swift Package Manager.
  1. To add a package dependency to your Xcode project, select File > Add Package Dependency and enter its repository URL. You can also navigate to your target’s General pane, and in the “Frameworks, Libraries, and Embedded Content” section, click the + button, select Add Other, and choose Add Package Dependency.

  2. Either add Maplibre GitHub distribution URL or search for maplibre-gl-native package.

#### Step 2: Set Up MapView

Create a new ViewController and add the following code in the viewDidLoad in order to construct a map view. To load the map tiles, you will need to include an access token in the URL to authenticate and render the tiles onto the MLNMapView.
import UIKit
import MapLibre

class ViewController: UIViewController, MLNMapViewDelegate {
override func viewDidLoad() {
	// Do any additional setup after loading the view.
	title = "Simple Map"
	// construct style URL
	let styleURL = URL(string:
	// create the map view
	let mapView = MLNMapView(frame: view.bounds, styleURL: styleURL)
	mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
	mapView.delegate = self
	mapView.logoView.isHidden = true
	// Set the map’s center coordinate and zoom level.
	CLLocationCoordinate2D(latitude: 27.69818, longitude: 85.32385),
	zoomLevel: 12,
	animated: false)

Loading Galli Maps' Vector Tiles

2. Pin Marker on Map [ Example ]

This example shows how to add a marker (pin) on the map at a specific geographical position defined by latitude and longitude. It creates a marker with options such as position and title, then adds it to the map. Add the following functions inside Coordinator class which uses MGLMapViewDelegate protocol.

func createMarkerSymbol(_ mapView: MGLMapView, _ style: MGLStyle) {
	// Create point to represent where the symbol should be placed
	let point = MGLPointAnnotation()
	point.coordinate = CLLocationCoordinate2D( latitude: 27.69818, longitude: 85.32385)
	// Create a data source to hold the point data
	let shapeSource = MGLShapeSource(identifier: "marker-source", shape: point, options: nil)
	// Create a style layer for the symbol
	let shapeLayer = MGLSymbolStyleLayer(identifier: "marker-style", source: shapeSource)
	// Add the image to the style's sprite
	if let image = UIImage(named: "house-icon") {
		style.setImage(image, forName: "home-symbol")
	// Tell the layer to use the image in the sprite
	shapeLayer.iconImageName = NSExpression(forConstantValue: "home-symbol")
	// Add the source and style layer to the map
func mapView(_ mapView: MGLMapView, didFinishLoading style: MGLStyle) {
	self.control.createMarkerSymbol(mapView, style)

Pin marker on map

3. Draw a Polyline on Map [ Example ]

Here, we draw a polyline on the map by connecting multiple geographical points. It creates a polyline with options such as color and width, then adds it to the map.

func drawPolyline(_ mapView: MLNMapView) {
	let coordinates = [
	CLLocationCoordinate2D(latitude: 27.69818, longitude: 85.32385),
	CLLocationCoordinate2D(latitude: 27.66918, longitude: 85.32034)
	let polyline = MLNPolyline(coordinates: coordinates, count: UInt(coordinates.count))

func mapView(_ mapView: MLNMapView, didFinishLoading style: MLNStyle) {
	self.control.drawPolyline(mapView, style)

Polyline on map

4. Draw a Polygon on Map [ Example ]

Similar to drawing a polyline, this example demonstrates drawing a polygon on the map by defining its vertices (points). It creates a polygon with options such as fill and stroke colors, then adds it to the map.

func drawPolygon(_ mapView: MLNMapView) {
    let coordinates = [
     CLLocationCoordinate2D(latitude: 27.72441, longitude: 85.29000),
     CLLocationCoordinate2D(latitude: 27.72206, longitude: 85.34864),
     CLLocationCoordinate2D(latitude: 27.67013, longitude: 85.34181)
    let polygon = MLNPolygon(coordinates: coordinates, count: UInt(coordinates.count))

func mapView(_ mapView: MLNMapView, didFinishLoading style: MLNStyle) {
    self.control.drawPolygon(mapView, style)

Polygon on map

For more information on maplibre sdk for iOS please refer to following page: Maplibre Native (iOS)