InteractiveMap

Mapa interativo

Uma biblioteca para usar mapas baseados em SVG interativamente no SwiftUI.

• Funciona apenas com mapas baseados em .svg
• Permite modificar todas as províncias do mapa com os atributos que Shape do SwiftUI fornece
• Arraste, solte e anime as províncias, bem como o próprio mapa.

Observação! A análise de SVG ainda não está em sua forma final, portanto alguns SVGs podem não ser analisados ​​corretamente. Mas, pelo que posso ver, quase todos os mapas estão desenhados corretamente. Você pode ver os mapas que experimentei na seção Mapas.

Os mapas são retirados do Repositório FSInteractiveMap

Instalação

Requer iOS 13+

Atualmente, o InteractiveMap só pode ser instalado através do Swift Package Manager.

Gerenciador de pacotes Swift Adicione o URL do pacote:

https://github.com/GrandSir/InteractiveMap

Exemplos e ShowCase

Efeito de escala 3D

Mapa assustador

Tela de seleção da província de Mihmandar

Uso

SwiftUI

Para desenhar seu mapa SVG no SwiftUI, use InteractiveMap com um encerramento tomando PathData como parâmetro.

InteractiveMap usa InteractiveShape s para desenhar todos os caminhos definidos em SVG. Mas ele precisa saber qual Path será desenhado, ou seja, InteractiveMap { pathData in } funciona exatamente como ForEach { index in } e retorna um encerramento iterável retornando PathData como parâmetro, que contém todas as informações sobre Path s definidos dentro de svg.

import SwiftUI
import InteractiveMap

struct ContentView : View {
    var body : some View {
        InteractiveMap ( svgName : " tr " ) { pathData in // or just use $0
            InteractiveShape ( pathData )
                . initWithAttributes ( )
        }
    }
}

O InteractiveMap se redimensiona para o quadro atribuído, ocupa todo o espaço disponível por padrão e se redimensiona de forma responsiva nas rotações do dispositivo.

Personalização

Em vez de usar atributos padrão, você também pode definir seus próprios atributos.

 InteractiveMap ( svgName : " tr " ) {
    InteractiveShape ( $0 )
        . initWithAttributes ( . init ( strokeWidth : 2 , strokeColor : . red , background : Color ( white : 0.2 ) ) )
} 

Personalização Avançada

Embora .initWithAttributes economize tempo para personalização simples, ele não é altamente personalizável nem editável.

Como InteractiveShape é um Shape , você pode usar qualquer método com InteractiveShape que possa ser usado com Shape .

 InteractiveMap ( svgName : " tr " ) {
    InteractiveShape ( $0 )
        . stroke ( Color . cyan )
        . shadow ( color : . cyan , radius : 3 , x : 0 , y : 0 )
        . background ( InteractiveShape ( $0 ) . fill ( Color ( white : 0.15 ) ) )
} 

Tratamento de cliques

PathData é uma Struct que contém todas as informações sobre todos os caminhos, no nosso exemplo de mapa, são distritos e províncias.

Possui 5 variáveis ​​dentro dele. id , path e name , boundingBox e svgBounds

id é o identificador exclusivo que está sendo analisado diretamente do SVG

A maioria dos SVGs de mapas (NÃO TODOS!) Tem o atributo id em todos os seus elementos <path> assim:

<path ... id="<id>", name="<name>">

MapParser , definido em MapParser.swift analisa esse elemento e os armazena na estrutura PathData .

Se não houver nenhum atributo id no caminho, o MapParser cria automaticamente uma string UUID.

Mas se você for armazenar esse ID em algum lugar, esteja ciente de que a UUID String é regenerada automaticamente toda vez que o InteractiveMap estiver sendo desenhado.

import SwiftUI
import InteractiveMap

struct ContentView : View {
    @ State private var clickedPath = PathData ( )
    var body : some View {
        VStack {
            Text ( clickedPath . name . isEmpty ? " " : " ( clickedPath . name ) is clicked! " )
                . font ( . largeTitle )
                . padding ( . bottom , 15 )

            InteractiveMap ( svgName : " tr " ) { pathData in // is a PathData
                InteractiveShape ( pathData )
                    . stroke ( clickedPath == pathData ? . cyan : . red , lineWidth : 1 )
                    . shadow ( color : clickedPath == pathData ? . cyan : . red ,  radius : 3 )
                    . shadow ( color : clickedPath == pathData ? . cyan : . clear , radius : 3 ) // to increase the glow amount
                    . background ( InteractiveShape ( pathData ) . fill ( Color ( white : 0.15 ) ) ) // filling the shapes
                    . shadow ( color : clickedPath == pathData ? . black : . clear , radius : 5 , y : 1 ) // for depth

                    . onTapGesture {
                        clickedPath = pathData
                    }
                    . zIndex ( clickedPath == pathData ? 2 : 1 ) // this is REQUIRED because InteractiveShapes overlap, resulting in an ugly appearance
                    . animation ( . easeInOut ( duration : 0.3 ) , value : clickedPath )
            }
        }
    }
}

clickedPath == pathData basicamente compara os IDs dos PathDatas.

UI Kit

breve

Sprite Kit

breve