1
resposta

Mapa com interação

Olá comunidade da Alura, estou desenvolvendo um Website com base no Mapa do Brasil dividido nos 26 estados e Distrito federal, cada estado do país poderá receber dinamicamente marcadores a critério de um "click" pelo usuário, no caso o usuario vai adicionar essa marcação. A marcação depois de adicionada também terá que no ato do "click" mostrar uma janela de interação com textos e imagens . Eu mapeei no Html utilizando a Tag " map " e " area " todos os estados do brasil, mas agora estou com uma dificuldade em pensar como fazer para armazenar em cada estado essa marcação sou novo em linguagens web, acolho qualquer sugestão, desde biblioteca ou conteúdos que possam de alguma forma de solucionar esse problema, ou ao menos guiar-me.

<!DOCTYPE html>
<html>
    <head>
        <title>Mapa do Brasil</title>
        <img src="3068.png" alt="tst" usemap="#Map" />
        <link rel="stylesheet" type="text/css" href="teste.css" />
    </head>

    <body>   
        <map name="Map" id="Map">
            <area alt="RS" title="Rio grande do Sul" href="#" shape="poly" coords="451,713,448,702,452,697,446,685,425,673,409,653,390,656,414,622,443,606,463,602,480,611,493,622,508,635"/>
            <area alt="SC" title="Santa Catarina" href="#" shape="poly" coords="515,631,505,628,503,621,490,613,480,604,468,600,448,597,447,582,477,589,503,581,515,585,528,581,524,620" />

        </map>
    </body>
</html> 
1 resposta

Bom dia, Michel! Tudo bom?

Primeiramente, adorei a ideia do seu site, parabéns!

Se a ideia for persistir esses dados para que outros usuários possam ver, o ideal é usar um banco de dados para armazenar essas marcações.

Se quiser trabalhar com alguma linguagem, pode dar uma olhada na nossa formação Nodejs ou de outra linguagem que preferir. Se não, pode dar uma olhada na documentação do firebase, nele você consegue esse armazenamento em tempo real de forma gratuita e a documentação é bem bacana, acho que pode te ajudar bastante.

Agora, se a ideia for esses marcadores serem apenas para o usuário que está acessando, você pode armazenar esses dados na cache do navegador, por exemplo.

Espero ter ajudado, qualquer coisa estou à disposição!

Abraços