maps/src/public/js/search.js

search = document.getElementById('search');
searchInput = document.getElementById('searchInput');
searchSug = document.getElementById('searchSug');

var destination = [0, 0];

function getDirection(){
  from = geo._accuracyCircleMarker._lngLat
  to = destination.getLngLat()
  console.log("from", from, "to", to)

  var mapboxClient = mapboxSdk({ accessToken: mapboxgl.accessToken });
  d = mapboxClient.directions.getDirections({
    profile: "cycling",
    waypoints: [{
      coordinates: [from.lng, from.lat]
    },{
      coordinates: [to.lng, to.lat]
    }],
    annotations: ["duration", "distance"],
    voiceInstructions: true,
    voiceUnits: "metric",
    geometries: "geojson"
  })
  d = d.send()
  d.then(function(response) {
    if (
      response &&
      response.body &&
      response.body.routes &&
      response.body.routes.length
    ) {
      console.log("route", response.body.routes[0]);
      drawRoute(response.body.routes[0]);
    }
  });
}

function drawRoute(route){
  geojson = route.geometry
  if(map.getLayer('route'))
    map.removeLayer('route')
  if(map.getSource('route'))
    map.removeSource('route')
  map.addSource('route', {
    type: 'geojson',
    data: {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature",
          properties: {},
          geometry: geojson
        }
      ]
    }
  })

  map.addLayer({
    id: 'route',
    type: 'line',
    source: 'route',
    layout: {
      'line-cap': 'round',
      'line-join': 'round'
    },
    paint: {
      'line-blur': 0,
      'line-color': '#0000FF',
      'line-width': 15
    }
  })
}

function flyTo(target){
  var mapboxClient = mapboxSdk({ accessToken: mapboxgl.accessToken });
  d = mapboxClient.geocoding.forwardGeocode({
    query: target,
    autocomplete: false,
    limit: 1
  })
  d = d.send()
  d.then(function(response) {
    if (
      response &&
      response.body &&
      response.body.features &&
      response.body.features.length
    ) {
      var feature = response.body.features[0];
      flyToCorts(feature.center)
    }
  });
}

function flyToCorts(corts){
  map.flyTo({
    center: corts,
    zoom: 15
  })
  destination = new mapboxgl.Marker().setLngLat(corts).addTo(map);
}

function getSug(query){
  var mapboxClient = mapboxSdk({ accessToken: mapboxgl.accessToken });
  d = mapboxClient.geocoding.forwardGeocode({
    query,
    autocomplete: true,
    limit: 5
  })
  d = d.send()
  d.then(function(response) {
    if (
      response &&
      response.body &&
      response.body.features &&
      response.body.features.length
    ) {
      ul = document.createElement('ul')
      ul.className = "sug"
      for(f in response.body.features){
        feature = response.body.features[f]
        li = document.createElement('li')
        console.log(feature)
        li.append(document.createTextNode(feature.place_name))
        li.dataset.location = feature.center
        ul.append(li)
        // new mapboxgl.Marker().setLngLat(feature.center).addTo(map);
      }
      sug = searchSug.getElementsByClassName('sug')
      if(sug.length > 0){
        searchSug.removeChild(sug[0])
      }
      searchSug.append(ul);
    }
  });
}

function hideSearchSug(){
  searchSug.style.display = 'none';
}
function showSearchSug(){
  searchSug.style.display = 'block';
}

function selectSug(e){
  if(e.dataset.length < 0){
    e = e.parentElement;
    if(e.dataset.length < 0){
      console.log('selectSug(): dataset empty')
      return;
    }
  }

  if(!e.dataset.hasOwnProperty('value') ){
    if(!e.dataset.hasOwnProperty('location')){
      console.log('selectSug(): no value or location propperty')
    }else{
      searchInput.value = e.innerText;
      hideSearchSug()
      corts = e.dataset.location.split(',')
      corts[0] = parseFloat(corts[0])
      corts[1] = parseFloat(corts[1])
      flyToCorts(corts)
    }
    return
  }

  searchInput.value = e.dataset.value;
  hideSearchSug()
  flyTo(e.dataset.value)
}
document.body.addEventListener('click', function(e){
  if(e.path.length > 4 && e.path[e.path.length-5].id == 'search'){
    if(e.target.tagName == 'INPUT'){
      showSearchSug()
    }else if(e.target.id == 'directions'){
      getDirection()
    }else{
      selectSug(e.target)
    }
  }else{
    hideSearchSug()
  }
})

searchInput.addEventListener('input', function(e){
  if(e.target.value.length > 5){
    getSug(e.target.value)
  }
})