map.js

(function () {
  'use strict';

  let popEstimada = document.querySelector("#pop_estimada");

  function defaultMethod() {
    const myMap = L.map('map').setView([-21.99, -43.00], 8); // Setado Juiz de Fora apenas para centralizar um pouco o Rio de Janeiro

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
      maxZoom: 22,
      id: 'mapbox.light',
      accessToken: 'pk.eyJ1IjoiYXRtbW9yZWlyYSIsImEiOiJjam0yYmhqMmswMXc5M3BuMWtzZ3JidnF6In0.-ZMpuu7jMX9IbI7msghQMA'
    }).addTo(myMap);
    return myMap
  }

  let myMap = defaultMethod()

  let makePopEstimada = function makePopEstimada() {
    L.geoJson(statesData, {
      style: style
    }).addTo(myMap);

    // Atribuindo valores e cores.
    function getColor(d) {
      return d > 1000.000 ? '#800026' :
        d > 500.000 ? '#BD0026' :
          d > 200.000 ? '#E31A1C' :
            d > 100.000 ? '#FC4E2A' :
              d > 50.000 ? '#FD8D3C' :
                d > 20.000 ? '#FEB24C' :
                  d > 10.000 ? '#FED976' :
                    '#FFEDA0';
    }

    // Setando as cores dos municípios de acordo com a população
    function style(feature) {
      return {
        fillColor: getColor(feature.properties.population),
        weight: 1,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
      };
    }

    // Adicionando Interação
    function highlightFeature(e) {
      var layer = e.target;
      layer.setStyle({
        weight: 1,
        color: '#000',
        dashArray: '',
        fillOpacity: 0.01
      });

      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
      }
      info.update(layer.feature.properties);
    }

    function resetHighlight(e) {
      geojson.resetStyle(e.target);
      info.update();
    }

    function zoomToFeature(e) {
      myMap.fitBounds(e.target.getBounds());
    }

    function onEachFeature(feature, layer) {
      layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
      });
    }

    let geojson = L.geoJson(statesData, {
      style: style,
      onEachFeature: onEachFeature
    }).addTo(myMap);

    var info = L.control();
    info.onAdd = function (map) {
      this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
      this.update();
      return this._div;
    };

    // Formata valores
    const formata = (num) => {
      let p = Number(num).toFixed(2).split(".");
      return "" + p[0].split("").reverse().reduce(function (acc, num, i, orig) {
        return num + (i && !(i % 3) ? "." : "") + acc;
      }, "") + "," + p[1] + "0";
    }

    // method that we will use to update the control based on feature properties passed
    info.update = function (props) {
      this._div.innerHTML = '<h4>População Estimada (mil)</h4>' + (props ? '<b>' + props.name + '</b><br />' + formata(props.population) + ' pessoas' : 'Passe o mouse no Município');
    };
    info.addTo(myMap);

    // Legendas
    var legend = L.control({
      position: 'bottomright'
    });

    legend.onAdd = function (map) {
      var div = L.DomUtil.create('div', 'info legend'),
        grades = [0, 10.00, 20.00, 50.00, 100.00, 200.00, 500.00, 1000.00],
        labels = [];
      for (var i = 0; i < grades.length; i++) {
        div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' + grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
      }
      return div;
    };
    legend.addTo(myMap);
  }

  function handlePopEstimada() {
    if (popEstimada.checked == true) {
      makePopEstimada();
    } else {
      myMap = defaultMethod()
    }
  }
  popEstimada.addEventListener('click', handlePopEstimada, false)
})();