Build a store locator using Mapbox GL JS

Build a map application with Mapbox GL JS. This guide walks you through all the code that you need to build a store locator. See the example: https://docs.mapbox.com//help/tutorials/building-a-store-locator/

by MellowStudio

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css">
<script src="https://www.diakonieffb.de/map"></script>

    <div class="sidebar">
      <div class="heading">
        <h1>Standorte</h1>
      </div>
      <div id="listings" class="listings"></div>
    </div>
    <div id="map" class="map"></div>

CSS

body {
        color: #404040;
        font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
      }

      * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      .sidebar {
        position: absolute;
        width: 33.3333%;
        height: 100vh;
        top: 0;
        left: 0;
        overflow: hidden;
        border-right: 1px solid rgba(0, 0, 0, 0.25);
      }

      .map {
        position: absolute;
        left: 33.3333%;
        width: 66.6666%;
        height: 100vh;
        border-radius: 25px 25px 25px 25px;
        top: 0;
        bottom: 0;
      }

      h1 {
        font-size: 22px;
        margin: 0;
        font-weight: 400;
        line-height: 20px;
        padding: 20px 2px;
      }

      a {
        color: #404040;
        text-decoration: none;
      }

      a:hover {
        color: #101010;
      }

      .heading {
        background: #fff;
        border-bottom: 1px solid #eee;
        min-height: 60px;
        line-height: 60px;
        padding: 0 10px;
        background-color: #4C2073;
        color: #fff;
      }

      .listings {
        height: 100%;
        overflow: auto;
        padding-bottom: 60px;
      }

      .listings .item {
        display: block;
        border-bottom: 1px solid #eee;
        padding: 10px;
        text-decoration: none;
      }

      .listings .item:last-child {
        border-bottom: none;
      }
      .listings .item .title {
        display: block;
        color: #4C2073;
        font-weight: 700;
      }

      .listings .item .title small {
        font-weight: 400;
      }
      .listings .item.active .title,
      .listings .item .title:hover {
        color: #A58FB9;
      }
      .listings .item.active {
        background-color: #f8f8f8;
      }
      ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
  ...

JavaScript

/* This will let you use the .remove() function later on */
if (!('remove' in Element.prototype)) {
  Element.prototype.remove = function() {
    if (this.parentNode) {
      this.parentNode.removeChild(this);
    }
  };
}

mapboxgl.accessToken = 'pk.eyJ1IjoibWVsbG93MjAyMSIsImEiOiJja2p6cXI3MmkwYTF3MnFtZngwamc3d2VvIn0.R9HcoQdBwMpaHAVE8rQ3oQ';

/**
 * Add the map to the page
 */
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mellow2021/cko8az2o40m6917o93l9m56hj',
  center: [11.581981, 48.135124],
  zoom: 13,
  scrollZoom: false
});

var stores = {
  'type': 'FeatureCollection',
  'features': [{
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [11.461719, 48.141560]
      },
      'properties': {
        'phoneFormatted': '0163 8713516',
        'phone': '2022347336',
        'address': 'Pasing',
        'city': 'Lorenz Schaible',
        'country': 'Deutschland',
        'crossStreet': 'at 15th St NW',
        'postalCode': '20005',
        'state': 'D.C.'
      }
    },
    {
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [11.458950167522657, 48.191591508933364]
      },
      'properties': {
        'phoneFormatted': '0163 8713516',
        'phone': '2025078357',
        'address': 'Allach',
        'city': 'Lorenz Schaible',
        'country': 'Deutschland',
        'crossStreet': 'at 22nd St NW',
        'postalCode': '20037',
        'state': 'D.C.'
      }
    },
    {
      'type': 'Feature',
      'geometry': {
        'type': 'Point',
        'coordinates': [11.414784282140634, 48.161287295]
      },
      'properties': {
        'phoneFormatted': '0163 8713516',
        'phone': '2023879338',
        'address': 'Aubing',
        'city': 'Lorenz Schaible',
        'country': 'Deutschland',
        'crossStreet': 'at Dupont Circle',
        'postalCode': '20036',
        'state': 'D.C.'
      }
    },
    {
      'type': 'Feature',
     ...