Free Hand Drawing on Maps with MapBox SDK
Recently, I got to work on the MapBox SDK for iOS. So, this is a short journal of my experience with it.
Basically, it's a MapBox SDK based freehand drawing article.
For those who are here for Google Maps based solution, then please refer this blog which is again based on this lib.
This is not a Google Maps Vs MapBox debate as well, please make up your mind before starting up.
[Note: Am not aware of the updates to the Google Maps SDK since 2015]
So, let's start with what I've got to say.
I've already created a Freehand Drawing(FHD, in short) tool, implemented way back in 2015, which was based on the Google Maps SDK, hence for MapBox based FHD solution, I was already 50% done.
In the existing implementation, I have the touch detection and coordinates collection, polyline drawing & polygon drawing logics already implemented and in place, but all of them were using the GoogleMaps API's.
So, the 2 main parts/API's that I'll need to look in MapBox SDK were:
1.) Polyline
2.) Polygon
But, it was not straight-forward though, since the way Google Maps Polyline/Polygon API's designed were just around adding them directly as annotation/kinda directly on the map,
For Ex:
You just have to reference your map object to the polyline object like this:
"polyline.map = mapView"
So, the hierarchy kinda looks like this:
MapView --> Polyline
but with MapBox, there are a few encapsulated layer which allows you to do multiple layers of customization. For example, in order to add a polyline, you can add directly as an annotation just like you do with the Google Maps API (As mentioned above)
Or
You can create a style layer(MGLLineStyleLayer) by assigning an MGLPolylineSource object to which the polyline(MGLPolylineFeature) object is added/referred.
So, here the hierarchy looks something like this:
MapView --> StyleLayer --> Polyline
And, the same goes with respect to the Polygon(MGLPolygon) as well.
So, with MapBox, I can add the polyline/polygon in 2 different ways (As far as I've explored)
Hence, it was quite simple to replace the GMSPolyline API's with respective MapBox polyline API's in the same Objective-C project simply by removing the Google Maps SDK, but I faced an issue, with the implementation, where the Polygon was not getting displayed for dynamically calculated coordinates but was working very well for static coordinates.
I raised an issue on their Github page and got a reply asking me to raise it to their support team, which I didn't expect, and when I emailed to their support team, I got a response back after a day saying that they won't be able to help me debug the issue and suggested to raise it on StackOverflow, so they are basically relying on the community out there for issues, probably since they have a very small team.
But, they pointed me in the code where I was also skeptical about. It was around the CLLocationCoordinates2D array, where the issue might be, but I didn't mind to even fix that because I decided to re-write the whole implementation in Swift by then and thankfully the issue was resolved when I finished writting it up completely in Swift.
So, finally, SARMapDrawView was re-implemented/written in Swift and is open-sourced now as SARMapBoxDrawView.
Am still looking out for the solution of these 2 major issues with MapBox:
1.) Encrypted Path String:
Google Maps SDK has one fantastic API(GMSPath) where they'd just give us the path in a string format (around 10chars, I think). So, basically they have an algorithm working behind the scenes that generates this string based upon the given coordinates of the Polygon(GMSPolygon) object, which is very much helpful when there is a huge coordinates list and any user of the SDK can simply use this encrypted string instead of handling those huge arrays of coordinates, just in case the user is not really cared about the coordinates data but just expects a simple polygon handling mechanism. It works really well and is a very efficient polygon handling approach.
2.) Overlapping/Crossing Polygons:
In FHD, when a user draws multiple overlapping or crossing or inner-circling polygon, then Google Maps polygon(GMSPolygon) simply creates a polygon object by marking with just outer coordinates of all the drawn polygons and it looks like a whole single region drawn, whereas, in MapBox, the Polygon object is not manipulated or moderated but simply drawn on lines of wherever the user drew or wherever the polylines were drawn, it simply looks like a polyline drawn on user's touch path(which we already do), not like a real polygon like in Google Maps - GMSPolygon.
I hope you found this as an Interesting read. Please lemme know in the comments below for anything.
Thanks for your time!
Basically, it's a MapBox SDK based freehand drawing article.
For those who are here for Google Maps based solution, then please refer this blog which is again based on this lib.
This is not a Google Maps Vs MapBox debate as well, please make up your mind before starting up.
[Note: Am not aware of the updates to the Google Maps SDK since 2015]
So, let's start with what I've got to say.
I've already created a Freehand Drawing(FHD, in short) tool, implemented way back in 2015, which was based on the Google Maps SDK, hence for MapBox based FHD solution, I was already 50% done.
In the existing implementation, I have the touch detection and coordinates collection, polyline drawing & polygon drawing logics already implemented and in place, but all of them were using the GoogleMaps API's.
So, the 2 main parts/API's that I'll need to look in MapBox SDK were:
1.) Polyline
2.) Polygon
But, it was not straight-forward though, since the way Google Maps Polyline/Polygon API's designed were just around adding them directly as annotation/kinda directly on the map,
For Ex:
You just have to reference your map object to the polyline object like this:
"polyline.map = mapView"
So, the hierarchy kinda looks like this:
MapView --> Polyline
but with MapBox, there are a few encapsulated layer which allows you to do multiple layers of customization. For example, in order to add a polyline, you can add directly as an annotation just like you do with the Google Maps API (As mentioned above)
Or
You can create a style layer(MGLLineStyleLayer) by assigning an MGLPolylineSource object to which the polyline(MGLPolylineFeature) object is added/referred.
So, here the hierarchy looks something like this:
MapView --> StyleLayer --> Polyline
And, the same goes with respect to the Polygon(MGLPolygon) as well.
So, with MapBox, I can add the polyline/polygon in 2 different ways (As far as I've explored)
Hence, it was quite simple to replace the GMSPolyline API's with respective MapBox polyline API's in the same Objective-C project
I raised an issue on their Github page and got a reply asking me to raise it to their support team, which I didn't expect, and when I emailed to their support team, I got a response back after a day saying that they won't be able to help me debug the issue and suggested to raise it on StackOverflow, so they are basically relying on the community out there for issues, probably since they have a very small team.
But, they pointed me in the code where I was also skeptical about. It was around the CLLocationCoordinates2D array, where the issue might be, but I didn't mind to even fix that because I decided to re-write the whole implementation in Swift by then and thankfully the issue was resolved when I finished writting it up completely in Swift.
So, finally, SARMapDrawView was re-implemented/written in Swift and is open-sourced now as SARMapBoxDrawView.
Am still looking out for the solution of these 2 major issues with MapBox:
1.) Encrypted Path String:
Google Maps SDK has one fantastic API(GMSPath) where they'd just give us the path in a string format (around 10chars, I think). So, basically they have an algorithm working behind the scenes that generates this string based upon the given coordinates of the Polygon(GMSPolygon) object, which is very much helpful when there is a huge coordinates list and any user of the SDK can simply use this encrypted string instead of handling those huge arrays of coordinates, just in case the user is not really cared about the coordinates data but just expects a simple polygon handling mechanism. It works really well and is a very efficient polygon handling approach.
2.) Overlapping/Crossing Polygons:
In FHD, when a user draws multiple overlapping or crossing or inner-circling polygon, then Google Maps polygon(GMSPolygon) simply creates a polygon object by marking with just outer coordinates of all the drawn polygons and it looks like a whole single region drawn, whereas, in MapBox, the Polygon object is not manipulated or moderated but simply drawn on lines of wherever the user drew or wherever the polylines were drawn, it simply looks like a polyline drawn on user's touch path(which we already do), not like a real polygon like in Google Maps - GMSPolygon.
I hope you found this as an Interesting read. Please lemme know in the comments below for anything.
Thanks for your time!
Comments