Nearby Restaurant/food places search using MAPBOX

Question

I am a beginner and don't know much about APIs. I want to make a web application for nearby restaurant search and a bunch of other unrelated stuff. I am using laravel framework. I have designed a custom map in MAPBOX. I cannot attach any code because I have not done anything except for a little bit of research. i have added links to MAP GL JS and the map displays fine. I want users to be able to add their location in text or turn their location services on. And the map should display food places in close vicinity to that location. I don't know if am being thorough enough as this is my second question. Any help that'll get me started is appreciated.

Javascript

mapboxgl.accessToken = 'MYTOKEN';

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/MYSTYLE',
    center: [74.3587, 31.5204], // starting position
    zoom: 14 // starting zoom
});

// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());

map.addControl(
    new MapboxDirections({
        accessToken: mapboxgl.accessToken
    }),
    'top-left'
);
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/hadia125/ckcjiyik542ig1iqnvfrjjexf',
    center: [74.3587, 31.5204], // starting position
    zoom: 14 // starting zoom
});

map.addControl(
    new MapboxDirections({
        accessToken: mapboxgl.accessToken
    }),
    'top-left'
);

user_12687061 · Answer

I know this is a year old but for educational purposes, with the mapbox GL JS you can build a store locator which can be used to locate restaurants, libraries, anything really, etc. In this example, you'll be able to browse all the store locations from a sidebar and click a specific store to view more information. Selecting a marker on the map will highlight the selected store on the sidebar. Please refer to the docs for full guide and tutorial on how to achieve this.

css

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

  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;
  }

  /* 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 {
    position: absolute;
    width: 33.3333%;
    height: 100%;
    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%;
    top: 0;
    bottom: 0;
  }

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

html


  
    Our locations

Nearby Restaurant/food places search using MAPBOX

1 Answers