Custom SVG Icon/Marker Solution

[tony-nz]

Hey there

I really needed the support of custom SVG icons to be rendered on the map (custom markers with index values).

End result:
Screenshot

Files modified:

• ios/Plugin/ImageCache/NativeImageCache.swift
• ios/Podfile

File: ios/Plugin/ImageCache/NativeImageCache.swift

import SDWebImage
import UIKit
import SVGKit

final class NativeImageCache: ImageURLLoadable {
    static let shared: ImageURLLoadable = NativeImageCache()

    
    private lazy var cache: NSCache<AnyObject, AnyObject> = {
        NSCache<AnyObject, AnyObject>()
    }()

    private init(){}

    func image(at urlString: String, resizeWidth: Int, resizeHeight: Int, completion: @escaping VoidReturnClosure<UIImage?>) {
        // Check if the provided string is a data URL.
        if urlString.starts(with: "http:") || urlString.starts(with: "https:") {
            if let url = URL(string: urlString) {
                // If urlString starts with "http:" or "https:" and can be converted to a valid URL, download and process the image.
                downloadImage(fromURL: url, resizeWidth: resizeWidth, resizeHeight: resizeHeight, completion: completion)
            } else {
                // Handle the case where urlString is not a valid URL.
                completion(nil)
            }
        } else {
            if let svgData = Data(base64Encoded: urlString, options: Data.Base64DecodingOptions(rawValue: 0)) {
                processSVGImage(svgData, resizeWidth: resizeWidth, resizeHeight: resizeHeight, completion: completion)
            } else {
                // Handle the case where the input is not valid SVG data.
                completion(nil)
            }
        }
        // Handle the case where the input is neither a data URL nor a valid URL.
        // print("Invalid image")
        // completion(nil)
    }

    private func downloadImage(fromURL url: URL, resizeWidth: Int, resizeHeight: Int, completion: @escaping VoidReturnClosure<UIImage?>) {
        // Generate custom key based on the size,
        // so we can cache the resized variant of the image as well.
        let key = "\(url.absoluteString)\(resizeWidth)\(resizeHeight)"

        if let image = cache.object(forKey: key as AnyObject) as? UIImage {
            // If the resized image is found in the cache, return it.
            completion(image)
        } else {
            // Otherwise, download the original image.
            SDWebImageDownloader.shared.downloadImage(with: url, options: [], context: nil, progress: nil) { image, _, _, _ in
                // Resize the downloaded image to the preferred size.
                guard let resizedImage = image?.resize(targetSize: CGSize(width: resizeWidth, height: resizeHeight)) else {
                    completion(nil)
                    return
                }
                // Save the resized image in the cache.
                self.cache.setObject(resizedImage, forKey: key as AnyObject)
                // Return the resized image.
                completion(resizedImage)
            }
        }
    }

    private func processSVGImage(_ svgData: Data, resizeWidth: Int, resizeHeight: Int, completion: @escaping VoidReturnClosure<UIImage?>) {
        // Generate a custom key based on the size and SVG data.
        let key = "\(svgData.count)\(resizeWidth)\(resizeHeight)"

        if let image = cache.object(forKey: key as AnyObject) as? UIImage {
            // If the resized image is found in the cache, return it.
            completion(image)
        } else {
            guard let svgImage = SVGKImage(data: svgData) else {
                completion(nil)
                return
            }

            // Resize the SVG image
            svgImage.size = CGSize(width: CGFloat(resizeWidth), height: CGFloat(resizeHeight))

            // Convert the SVG image to a UIImage
            let uiImage = svgImage.uiImage

            // Save the resized image in the cache.
            // DISABLED due to invalid key, if the svg has a two digit value, e.g. 10 and 12, the count of the svg will be the same and result in triggering the cache, which makes me think there isn't a need for caching in this instance
            // self.cache.setObject(uiImage, forKey: key as AnyObject)

            // Return the resized UIImage
            completion(uiImage)
        }
    }

    func clear(completion: @escaping NoArgsClosure) {
        cache.removeAllObjects()
        completion()
    }
}

File: ios/Podfile

platform :ios, '13.0'

def capacitor_pods
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  pod 'Capacitor', :path => '../node_modules/@capacitor/ios'
  pod 'CapacitorCordova', :path => '../node_modules/@capacitor/ios'
end

target 'Plugin' do
  use_frameworks!
  pod 'GoogleMaps'
  capacitor_pods
  pod 'SVGKit', :git => 'https://github.com/SVGKit/SVGKit.git', :branch => '3.x'
end

target 'PluginTests' do
  use_frameworks!
  pod 'GoogleMaps'
  capacitor_pods
end

Frontend/App code:

const generateSvg = (priority: number) => {
    return btoa(`
  <svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
    <g>
      <!-- Original polygon -->
      <polygon points="10,10 110,10 110,80 60,100 10,80" fill="#3b82f6" stroke="#2563eb" stroke-width="4" />
    </g>
  
    <text x="60" y="55" fill="white" font-family="Helvetica" font-size="42" text-anchor="middle" alignment-baseline="middle">
      ${priority}
    </text>
  </svg>`);
};

// loop through waypoints and create a marker
waypoints.forEach(async (waypoint, index) => {
    const svgContent = generateSvg(waypoint.priority);

    await CapacitorGoogleMaps.addMarker({
      mapId: mapId,
      position: {
        latitude: waypoint.lat,
        longitude: waypoint.lng,
      },
      preferences: {
        title: 'Some title',
        snippet: 'Some snippet',
        metadata: {
          some: 'data',
        },
        icon: {
          url: svgContent,
          size: {
            width: 40,
            height: 40,
          },
        },
      },
    });
  });
};

I'd greatly appreciated any suggestions/improvements as I've never touched Swift prior to this. Big thanks for such an awesome package!

Edit: I've disabled the caching for the svg due to an invalid key. if the svg has a two digit value (see priority within generateSvg), e.g. 10 and 12, the count of the svg will be the same and result in triggering the cache, which makes me think there isn't a need for caching in this instance?

[tony-nz]

Following up on the caching, I guess I could do it via hashing it, see here