https://defesacivil.blumenau.sc.gov.br/static/mapa_sit_atual/mapa_sit_atual.js?v=3

1/* INICIO - Eventos botoes chuva e deslizamento */
2document.getElementById('btn-chuva').addEventListener('click', function() {
3    this.classList.add('active');
4    document.getElementById('btn-deslizamento').classList.remove('active');
5    opcaoMapa = 0;
6    load_layer_regioes();
7    console.log('click em chuva');
8    refreshPluviometrico();
9});
10
11document.getElementById('btn-deslizamento').addEventListener('click', function() {
12    this.classList.add('active');
13    document.getElementById('btn-chuva').classList.remove('active');
14    opcaoMapa = 1;
15    load_layer_regioes();
16    console.log('click em deslizamento');
17    refreshPluviometrico();
18});
19/* FIM - Eventos botoes chuva e deslizamento */
20
21/* INICIO - Mapa das regioes */
22const map = L.map('map').setView([-26.9021, -49.0621], 10);
23
24var bounds = L.latLngBounds(
25    [-27.500, -49.650], // Sudoeste de Blumenau
26    [-26.390, -48.600]  // Nordeste de Blumenau
27);
28
29//const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
30const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {    

31    // maxBounds: bounds,
32    maxBoundsViscosity: 1.0, // Impede que o usuário arraste para fora dos limites
33    minZoom: 10, // Define o zoom mínimo para evitar que o globo apareça
34    maxZoom: 18, // Define um zoom máximo
35    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
36}).addTo(map);
37map.setMaxBounds(bounds);
38
39
40
41var opcaoMapa = 0;//CHUVA = 0; ESCORREGAMENTO = 1 - vide static/data/situacao_atual.json
42// Função para definir cores por região
43function getColor(regiao) {
44    
45   if (!data_situacao || !data_situacao.dados || data_situacao.dados.length === 0) {
46        console.log('ret1 null:'+regiao);
47       return null;
48   }
49   
50   const dados = data_situacao.dados[opcaoMapa];
51   
52   for (const sitregiao of dados.sitregioes) {
53       if (sitregiao.regiao.nome.toUpperCase() === regiao.toUpperCase()) {
54           return {
55               cor_fonte: sitregiao.condicao.cor_fonte,
56               cor_fundo: sitregiao.condicao.cor_fundo
57           };
58       }
59   }
60   console.log('ret2 null:'+regiao);
61   return null; // Caso não encontre a região
62}
63
64function getBairros(regiao) {
65   if (!data_situacao || !data_situacao.dados || data_situacao.dados.length === 0) {
66       return null;
67   }
68   
69   const dados = data_situacao.dados[0];
70   
71   for (const sitregiao of dados.sitregioes) {
72       if (sitregiao.regiao.nome.toUpperCase() === regiao.toUpperCase()) {
73           return  sitregiao.regiao.bairros;
74       }
75   }
76   
77   return null; // Caso não encontre a região
78}
79
80var data_situacao = false;
81fetch(addCacheBuster(URL_SITUACAO))
82.then(response => response.json())
83.then(data => {
84   data_situacao = data;
85   load_layer_regioes();
86})
87.catch(error => console.error("Erro ao carregar GeoJSON:", error));
88
89function addCacheBuster(url) {
90    const randomParam = `cb=${Math.random()}`;
91    return url.includes('?') ? `${url}&${randomParam}` : `${url}?${randomParam}`;
92}
93
94var geojsonLayer = null; 
95function load_layer_regioes(){
96   // Carrega a camada GeoJSON das regiões
97   fetch(addCacheBuster(URL_REGIOES))
98   .then(response => response.json())
99   .then(data => {
100       if(geojsonLayer!=null){
101           map.removeLayer(geojsonLayer);
102       }
103       geojsonLayer = L.geoJSON(data, {
104           style: feature => ({
105               color: "#000",  // Cor da borda
106               weight: 2,
107               fillColor: getColor(feature.properties["Região"]).cor_fundo,
108               fillOpacity: 0.3
109           }),
110           onEachFeature: function (feature, layer) {
111               // Adiciona um rótulo fixo com o nome da região
112               layer.bindTooltip('Região '+capitalizarCadaPalavra(feature.properties["Região"]), {
113                   permanent: true,  // Mantém sempre visível
114                   direction: "center",  // Centraliza o texto
115                   className: "region-label"  // Classe CSS para estilizar
116               }).openTooltip();
117
118               // Adiciona evento de clique para exibir popup com bairros
119               layer.on("click", function () {
120                   let regiao = feature.properties["Região"].toUpperCase();
121                   // let bairros = regioesBairros[regiao] || ["Nenhuma informação disponível"];
122                   let bairros = getBairros(regiao)|| ["Nenhuma informação disponível"];
123
124                   let popupContent = `<b>REGIÃO ${regiao}</b><ul>` +
125                       bairros.map(bairro => `<li>${bairro}</li>`).join("") +
126                       `</ul>`;
127
128                   layer.bindPopup(popupContent).openPopup();
129               });    
130               
131               layer.on("mouseover", function () {
132                   layer.setStyle({ fillOpacity: 0.4, cursor: "pointer" });
133               });
134               layer.on("mouseout", function () {
135                   layer.setStyle({ fillOpacity: 0.3 });
136               });
137           }                
138       }).addTo(map);
139       map.fitBounds(geojsonLayer.getBounds()); // Ajusta o zoom automaticamente
140   })
141   .catch(error => console.error("Erro ao carregar GeoJSON:", error));
142}
143
144//Carga layer de bairros
145var geojsonLayerBairros = null; 
146function load_layer_bairros(){
147   // Carrega a camada GeoJSON das regiões
148   fetch(addCacheBuster(URL_BAIRROS))
149   .then(response => response.json())
150   .then(data => {
151       if(geojsonLayerBairros!=null){
152           map.removeLayer(geojsonLayerBairros);
153       }
154       geojsonLayerBairros = L.geoJSON(data, {
155           style: feature => ({
156               color: "#000",  // Cor da borda
157               weight: 2,
158               fillOpacity: 0
159           }),        
160           onEachFeature: function (feature, layer) {
161               // Adiciona um rótulo fixo com o nome da região
162               layer.bindTooltip('Bairro '+capitalizarCadaPalavra(feature.properties["BAIRROS"]), {
163                   permanent: true,  // Mantém sempre visível
164                   direction: "center",  // Centraliza o texto
165                   className: "bairro-label"  // Classe CSS para estilizar
166               }).openTooltip();
167           }                
168       }).addTo(map);
169       map.fitBounds(geojsonLayerBairros.getBounds()); // Ajusta o zoom automaticamente
170   })
171   .catch(error => console.error("Erro ao carregar GeoJSON Bairros:", error));
172}
173
174//refresh
175setTimeout(load_layer_regioes(), 1000*60*2);

176/* FIM - Mapa das regioes */
177
178function remove_layer_bairros() {
179    if (geojsonLayerBairros != null) {
180        map.removeLayer(geojsonLayerBairros);
181        geojsonLayerBairros = null;
182    }
183}
184
185function capitalizarCadaPalavra(texto) {
186  return texto.toLowerCase().replace(/\b\w/g, function(letra) {
187    return letra.toUpperCase();
188  });
189}
190
191document.getElementById('divisao_bairros').addEventListener('click',function(){
192    if (this.checked) {
193        load_layer_bairros();
194    } else {
195        remove_layer_bairros();
196    }
197});