Customize MapKit’s MKMapView with Google Maps styling wizard
Customizing MKMapView appearance is not that easy. Here I will tell you how I could totally customize it with code examples.
The last week I’ve been trying to customize a MKMapView, but it was impossible. If you have worked with MapKit for a while, you may know that it is great when you need overlays and polylines, and it has a lot of useful and super interesting features. But the fact is that it isn’t very customizable.
I needed to get the map look similar to Uber’s, which is built using Google Maps, and I didn’t want to change to Google Maps because I had a lot of things done using MapKit. A deep refactor wouldn’t have been a good choice. After a lot of searching and reading StackOverflow threads, I came with a solution.
Tile Overlays
If you haven’t heard about tile overlays before, I can tell you that they can fully customize your map. The mechanism is simple, whenever the map needs to show a “tile” (a small area on it), it will ask a server for an image of that tile. The server, which is called “tile server” will return the tile image and it will be displayed on the map. Simple. Here is a list of some free tile servers.
In iOS this can be done using MKTileOverlay. A tile overlay needs an URL. That URL follows the following schema:
https://somecoolserver.com/path?x={x}&y={y}&z={z}
See those parameters? {x}, {y} and {z}? the {x} and {y} parameters will be filled in by the map view with the coordinates of the tile that it’s requesting, and the {z} will be filled in with the zoom level.
Google Style Wizard
Google has done a really great job with its Google Map Styling Wizard. I have to recognize it. It has a simple interface and it’s absolutely powerful. Using this wizard you can create a configuration JSON that you can import from Google Maps SDK or you can get a URL from which you can display a static map (an image).
But in this point I faced with a big problem. Okay, this is great, I can customize a map as much as I want, but how do I get this imported in my MKMapView?
I supposed I had to transform that JSON file into a tile overlay server URL schema.
The solution came with StackOverflow 🙌 . See this http://stackoverflow.com/questions/29692737/customizing-google-map-tile-server-url.
At the end of that thread was a brief script written in javascript. So the first I did is copy that function to a js file and executed it using node.js. It worked! But it wasn’t very convenient. Imagine that another developer had to do the same. He would have needed to execute that node.js script whenever he wanted to do any change to the map.
The final solution
At the end, I translated that script to swift and uploaded it as a cocoapod. The pod is called MapKitGoogleStyler and you can find it here: https://github.com/fmo91/MapKitGoogleStyler.
Having it embedded into the project has some advantages, like having the json saved in a file direct in your project. Whenever you change the json file, your map appearance changes. Simply magic.
The other option is having your map configuration JSON hosted in your backend. When you start your app, you request that JSON to your backend or recover it from your cache and your map gets configured. This is called backend driven UI.
Code example
The first thing you have to do is create a JSON using Google Maps Styling Wizard. If you are experimenting and want to have a simple demonstration, you can use this sample JSON: https://gist.github.com/fmo91/b5e539fd3d276bde3ada10719b912b1e
Include that JSON into your project and name it overlay.json.
Second, in your Podfile include this line:
pod "MapKitGoogleStyler"Then, in your ViewController or wherever you have your map, include the framework:
import MapKitGoogleStylerAnd add the overlay to your map:
Finally, don’t forget to add this to your MKMapViewDelegate:
Here is the full swift file:
I hope this will help you as much as me!
