Creador de mapa de imagen

Creador de mapa de imagen: zonas interactivas en fotos

Subes una foto y obtienes un mapa de imagen clicable de vuelta: zonas numeradas sobre los edificios correctos, una leyenda con sus nombres y una página lista para publicar o insertar.

East Blue, pin abierto — Un pin en la roca del faro; su nombre y descripción se abren sin salir del mapa.
East Blue, pin abierto
Campus, cerrado — Pins numerados en el aula, el patio y la puerta; la leyenda repite cada número.
Campus, cerrado
Ribcage, cerrado — La capa de zonas interactivas se superpone a la ilustración en lugar de estar a un lado.
Ribcage, cerrado
Inazuma, cerrado — Cada isla conserva su pin y la capa se ajusta al tamaño de la imagen.
Inazuma, cerrado
✦Mapa de imagen
Crear un mapa de imagen de un pueblo portuario al atardecer y dónde los cinco gremios tienen sus puertas
One Piece · East Blue — Seis islas y un cinturón de tormentas; cada pin marca donde empieza la historia.
One Piece · East Blue — Seis islas y un cinturón de tormentas; cada pin marca donde empieza la historia.
One Piece · Water 7 — Un anillo de canales, seis paradas: fuente, torre del reloj, muelles, tren marino, mercado, puerta.
One Piece · Water 7 — Un anillo de canales, seis paradas: fuente, torre del reloj, muelles, tren marino, mercado, puerta.
One Piece · Wano — Cinco provincias en una isla amurallada, con la capital en el centro.
One Piece · Wano — Cinco provincias en una isla amurallada, con la capital en el centro.
Genshin Impact · Liyue — Puerto, terraza, posada, campos, bosque de piedra y puerta en una costa.
Genshin Impact · Liyue — Puerto, terraza, posada, campos, bosque de piedra y puerta en una costa.
Genshin Impact · Inazuma — Seis islas tras un anillo de tormenta, cada una con su propia misión.
Genshin Impact · Inazuma — Seis islas tras un anillo de tormenta, cada una con su propia misión.
Jujutsu Kaisen · Tokyo Jujutsu High — Un plano del campus con siete pins: aula, residencia, patio, puerta, santuario, almacén, camino.
Jujutsu Kaisen · Tokyo Jujutsu High — Un plano del campus con siete pins: aula, residencia, patio, puerta, santuario, almacén, camino.
Jujutsu Kaisen · Shibuya — Estación, cruce, torre, puente y callejones; y el velo en el borde.
Jujutsu Kaisen · Shibuya — Estación, cruce, torre, puente y callejones; y el velo en el borde.
Ribcage · the districts — Una ciudad dentro de una caja torácica, con pins que nombran los órganos donde habita.
Ribcage · the districts — Una ciudad dentro de una caja torácica, con pins que nombran los órganos donde habita.
Ash Harbor · the fog line — Siete pins a lo largo de una costa sinuosa, desde el camino de marea hasta el faro.
Ash Harbor · the fog line — Siete pins a lo largo de una costa sinuosa, desde el camino de marea hasta el faro.

Una imagen es el comienzo. Los lugares detrás son el mundo.

Neta Studio es un constructor de mundos con IA. El mismo mundo guarda el mapa, las personas que viven en él y las escenas entre los pins. Publica la página, haz un fork o sigue añadiendo lugares al mismo mapa.

  • Marcadores que se quedan en la imagen — Los puntos se guardan como porcentajes de la imagen, así que el mapa mantiene su alineación a 900px en escritorio y 390px en móvil.
  • Una leyenda, no una tabla de coordenadas — Cada número tiene un nombre y una línea. Nada que medir, nada que escribir manualmente en una etiqueta área.
  • Una página, lista para compartir — El mapa se publica como una página que puedes enviar, insertar o seguir construyendo dentro del mismo mundo.

Preguntas antes de crear uno

¿Qué es un mapa de imagen?

Una imagen con regiones clicables. En HTML es una imagen más un mapa de formas; aquí, la imagen y su capa de puntos se crean juntas, así que un pin abre un nombre y una línea en lugar de un montón de coordenadas.

¿Tengo que trazar las coordenadas yo mismo?

No. Nombra los lugares y los pins se colocarán sobre ellos, guardados como porcentajes de la imagen. Si uno cae en la calle equivocada, di qué pin es y dónde pertenece, y se moverá.

¿Puedo usar mi propia imagen?

Sí. Adjunta una foto, plano, captura o póster y nombra los lugares. El arte generado es solo la opción predeterminada porque muchos mapas empiezan desde cero.

¿Escribe el código HTML del mapa?

Publica una página con una capa real de puntos —números, etiquetas, enlaces— que se ajusta a la imagen. Si necesitas ponerlo en tu sitio, pide el JSON de puntos y el marcado de área junto a la página.

¿Puede un pin enlazar a algún sitio?

Sí. Un pin puede abrir un panel, saltar a otro lugar del mismo mapa o apuntar a una URL que tú indiques.

¿Funcionará en un móvil?

Sí. Las coordenadas son porcentajes, así que los pins se quedan en sus edificios cuando el mapa se encoge; los paneles se abren como una tarjeta cerca del pin en lugar de una barra lateral.

¿Qué puedo mapear?

Mapas mundiales, niveles de juego, planos de campus o plantas, asientos de eventos, diagramas de productos, una foto de una calle. Si es una imagen con lugares, puede llevar pins.

¿Cuántos puntos debe tener un mapa?

Entre cinco y ocho es el punto ideal: suficiente para ser útil y lo bastante poco para que la imagen se lea bien. Un mapa urbano puede tener doce si los pins se agrupan por distrito.

Dale a tu próximo mapa una capa en la que la gente pueda hacer clic.

Nombra los lugares una vez. La imagen, los pins, la leyenda y la página vuelven juntos.

×