Join Steven Lipton for an in-depth discussion in this video Use markers instead of pins for map annotations, part of iOS Development Tips Weekly.
- [Narrator] For as long as there's been a map in iOS, there's been pins. The map of pizza restaurants in Chicago I have here has those multicolor pins you've seen before. While you can still use them, iOS11 changes pins to something far more flexible and useful: Markers. I'll show you how to use markers. You'll find a starter file on GitHub. When you open the code, you'll find model of pizza annotations which creates an array of pizza restaurants as annotations. If you want to learn more, take a look at the course Advanced iOS App Development: MapKit and Core Location.
I'm going to assume you're familiar with annotations. To get a marker, I zoom down here to the MapView, viewFor annotation code, and I'm going to change all the pin annotation views to marker annotation views. And that's just as easy as changing pin to marker. That will make the annotation views here wrong because we cast them to pin annotation views, so I'll change those too, and we'll get one more error, since there's no pinTinColor anymore.
Instead, marker annotations have a markerTintColor, so I change this to markerTintColor, and go ahead and run this on my iPhone 8 Plus simulator. You now have those balloon markers with pins glyphs. Double tap on the map to zoom in near the black marker. Under the marker is the title with the restaurant name. If you click on the marker, it expands.
Go ahead and close the app. You can customize the marker several ways. Under the markerTint, add the following. Annotation view G-L-Y-P-H. You'll see several selections here. You can add your own glyphs, an image that appears instead of that pin inside the balloon of the marker. Glyphs can be text or emoji using the glyphText property, or 40 point by 40 point images using the glyphImage property.
Like tab bar images, these images gray value is determined by their alpha channel only. I've made an image for you in the assets folder named pizza. Finish the line by adding a glyphImage to UIImage pizza. So go ahead and click glyphImage, equals UIImage, and scroll down here to named, quote pizza. You can change the glyphTint color too. I'm going to change it to yellow, and we use the glyphTintColor property for that.
So we go to annotation view dot G-L-Y, glyphTintColor equals dot Y-E-L-L-O-W, yellow. Okay, run the app again, and you'll see icons instead of pins. Now notice the marker in downtown Chicago, this one right here. Double click or zoom on it a couple times, and that one marker will split into three. Markers, unlike pins, will not crowd your map.
When there are some too close together, they will cluster. Once you zoom back in, they'll split back out. Stop the app and under glyphTintColor, add the following: annotation view dot clusteringIdentifier equals identifier. This is our reuse identifier from our annotation view, and I've set it to the clustering identifier. The clusterIdentifier property clusters the markers.
If there's a few of the same identifier next to eachother, it replaces the cluster of markers with a single marker with a glyph, indicating the number of markers there. Run this, in place of the pizza, you see a three. If you were to zoom in on the three marker, the three markers would appear. As you would zoom out, you would see a new marker show up. Zoom out enough, and only one restaurant is left. There's more you can do with markers, but this gives you a good idea to get a less cluttered, better looking map than you can with pins.