Leaflet with Mapbox theme 2

by Lucaskazama

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id='map'></div>

SCSS

//Demonstração
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

//Botão Do Mapa
.btn-map{
  font: 600 .75rem Montserrat,Arial,helvetica,sans-serif;
  border-radius: 1.875rem;  
  margin-top: 10px;  
  background: #ee651a; 
  border: 0; 
  color: #fff !important;
  cursor: pointer;
  display: flex;
  height: 2.5rem;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: all .6s;
  text-transform: uppercase; 
  width: auto;
}

JavaScript

//Conteúdo do Popup no mapa

var locations = [
  [-3.794587, -38.479733, "Via Sul", "Av. Washington Soares, 4335", "Lagoa Redonda", "Fortaleza", "Ceará", "https://www.google.com.br/maps/place/Via+Sul+Shopping/@-3.7946075,-38.4817601,17z/data=!3m1!4b1!4m5!3m4!1s0x7c7457b43458a19:0xcec4ff013c68aa6a!8m2!3d-3.7946075!4d-38.4795714" ],
  [-3.756702, -38.486017, "Iguatemi","Av. Washington Soares, 85","Edson Queiroz","Fortaleza", "Ceará", "https://www.google.com.br/maps/place/Shopping+Iguatemi+Fortaleza/@-3.7571057,-38.4914536,17z/data=!3m1!4b1!4m5!3m4!1s0x7c74963201865ff:0x2d77cda38272811f!8m2!3d-3.7571057!4d-38.4892649"],
];

//Icone do Marcador

var icon = L.icon({
  iconUrl: 'https://www.marquiseincorporacoes.com.br/static-images/pin-orange.png',
  shadowUrl: 'https://www.marquiseincorporacoes.com.br/static-images/pin-shadow.png',
  iconSize: [30, 42],
  shadowSize: [35, 14],
  iconAnchor: [16, 41],
  shadowAnchor: [2, 14],
  popupAnchor: [-3, -50]
});
var LeafIcon = L.Icon.extend({
    options: {
        shadowUrl: 'leaf-shadow.png',
        iconSize:     [38, 95],
        shadowSize:   [50, 64],
        iconAnchor:   [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor:  [-3, -76]
    }
});
//Centralizar Mapa
var center = [-3.77839, -38.4934];

//Localicacao do Mapa - Fixa
var map = L.map('map').setView(center, 12);

L.tileLayer(
    'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {        
        maxZoom: 18,
        attribution: '© <a href="https://apps.mapbox.com/feedback/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo( map );

// Loop de Marcadores
for (var i = 0; i < locations.length; i++) {
  marker = new L.marker([
    locations[i][0],
    locations[i][1]
  ],{icon: icon})				
    .bindPopup(
    "<h3>" + locations[i][2] + "</h3>" 
    + locations[i][3] + " - " +...