SECRET OF CSS

How To Create Interactive Maps Using SwiftUI | by Demirhan M. Atabey | Sep, 2022


Learn how to create amazing interactive maps and SVGs using SwiftUI

1*OoIo67HmV4PekfaaP8WEyg
image by author

In Android, if you want to draw an interactive map, you can use GeoChart, or many other chart libraries in this regard. But when it comes to Swift, especially SwiftUI, there’s almost no real way that you can build something like this.

That’s where InteractiveMap library comes to help.

1*lQHuACaVTjoZ B5spc85jw
Maps created with InteractiveMap

Note: Even though the library supports most SVGs, the SVG parsing algorithm is not in its perfect form, so it can cause problems with some SVGs.

Feel free to contribute to this project on my GitHub:

First things first, you have to install the library. InteractiveMap only supports Swift Package Manager so just go to FileAdd Packages… , then enter the URL:

https://github.com/GrandSir/InteractiveMap

Let’s jump into the funny part and take a look at how InteractiveMap renders maps!

To use InteractiveMap, you have to use InteractiveMap View and specify an SVG name.

1* yH0u14JdJbKJA MKuCW Q
A simple map of Turkey

InteractiveMap is a View which returns an iterable closure takes PathData as a parameter (Just like ForEach, but a customized one), which contains all the information about path aka shape.

This is required for a couple of reasons: first, in order to customize Paths in Map, you have to somehow access its data. Therefore, PathData gives you five attributes to customize the shape.

id, name, boundingBox(bounds of the path), svgBounds(bounds of the original SVG) and path(information needed for drawing operations)

Enough information. Now let’s take a look at how we can customize the map.

For basic customization like strokes, path colors, stroke widths, etc. InteractiveShape has a modifier called .initWithAttributes()

1*XXHa0 ycDJyz8s jh6j7pg
Customized Map of China

Okay, that’s awesome! But wait, the library is called InteractiveMap. Where is the interactivity?

That’s true. Right now, you can’t click or do anything with maps. But, as the InteractiveMap library is written natively in SwiftUI, the power of SwiftUI begins to show itself.

At this point, we have to leave .initWithAttributes and write our own customization methods.

1*4 FUF7Su1iEKeNgmpTgJww

But wait, that looks buggy? What’s the problem?

Well, a couple of problems did occur. First, the InteractiveShape’s overlap each other. Therefore, some of the paths stand behind other paths, resulting in an ugly appearance.

Another problem is not actually a problem, but currently, there’s no animation on paths. So, when you click another path, the glow just disappears immediately. Which is not elegant as well.

To fix the first problem, we have to specify a zIndex for paths. Which is a SwiftUI modifier that tells which View should be positioned on top or behind depending on its zIndex.

To fix the second problem, we can just use .animation modifier in SwiftUI.

1*PcOMTVBkl6EQis Uj7c UQ
smooth and great

Thanks for reading! Stay tuned for more.



News Credit

%d bloggers like this: