You'll be able to browse all the locations from a sidebar and select a specific location to view more information. Selecting a marker on the map will highlight the selected store on the sidebar.
For this project, we recommend that you create a local folder called "store-locator" to house your project files. You'll see this folder referred to as your project folder.
There are a few resources you'll need before getting started:
A style URL. A style URL points to a unique map you have created with Mapbox Studio. You can either create a custom style with the Mapbox Studio style editor or use a Mapbox style.
**An access token** from your account. You will use an access token to associate a map with your account. Your access token is on the Account page.
Mapbox GL JS. The Mapbox JavaScript library that uses WebGL to render interactive maps from Mapbox GL styles.
A text editor. You'll be writing HTML, CSS, and JavaScript.
Data. We collected some of locations of Bay Area food banks and marked up the data in GeoJSON.
Custom map marker. You'll be using an image for your map marker. Save the image to your project folder.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Store Locator</title>
<meta name='robots' content='noindex, nofollow'>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='<https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700>' rel='stylesheet'>
<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' />
<style>
</style>
</head>
<body>
<div class='sidebar'>
<div class='heading'>
<h1>Bay Area Food Banks</h1>
</div>
<div id='listings' class='listings'></div>
</div>
<div id='map' class='map'></div>
<script>
</script>
</body>
</html>
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:100%;
top:0;left:0;
overflow:hidden;
border-right:1px solid rgba(0,0,0,0.25);
}
.pad2 {
padding:20px;
}
.map {
position:absolute;
left:33.3333%;
width:66.6666%;
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: #00853e;
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:#00853e;
font-weight:700;
}
.listings .item .title small { font-weight:400; }
.listings .item.active .title,
.listings .item .title:hover { color:#8cc63f; }
.listings .item.active {
background-color:#f8f8f8;
}
::-webkit-scrollbar {
width:3px;
height:3px;
border-left:0;
background:rgba(0,0,0,0.1);
}
::-webkit-scrollbar-track {
background:none;
}
::-webkit-scrollbar-thumb {
background:#00853e;
border-radius:0;
}
.marker {
border: none;
cursor: pointer;
height: 56px;
width: 56px;
background-image: url(marker.png);
background-color: rgba(0, 0, 0, 0);
}
.clearfix { display:block; }
.clearfix:after {
content:'.';
display:block;
height:0;
clear:both;
visibility:hidden;
}
We're creating a Mapbox Map object.
mapboxgl.accessToken = 'pk.eyJ1IjoibXpkcmFwZXIiLCJhIjoiY2s5ZXJoMG9lMDRvNjNmbzdzcjY2aXhtbCJ9.HZ929-DxiDzyr7nxlPzIyg';
/**
* Add the map to the page
*/
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-122.241514, 38.015860],
zoom: 9,
scrollZoom: false
});