Step Coordenada Geografica

Versao: 1.0.0 Data: 13/03/2026

---

Visao Geral

O componente Step Coordenada Geografica permite a captura de coordenadas geograficas dentro de formularios multi-step. Integra um mapa interativo OpenLayers com campos de latitude/longitude, conversor de coordenadas DMS (graus, minutos, segundos) para decimal e um painel lateral de instrucoes para orientar o usuario.

---

Estrutura HTML

<div class="step-coordenada-geografica">
    <!-- Painel do formulario (coluna esquerda) -->
    <div class="step-coordenada-geografica__form">
        <div class="step-coordenada-geografica__fields">
            <label>Latitude</label>
            <input type="text" name="latitude" placeholder="-15.7801">
            <label>Longitude</label>
            <input type="text" name="longitude" placeholder="-49.3265">
        </div>

        <div class="step-coordenada-geografica__conversor">
            <!-- Conversor DMS para Decimal -->
            <span>Graus</span> <input type="text" name="graus">
            <span>Min</span> <input type="text" name="minutos">
            <span>Seg</span> <input type="text" name="segundos">
            <button type="button">Converter</button>
        </div>

        <div class="step-coordenada-geografica__instructions">
            <!-- Painel de instrucoes -->
            <p>Clique no mapa para selecionar a coordenada ou preencha os campos manualmente.</p>
        </div>
    </div>

    <!-- Painel do mapa (coluna direita) -->
    <div class="step-coordenada-geografica__map">
        <div id="map-coordenada"></div>
    </div>
</div>

Variante Fullwidth

<div class="step-coordenada-geografica step-coordenada-geografica--fullwidth">
    <!-- Mapa ocupa toda a largura disponivel -->
</div>

---

Funcionalidades

1. Mapa interativo OpenLayers -- o usuario pode clicar diretamente no mapa para definir a coordenada, que e preenchida automaticamente nos campos de latitude e longitude
2. Campos de latitude e longitude -- entrada manual com validacao de formato decimal
3. Conversor DMS para decimal -- permite inserir coordenadas em graus, minutos e segundos e converter automaticamente para formato decimal
4. Painel de instrucoes -- exibe orientacoes contextuais sobre como utilizar o componente
5. Integracao com clipboard -- permite colar coordenadas copiadas de outras fontes diretamente nos campos

---

Classes CSS

Classe	Descricao
.step-coordenada-geografica	Container principal com grid 1fr 2fr
.step-coordenada-geografica--fullwidth	Variante onde o mapa ocupa largura total
.step-coordenada-geografica__form	Painel esquerdo com campos e instrucoes
.step-coordenada-geografica__fields	Grupo de campos lat/lng
.step-coordenada-geografica__conversor	Secao do conversor DMS
.step-coordenada-geografica__instructions	Painel de instrucoes ao usuario
.step-coordenada-geografica__map	Container do mapa OpenLayers

---

Dark Mode

O componente se adapta ao modo escuro ajustando as cores de fundo dos paineis, bordas dos campos e texto das instrucoes. O mapa OpenLayers mantem seu proprio esquema de cores independente.

---

Mantido por: Equipe Ipeweb