'; return; } ufs.forEach(function (uf) { var h = document.createElement('div'); h.className = 'uf'; h.textContent = (ESTADOS[uf] || uf).toUpperCase() + ' · ' + porUf[uf].length; lista.appendChild(h); porUf[uf].sort(function (a, b) { return a.cidade.localeCompare(b.cidade); }).forEach(function (u) { var b = document.createElement('button'); b.type = 'button'; b.className = 'item' + (atual === u.id ? ' on' : ''); b.setAttribute('data-id', u.id); b.innerHTML = ''; b.querySelector('.n').textContent = nomeDe(u); var s = b.querySelector('small'); if (u.endereco) { s.textContent = u.endereco.length > 60 ? u.endereco.slice(0, 58) + '…' : u.endereco; } else { s.remove(); } b.addEventListener('click', function () { escolher(u.id, true); }); lista.appendChild(b); }); }); } function mostrarCartao(u) { var assunto = encodeURIComponent('Contato pelo site - Unidade ' + nomeDe(u)); var msg = encodeURIComponent('Olá! Vim pelo site e quero falar com a Echosis ' + nomeDe(u) + '.'); cartao.innerHTML = '

'; cartao.querySelector('h3').textContent = 'Echosis ' + u.cidade; var end = cartao.querySelector('.end'); if (u.endereco) { end.textContent = '📍 ' + u.endereco; } else { end.remove(); } cartao.querySelector('p:not(.end)').textContent = (ESTADOS[u.uf] || u.uf) + ' · Atendimento: ' + CONTATO.email; } function escolher(id, salvar) { var u = porId(id); if (!u) return; atual = u.id; lista.querySelectorAll('.item').forEach(function (b) { var on = b.getAttribute('data-id') === u.id; b.classList.toggle('on', on); if (on && salvar && b.scrollIntoView) b.scrollIntoView({ block: 'nearest' }); }); mostrarCartao(u); if (mapa && mapa.getLayer('unidade-sel')) { mapa.setFilter('unidade-sel', ['==', ['get', 'id'], u.id]); mapa.flyTo({ center: [u.lon, u.lat], zoom: 13, pitch: 50, bearing: -10, speed: 1.4 }); abrirPopup(u); } if (salvar) { try { history.replaceState(null, '', location.pathname + '?unidade=' + u.id + location.hash); } catch (e) { /* segue */ } } } function abrirPopup(u) { if (popup) popup.remove(); var el = document.createElement('div'); var t = document.createElement('b'); t.textContent = 'Echosis ' + u.cidade; var s = document.createElement('span'); s.textContent = u.endereco || (ESTADOS[u.uf] || u.uf); el.appendChild(t); el.appendChild(s); popup = new maplibregl.Popup({ offset: 34, closeButton: false, maxWidth: '260px' }).setLngLat([u.lon, u.lat]).setDOMContent(el).addTo(mapa); } function verArea(v) { raiz.querySelectorAll('.vistas button').forEach(function (b) { b.classList.toggle('on', b.getAttribute('data-vista') === v); }); if (popup) popup.remove(); if (mapa) mapa.fitBounds(AREAS[v], { padding: 30, pitch: 0, bearing: 0, duration: 1200 }); } function imagemPino(cor) { // pino com miolo branco, desenhado em canvas para virar ícone do mapa (2x para ficar nítido) var svg = ''; return new Promise(function (ok) { var img = new Image(64, 88); img.onload = function () { ok(img); }; img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg); }); } function iniciarMapa() { var temGL = false; try { var c = document.createElement('canvas'); temGL = !!(c.getContext('webgl2') || c.getContext('webgl')); } catch (e) { /* sem WebGL */ } // sem a biblioteca ou sem WebGL (computador muito antigo): fica só a lista if (!window.maplibregl || !temGL) { raiz.querySelector('.palco').style.display = 'none'; return; } mapa = new maplibregl.Map({ container: 'ech-mapa-geo', style: ESTILO, bounds: AREAS.brasil, fitBoundsOptions: { padding: 30 }, attributionControl: false, maxPitch: 70, cooperativeGestures: false }); mapa.addControl(new maplibregl.AttributionControl({ compact: true }), 'bottom-right'); mapa.addControl(new maplibregl.NavigationControl({ visualizePitch: true }), 'top-right'); mapa.on('load', function () { // enquadra o Brasil já com o tamanho final da área (no celular a área muda depois de montar) mapa.resize(); if (!atual) mapa.fitBounds(AREAS.brasil, { padding: 16, duration: 0 }); // créditos do mapa começam recolhidos no botão (i) raiz.querySelectorAll('.maplibregl-ctrl-attrib').forEach(function (el) { el.classList.remove('maplibregl-compact-show'); el.removeAttribute('open'); }); // fundo e água brancos (pedido do Juliano: estilo Google, mas com o fundo branco) mapa.getStyle().layers.forEach(function (l) { if (l.type === 'background') mapa.setPaintProperty(l.id, 'background-color', '#ffffff'); if (/^water/.test(l.id) && l.type === 'fill') mapa.setPaintProperty(l.id, 'fill-color', '#ffffff'); }); // divisa dos estados (contorno simplificado de github.com/codeforamerica/click_that_hood) mapa.addSource('estados', { type: 'geojson', data: GEO_ESTADOS }); mapa.addLayer({ id: 'estados-linha', type: 'line', source: 'estados', paint: { 'line-color': '#8a9099', 'line-width': ['interpolate', ['linear'], ['zoom'], 3, 0.6, 8, 1.4], 'line-dasharray': [3, 2], 'line-opacity': 0.75 } }); Promise.all([imagemPino('#1a4fd0'), imagemPino('#111111')]).then(function (imgs) { mapa.addImage('pino-azul', imgs[0], { pixelRatio: 2 }); mapa.addImage('pino-preto', imgs[1], { pixelRatio: 2 }); mapa.addSource('unidades', { type: 'geojson', cluster: true, clusterRadius: 38, clusterMaxZoom: 9, data: { type: 'FeatureCollection', features: UNIDADES.map(function (u) { return { type: 'Feature', properties: { id: u.id, nome: nomeDe(u) }, geometry: { type: 'Point', coordinates: [u.lon, u.lat] } }; }) } }); mapa.addLayer({ id: 'grupos', type: 'circle', source: 'unidades', filter: ['has', 'point_count'], paint: { 'circle-color': '#1a4fd0', 'circle-radius': ['step', ['get', 'point_count'], 15, 5, 19, 10, 23], 'circle-stroke-color': '#ffffff', 'circle-stroke-width': 3, 'circle-opacity': 0.95 } }); mapa.addLayer({ id: 'grupos-n', type: 'symbol', source: 'unidades', filter: ['has', 'point_count'], layout: { 'text-field': ['get', 'point_count_abbreviated'], 'text-font': ['Noto Sans Bold'], 'text-size': 13 }, paint: { 'text-color': '#ffffff' } }); mapa.addLayer({ id: 'unidade', type: 'symbol', source: 'unidades', filter: ['!', ['has', 'point_count']], layout: { 'icon-image': 'pino-azul', 'icon-anchor': 'bottom', 'icon-allow-overlap': true, 'icon-size': 1 } }); mapa.addLayer({ id: 'unidade-sel', type: 'symbol', source: 'unidades', filter: ['==', ['get', 'id'], atual || ''], layout: { 'icon-image': 'pino-preto', 'icon-anchor': 'bottom', 'icon-allow-overlap': true, 'icon-size': 1.25 } }); mapa.on('click', 'grupos', function (e) { var f = e.features[0]; mapa.getSource('unidades').getClusterExpansionZoom(f.properties.cluster_id).then(function (z) { mapa.easeTo({ center: f.geometry.coordinates, zoom: z + 0.5 }); }); }); mapa.on('click', 'unidade', function (e) { escolher(e.features[0].properties.id, true); }); ['grupos', 'unidade'].forEach(function (l) { mapa.on('mouseenter', l, function () { mapa.getCanvas().style.cursor = 'pointer'; }); mapa.on('mouseleave', l, function () { mapa.getCanvas().style.cursor = ''; }); }); if (atual) escolher(atual, false); }); }); } document.getElementById('ech-n-uni').textContent = UNIDADES.length; document.getElementById('ech-n-uf').textContent = UNIDADES.map(function (u) { return u.uf; }).filter(function (v, i, a) { return a.indexOf(v) === i; }).length; raiz.querySelectorAll('.vistas button').forEach(function (b) { b.addEventListener('click', function () { verArea(b.getAttribute('data-vista')); }); }); busca.addEventListener('input', montarLista); montarLista(); var pedida = new URLSearchParams(location.search).get('unidade'); if (pedida && porId(pedida)) { atual = pedida; escolher(pedida, false); } iniciarMapa(); })();