CODEWITHSUNDEEP
iosgoogle-mapsmapkitmkmapviewswift4
Ekta Padaliya
Ekta Padaliya

Reputation: 5799

Swift 4 MKMapView change map style like GoogleMap

I am using MKMapView in my application. Now I want to change map style to dark theme.

In GoogleMap we can change style of map. So How can I achieve style in MKMapView.

Please help me.

Upvotes: 3

Views: 7306

Answers (4)

Trần Thị Diệu My
Trần Thị Diệu My

Reputation: 1413

You can try this github repo.

https://github.com/fmo91/MapKitGoogleStyler

Upvotes: 0

Midhun
Midhun

Reputation: 2177

you can get too many custom styles json file from snazzy maps

https://snazzymaps.com/

Upvotes: 0

Vinoth
Vinoth

Reputation: 9734

You can achieve the Dark Theme in MapView using Google Maps API. Have a look at this documentation for styling the MapView https://developers.google.com/maps/documentation/ios-sdk/styling.

With Google Maps APIs Styling Wizard, you can customize themes, roads, labels etc. Then add a new file to your project named style.json and paste this custom style.

See the below link for selecting map themes such as Standard, Dark, Silver, Night, Retro etc. Take a look at https://mapstyle.withgoogle.com to create map style for MapView.

Here's the sample repository on GitHub, it demonstrate the use of styling the MapView. See this medium post too

Upvotes: 1

Pierre Perrin
Pierre Perrin

Reputation: 435

In MKMapView you are not able to change the apple's map theme. You can change the map type: Example for satellite :

self.mapView?.mapType = .satellite

You can also use tiles from a different provider.

class YourMapViewController: UIViewController, MKMapViewDelegate {

    @IBOutlet var mapView : MKMapView?

    override func viewDidLoad() {
        super.viewDidLoad()

        self.mapView?.delegate = self
        self.tilesRenderer.reloadData()
        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    lazy var tilesRenderer : MKTileOverlayRenderer! = {

        let urlTemplate = "The tiles URL"  // URL template is a string where the substrings "{x}", "{y}", "{z}", and "{scale}" are replaced with values from a tile path to create a URL to load. For example: http://server/path?x={x}&y={y}&z={z}&scale={scale}.
        let overlay = MKTileOverlay.init(urlTemplate: urlTemplate)
        overlay.isGeometryFlipped = false
        overlay.canReplaceMapContent = true
        self.mapView?.add(overlay, level: MKOverlayLevel.aboveLabels)

        let renderer = MKTileOverlayRenderer.init(tileOverlay: overlay)
        return renderer
    }()

    public func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer{

        return self.tilesRenderer
    }
}

An other alternative could be to use the GoogleMap iOS SDK: GoogleMaps iOS SDK

Upvotes: 0

Related Questions