var wrldApiKey = "7bcdc50bec73f1da7fe4fc488fc7fd70";
var laxLocation = L.latLng([33.943398, -118.409541]);


// Create the map
var map = L.Wrld.map(
  "map",
  wrldApiKey,
  {
    center: laxLocation,
    zoom: 17,
    indoorsEnabled: true
  }
);


// Add a control to change between indoor map floors
var indoorControl = new WrldIndoorControl("overlay", map);


// Add a search bar with the following menu items
var searchCategories = [
  { name: "General", searchTag: "general", iconKey: "general" },
  { name: "Check In", searchTag: "check_in", iconKey: "ticket" },
  { name: "Gates", searchTag: "gate", iconKey: "airport" },
  { name: "Coffee", searchTag: "coffee", iconKey: "coffee" },
  { name: "Food & Drink", searchTag: "food_drink", iconKey: "food_drink" },
  { name: "Shopping", searchTag: "shopping", iconKey: "shopping" }
];

var searchbar = new WrldSearchbar("overlay", map, {
  apiKey: wrldApiKey,
  outdoorSearchMenuItems: searchCategories,
  indoorSearchMenuItems: searchCategories
});


// Add a marker controller to draw styled markers on the map
var markerController = new WrldMarkerController(map, { searchbar: searchbar });


// Find a route when a search result is selected
searchbar.on("searchresultselect", selectSearchResult);

function selectSearchResult(event) {
  var location = event.result.location;
  
  var resultCoord = location.latLng;
  var resultFloorId = location.floorIndex;
  
  var coordWithFloor = [resultCoord.lng, resultCoord.lat, resultFloorId];
  var myCoordWithFloor = [myLocation.lng, myLocation.lat, 1];
  
  map.routes.getRoute([myCoordWithFloor, coordWithFloor], displayRoute);
}


// Add a layer group to contain our route polylines
var routeLines = L.layerGroup();
routeLines.addTo(map);


// Indicate our current location with a circle
var laxIndoorMapId = "98a265e2-b890-4c6b-a28f-948c92e36914";
var myLocation = L.latLng([33.94274810771653, -118.40823555904284]);

L.circle(
  myLocation,
  {
    radius: 2.0,
    color: "#0000ff",
    indoorMapId: laxIndoorMapId,
    indoorMapFloorId: 1
  }
).addTo(map);


// Draw polylines representing a route
function displayRoute(routes) {
  routeLines.clearLayers();
  
  for (var i = 0; i < routes[0].length; ++i) {
    var step = routes[0][i];
    var polyline = L.polyline(step.points, { indoorMapId: step.indoorMapId,  indoorMapFloorId: step.indoorMapFloorId });
    polyline.addTo(routeLines);
  }
}