fogo_foco/index.html at main · dehdutra/fogo_foco · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
  <title>Dashboard Brasil</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- CSS do Leaflet -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

  <style>
    body { margin:0; padding:0; }
    #map { width: 100%; height: 90vh; }
    #info { padding: 10px; font-family: Arial; }
  </style>
</head>
<body>

<h2 style="text-align:center">Dashboard Brasil</h2>
<div id="map"></div>
<div id="info">Clique em um estado para ver informações.</div>

<!-- JS do Leaflet -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
// Cria o mapa centralizado no Brasil
var map = L.map('map').setView([-14.2, -51.9], 4);

// Adiciona camada base do OpenStreetMap
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

// Carrega o GeoJSON dos estados do Brasil
axios.get('https://raw.githubusercontent.com/codeforamerica/click_that_hood/master/public/data/brazil-states.geojson')
  .then(response => {
    var geojson = response.data;

    function style(feature) {
      return { fillColor: '#74c476', weight: 2, color: 'white', fillOpacity: 0.7 };
    }

    function onEachFeature(feature, layer) {
      layer.on({
        click: function(e) {
          document.getElementById('info').innerHTML =
            "<b>" + feature.properties.name + "</b><br>População: exemplo";
        }
      });
    }

    L.geoJSON(geojson, { style: style, onEachFeature: onEachFeature }).addTo(map);
  })
  .catch(error => console.log(error));
</script>

</body>
</html>