<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script> 

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />

<div class='sidebar pad2'>Listing</div>

<div id='map' class='map pad2'>Map</div>

body {

 background: #404040;

 color: #f8f8f8;

 font: 500 20px/26px 'Helvetica Neue', Helvetica, Arial, Sans-serif;

 margin: 0;

 padding: 0;

 -webkit-font-smoothing: antialiased;

}

/* The page is split between map and sidebar - the sidebar gets 1/3, map

gets 2/3 of the page. You can adjust this to your personal liking. */

.sidebar {

 width: 33.3333%;

}

.map {

 border-left: 1px solid #fff;

 position: absolute;

 left: 33.3333%;

 width: 66.6666%;

 top: 0;

 bottom: 0;

}

.pad2 {

 padding: 20px;

 -webkit-box-sizing: border-box;

 -moz-box-sizing: border-box;

 box-sizing: border-box;

}

mapboxgl.accessToken = 'pk.eyJ1IjoiYWxleHJhbnNsZXkiLCJhIjoiY2s3NWg3c3g2MHd2cjNkcWtlbXJsanp0biJ9.m40oEWhZ_EkAycqyC0arNQ';

var map = new mapboxgl.Map({

 container: 'map',

 style: 'mapbox://styles/alexransley/ck7e1x3850cpn1ipf6wdlkfcg',

 center: [-77.034084, 38.909671],

 zoom: 14

});

//Map initialised, not data yet

var stores = {

 "type": "FeatureCollection",

 "features": [

 {

 "type": "Feature",

 "geometry": {

 "type": "Point",

 "coordinates": [

 -77.034084142948,

 38.909671288923

 ]

 },

 "properties": {

 "phoneFormatted": "(202) 234-7336",

 "phone": "2022347336",

 "address": "1471 P St NW",

 "city": "Washington DC",

 "country": "United States",

 "crossStreet": "at 15th St NW",

 "postalCode": "20005",

 "state": "D.C."

 }

 }

 ]

};

stores.features.forEach(function(store, i){

 store.properties.id = i;

});

map.on('load', function (e) {

 /* Add the data to your map as a layer */

 map.addLayer({

 "id": "locations",

 "type": "symbol",

 /* Add a GeoJSON source containing place coordinates and information. */

 "source": {

 "type": "geojson",

 "data": stores

 },

 "layout": {

 "icon-image": "restaurant-15",

 "icon-allow-overlap": true,

 }

 });

});