Criador de mapa de imagem

Criador de mapa de imagem — pontos clicáveis

Você insere uma foto e recebe um mapa de imagem clicável — pontos numerados sobre os prédios certos, uma legenda que os nomeia e uma página pronta para publicar ou incorporar.

East Blue, alfinete aberto — Um alfinete na rocha do farol, seu nome e linha abrindo sem sair do mapa. — East Blue, alfinete aberto

Campus, detalhe — Alfinetes numerados no salão, pátio e portão; a legenda repete cada número. — Campus, detalhe

Ribcage, detalhe — A camada de pontos fica sobre a ilustração em vez de ao lado dela. — Ribcage, detalhe

Inazuma, detalhe — Cada ilha mantém seu próprio alfinete, e a camada se ajusta à imagem. — Inazuma, detalhe

One Piece · East Blue — Seis ilhas e um cinturão de tempestade; cada alfinete é um lugar onde a história começa. — **One Piece · East Blue** — Seis ilhas e um cinturão de tempestade; cada alfinete é um lugar onde a história começa.

One Piece · Water 7 — Um anel de canais, seis paradas: fonte, torre do relógio, docas, trem marítimo, mercado, portão. — **One Piece · Water 7** — Um anel de canais, seis paradas: fonte, torre do relógio, docas, trem marítimo, mercado, portão.

One Piece · Wano — Cinco províncias em uma ilha murada, com a capital no centro. — **One Piece · Wano** — Cinco províncias em uma ilha murada, com a capital no centro.

Genshin Impact · Liyue — Porto, terraço, estalagem, campos, floresta de pedra e portão em um litoral. — **Genshin Impact · Liyue** — Porto, terraço, estalagem, campos, floresta de pedra e portão em um litoral.

Genshin Impact · Inazuma — Seis ilhas atrás de um anel de tempestade, cada uma com sua própria missão. — **Genshin Impact · Inazuma** — Seis ilhas atrás de um anel de tempestade, cada uma com sua própria missão.

Jujutsu Kaisen · Tokyo Jujutsu High — Um plano de campus com sete alfinetes: salão, dormitório, pátio, portão, santuário, depósito, estrada. — **Jujutsu Kaisen · Tokyo Jujutsu High** — Um plano de campus com sete alfinetes: salão, dormitório, pátio, portão, santuário, depósito, estrada.

Jujutsu Kaisen · Shibuya — Estação, cruzamento, torre, ponte e becos — e o véu na borda. — **Jujutsu Kaisen · Shibuya** — Estação, cruzamento, torre, ponte e becos — e o véu na borda.

Ribcage · the districts — Uma cidade dentro de uma caixa torácica, com alfinetes nomeando os órgãos onde ela vive. — **Ribcage · the districts** — Uma cidade dentro de uma caixa torácica, com alfinetes nomeando os órgãos onde ela vive.

Ash Harbor · the fog line — Sete alfinetes em uma costa tortuosa, da estrada das marés ao farol. — **Ash Harbor · the fog line** — Sete alfinetes em uma costa tortuosa, da estrada das marés ao farol.

Uma foto é o começo. Os lugares atrás dela são o mundo.

Neta Studio é um construtor de mundos por IA — o mesmo mundo mantém o mapa, as pessoas que vivem nele e as cenas que acontecem entre os alfinetes. Publique a página, crie uma cópia ou continue adicionando lugares ao mesmo mapa.

Alfinetes que ficam na foto — Os pontos são armazenados como porcentagens da imagem, então o mesmo mapa mantém seus alinhamentos em 900px em um desktop e 390px na mão.
Uma legenda, não uma tabela de coordenadas — Cada número tem um nome e uma linha. Nada para medir, nada para digitar manualmente em uma tag area.
Uma página, pronta para compartilhar — O mapa é publicado como uma página que você pode enviar, incorporar ou continuar construindo dentro do mesmo mundo.

Perguntas antes de criar um

O que é um mapa de imagem?

Uma foto cujas regiões são clicáveis. Em HTML, é uma imagem mais um mapa de formas de área; aqui, a foto e sua camada de pontos são criadas juntas, então um alfinete abre um nome e uma linha em vez de um conjunto de coordenadas.

Preciso definir as coordenadas manualmente?

Não. Nomeie os lugares e os alfinetes são colocados neles, armazenados como porcentagens da imagem. Se um errar a rua, diga qual alfinete e onde ele pertence e ele se move.

Posso usar minha própria foto?

Sim. Anexe uma foto, uma planta baixa, um print ou um pôster, então nomeie os lugares nele. Arte gerada é apenas o padrão porque a maioria dos mapas começa em uma página em branco.

Ele escreve o código de mapa HTML?

Ele publica uma página com uma camada de pontos real — números, legendas, links — que se ajusta à imagem. Se precisar colocar em seu site, peça o JSON de pontos e a marcação de área junto com a página.

Um ponto pode ter um link?

Sim. Um alfinete pode abrir um painel, pular para outro lugar no mesmo mapa ou apontar para uma URL que você fornecer.

Funciona no celular?

Sim. As coordenadas são porcentagens, então os alfinetes ficam nos prédios quando o mapa diminui; os painéis abrem como um cartão perto do alfinete em vez de uma barra lateral.

O que posso mapear?

Mapas mundiais, níveis de jogos, planos de campus e plantas baixas, assentos de locais, diagramas de produtos, uma foto de uma rua. Se for uma foto com lugares, ela pode receber alfinetes.

Quantos pontos um mapa deve ter?

Cinco a oito é o número ideal — suficiente para ser útil, pouco o bastante para a imagem continuar legível. Um mapa de cidade movimentada pode levar doze se os alfinetes forem agrupados por distrito.

Dê ao próximo mapa uma camada clicável.

Nomeie os lugares uma vez. A foto, os alfinetes, a legenda e a página voltam juntos.

Criar um mapa de imagem