var map, featureList,surfSearch = [],surfboardSearch = [],longboardSearch = [],bodyboardSearch = [],kneeboardSearch = [],skimboardSearch = [],towinsurfSearch = [],bodysurfSearch = [],tandemSearch = [],foilSearch = [],adaptadoSearch = [],shopSearch = [],campsSearch = [];
$(window).resize(function() {
  sizeLayerControl();
});

$(document).on("click", ".feature-row", function(e) {
  $(document).off("mouseout", ".feature-row", clearHighlight);
  sidebarClick(parseInt($(this).attr("id"), 10));
});

if ( !("ontouchstart" in window) ) {
  $(document).on("mouseover", ".feature-row", function(e) {
    highlight.clearLayers().addLayer(L.circleMarker([$(this).attr("lat"), $(this).attr("lng")], highlightStyle));
  });
}

$(document).on("mouseout", ".feature-row", clearHighlight);

$("#about-btn").click(function() {
  $("#aboutModal").modal("show");
  $(".navbar-collapse.in").collapse("hide");
  return false;
});


$("#legend-btn").click(function() {
  $("#legendModal").modal("show");
  $(".navbar-collapse.in").collapse("hide");
  return false;
});

$("#login-btn").click(function() {
  $("#loginModal").modal("show");
  $(".navbar-collapse.in").collapse("hide");
  return false;
});

$("#list-btn").click(function() {
  animateSidebar();
  return false;
});

$("#nav-btn").click(function() {
  $(".navbar-collapse").collapse("toggle");
  return false;
});

$("#sidebar-toggle-btn").click(function() {
  animateSidebar();
  return false;
});

$("#sidebar-hide-btn").click(function() {
  animateSidebar();
  return false;
});

function animateSidebar() {
  $("#sidebar").animate({
    width: "toggle"
  }, 350, function() {
    map.invalidateSize();
  });
}

function sizeLayerControl() {
  $(".leaflet-control-layers").css("max-height", $("#map").height() - 50);
}

function clearHighlight() {
  highlight.clearLayers();
}

function sidebarClick(id) {
  var layer = markerClusters.getLayer(id);
  map.setView([layer.getLatLng().lat, layer.getLatLng().lng], 17);
  layer.fire("click");
  /* Hide sidebar and go to the map on small screens */
  if (document.body.clientWidth <= 767) {
    $("#sidebar").hide();
    map.invalidateSize();
  }
}

function syncSidebar() {
  /* Empty sidebar features */
  $("#feature-list tbody").empty();
  /* Loop through layer and add only features which are in the map bounds */
surfs.eachLayer(function (layer) {if (map.hasLayer(surfLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/surf.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');}}});surfboards.eachLayer(function (layer) {if (map.hasLayer(surfboardLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/surfboard.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');}}});longboards.eachLayer(function (layer) {if (map.hasLayer(longboardLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/longboard.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');}}});bodyboards.eachLayer(function (layer) {if (map.hasLayer(bodyboardLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/bodyboard.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');}}});kneeboards.eachLayer(function (layer) {if (map.hasLayer(kneeboardLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/kneeboard.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');}}});skimboards.eachLayer(function (layer) {if (map.hasLayer(skimboardLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/skimboard.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');}}});towinsurfs.eachLayer(function (layer) {if (map.hasLayer(towinsurfLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/towinsurf.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');}}});bodysurfs.eachLayer(function (layer) {if (map.hasLayer(bodysurfLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/bodysurf.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');}}});tandems.eachLayer(function (layer) {if (map.hasLayer(tandemLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/tandem.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');}}});foils.eachLayer(function (layer) {if (map.hasLayer(foilLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/foil.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');}}});adaptados.eachLayer(function (layer) {if (map.hasLayer(adaptadoLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/adaptado.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');}}});shops.eachLayer(function (layer) {if (map.hasLayer(shopLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/shop.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');}}});campss.eachLayer(function (layer) {if (map.hasLayer(campsLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/camps.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');}}});  
  /* Update list.js featureList */
  featureList = new List("features", {
    valueNames: ["feature-name"]
  });
  featureList.sort("feature-name", {
    order: "asc"
  });
}

/* Basemap Layers */
var cartoLight = L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>'
});
var usgsImagery = L.layerGroup([L.tileLayer("http://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}", {
  maxZoom: 15,
}), L.tileLayer.wms("http://raster.nationalmap.gov/arcgis/services/Orthoimagery/USGS_EROS_Ortho_SCALE/ImageServer/WMSServer?", {
  minZoom: 16,
  maxZoom: 19,
  layers: "0",
  format: 'image/jpeg',
  transparent: true,
  attribution: "Aerial Imagery courtesy USGS"
})]);

/* Overlay Layers */
var highlight = L.geoJson(null);
var highlightStyle = {
  stroke: false,
  fillColor: "#00FFFF",
  fillOpacity: 0.7,
  radius: 10
};



/* Single marker cluster layer to hold all clusters */
var markerClusters = new L.MarkerClusterGroup({
  spiderfyOnMaxZoom: true,
  showCoverageOnHover: false,
  zoomToBoundsOnClick: true,
  disableClusteringAtZoom: 16
});

var surfLayer = L.geoJson(null);
var surfs = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "img/surf.png",
        iconSize: [24, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
      title: feature.properties.NAME,
      riseOnHover: true
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.NAME + "</td></tr>" + "<tr><th>Phone</th><td>" + feature.properties.TEL + "</td></tr>" + "<tr><th>Address</th><td>" + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + "</td></tr>" + "<tr><th></th><td><a class='url-break' href='/info/" + feature.properties.URL + "' target='_blank'>+ info</a></td></tr>" + "<table>";
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);
          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], highlightStyle));
        }
      });
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/surf.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
      surfSearch.push({
        name: layer.feature.properties.NAME,
        address: layer.feature.properties.ADDRESS1,
        source: "Surfs",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0]
      });
    }
  }
});
$.getJSON("data/surf.php", function (data) {
  surfs.addData(data);
  map.addLayer(surfLayer);});var surfboardLayer = L.geoJson(null);
var surfboards = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "img/surfboard.png",
        iconSize: [24, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
      title: feature.properties.NAME,
      riseOnHover: true
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.NAME + "</td></tr>" + "<tr><th>Phone</th><td>" + feature.properties.TEL + "</td></tr>" + "<tr><th>Address</th><td>" + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + "</td></tr>" + "<tr><th></th><td><a class='url-break' href='/info/" + feature.properties.URL + "' target='_blank'>+ info</a></td></tr>" + "<table>";
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);
          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], highlightStyle));
        }
      });
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/surfboard.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
      surfboardSearch.push({
        name: layer.feature.properties.NAME,
        address: layer.feature.properties.ADDRESS1,
        source: "Surfboards",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0]
      });
    }
  }
});
$.getJSON("data/surfboard.php", function (data) {
  surfboards.addData(data);
  map.addLayer(surfboardLayer);});var longboardLayer = L.geoJson(null);
var longboards = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "img/longboard.png",
        iconSize: [24, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
      title: feature.properties.NAME,
      riseOnHover: true
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.NAME + "</td></tr>" + "<tr><th>Phone</th><td>" + feature.properties.TEL + "</td></tr>" + "<tr><th>Address</th><td>" + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + "</td></tr>" + "<tr><th></th><td><a class='url-break' href='/info/" + feature.properties.URL + "' target='_blank'>+ info</a></td></tr>" + "<table>";
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);
          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], highlightStyle));
        }
      });
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/longboard.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
      longboardSearch.push({
        name: layer.feature.properties.NAME,
        address: layer.feature.properties.ADDRESS1,
        source: "Longboards",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0]
      });
    }
  }
});
$.getJSON("data/longboard.php", function (data) {
  longboards.addData(data);
  map.addLayer(longboardLayer);});var bodyboardLayer = L.geoJson(null);
var bodyboards = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "img/bodyboard.png",
        iconSize: [24, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
      title: feature.properties.NAME,
      riseOnHover: true
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.NAME + "</td></tr>" + "<tr><th>Phone</th><td>" + feature.properties.TEL + "</td></tr>" + "<tr><th>Address</th><td>" + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + "</td></tr>" + "<tr><th></th><td><a class='url-break' href='/info/" + feature.properties.URL + "' target='_blank'>+ info</a></td></tr>" + "<table>";
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);
          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], highlightStyle));
        }
      });
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/bodyboard.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
      bodyboardSearch.push({
        name: layer.feature.properties.NAME,
        address: layer.feature.properties.ADDRESS1,
        source: "Bodyboards",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0]
      });
    }
  }
});
$.getJSON("data/bodyboard.php", function (data) {
  bodyboards.addData(data);
  map.addLayer(bodyboardLayer);});var kneeboardLayer = L.geoJson(null);
var kneeboards = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "img/kneeboard.png",
        iconSize: [24, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
      title: feature.properties.NAME,
      riseOnHover: true
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.NAME + "</td></tr>" + "<tr><th>Phone</th><td>" + feature.properties.TEL + "</td></tr>" + "<tr><th>Address</th><td>" + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + "</td></tr>" + "<tr><th></th><td><a class='url-break' href='/info/" + feature.properties.URL + "' target='_blank'>+ info</a></td></tr>" + "<table>";
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);
          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], highlightStyle));
        }
      });
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/kneeboard.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
      kneeboardSearch.push({
        name: layer.feature.properties.NAME,
        address: layer.feature.properties.ADDRESS1,
        source: "Kneeboards",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0]
      });
    }
  }
});
$.getJSON("data/kneeboard.php", function (data) {
  kneeboards.addData(data);
  map.addLayer(kneeboardLayer);});var skimboardLayer = L.geoJson(null);
var skimboards = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "img/skimboard.png",
        iconSize: [24, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
      title: feature.properties.NAME,
      riseOnHover: true
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.NAME + "</td></tr>" + "<tr><th>Phone</th><td>" + feature.properties.TEL + "</td></tr>" + "<tr><th>Address</th><td>" + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + "</td></tr>" + "<tr><th></th><td><a class='url-break' href='/info/" + feature.properties.URL + "' target='_blank'>+ info</a></td></tr>" + "<table>";
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);
          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], highlightStyle));
        }
      });
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/skimboard.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
      skimboardSearch.push({
        name: layer.feature.properties.NAME,
        address: layer.feature.properties.ADDRESS1,
        source: "Skimboards",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0]
      });
    }
  }
});
$.getJSON("data/skimboard.php", function (data) {
  skimboards.addData(data);
  map.addLayer(skimboardLayer);});var towinsurfLayer = L.geoJson(null);
var towinsurfs = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "img/towinsurf.png",
        iconSize: [24, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
      title: feature.properties.NAME,
      riseOnHover: true
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.NAME + "</td></tr>" + "<tr><th>Phone</th><td>" + feature.properties.TEL + "</td></tr>" + "<tr><th>Address</th><td>" + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + "</td></tr>" + "<tr><th></th><td><a class='url-break' href='/info/" + feature.properties.URL + "' target='_blank'>+ info</a></td></tr>" + "<table>";
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);
          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], highlightStyle));
        }
      });
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/towinsurf.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
      towinsurfSearch.push({
        name: layer.feature.properties.NAME,
        address: layer.feature.properties.ADDRESS1,
        source: "Towinsurfs",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0]
      });
    }
  }
});
$.getJSON("data/towinsurf.php", function (data) {
  towinsurfs.addData(data);
  map.addLayer(towinsurfLayer);});var bodysurfLayer = L.geoJson(null);
var bodysurfs = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "img/bodysurf.png",
        iconSize: [24, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
      title: feature.properties.NAME,
      riseOnHover: true
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.NAME + "</td></tr>" + "<tr><th>Phone</th><td>" + feature.properties.TEL + "</td></tr>" + "<tr><th>Address</th><td>" + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + "</td></tr>" + "<tr><th></th><td><a class='url-break' href='/info/" + feature.properties.URL + "' target='_blank'>+ info</a></td></tr>" + "<table>";
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);
          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], highlightStyle));
        }
      });
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/bodysurf.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
      bodysurfSearch.push({
        name: layer.feature.properties.NAME,
        address: layer.feature.properties.ADDRESS1,
        source: "Bodysurfs",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0]
      });
    }
  }
});
$.getJSON("data/bodysurf.php", function (data) {
  bodysurfs.addData(data);
  map.addLayer(bodysurfLayer);});var tandemLayer = L.geoJson(null);
var tandems = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "img/tandem.png",
        iconSize: [24, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
      title: feature.properties.NAME,
      riseOnHover: true
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.NAME + "</td></tr>" + "<tr><th>Phone</th><td>" + feature.properties.TEL + "</td></tr>" + "<tr><th>Address</th><td>" + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + "</td></tr>" + "<tr><th></th><td><a class='url-break' href='/info/" + feature.properties.URL + "' target='_blank'>+ info</a></td></tr>" + "<table>";
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);
          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], highlightStyle));
        }
      });
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/tandem.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
      tandemSearch.push({
        name: layer.feature.properties.NAME,
        address: layer.feature.properties.ADDRESS1,
        source: "Tandems",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0]
      });
    }
  }
});
$.getJSON("data/tandem.php", function (data) {
  tandems.addData(data);
  map.addLayer(tandemLayer);});var foilLayer = L.geoJson(null);
var foils = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "img/foil.png",
        iconSize: [24, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
      title: feature.properties.NAME,
      riseOnHover: true
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.NAME + "</td></tr>" + "<tr><th>Phone</th><td>" + feature.properties.TEL + "</td></tr>" + "<tr><th>Address</th><td>" + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + "</td></tr>" + "<tr><th></th><td><a class='url-break' href='/info/" + feature.properties.URL + "' target='_blank'>+ info</a></td></tr>" + "<table>";
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);
          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], highlightStyle));
        }
      });
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/foil.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
      foilSearch.push({
        name: layer.feature.properties.NAME,
        address: layer.feature.properties.ADDRESS1,
        source: "Foils",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0]
      });
    }
  }
});
$.getJSON("data/foil.php", function (data) {
  foils.addData(data);
  map.addLayer(foilLayer);});var adaptadoLayer = L.geoJson(null);
var adaptados = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "img/adaptado.png",
        iconSize: [24, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
      title: feature.properties.NAME,
      riseOnHover: true
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.NAME + "</td></tr>" + "<tr><th>Phone</th><td>" + feature.properties.TEL + "</td></tr>" + "<tr><th>Address</th><td>" + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + "</td></tr>" + "<tr><th></th><td><a class='url-break' href='/info/" + feature.properties.URL + "' target='_blank'>+ info</a></td></tr>" + "<table>";
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);
          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], highlightStyle));
        }
      });
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/adaptado.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
      adaptadoSearch.push({
        name: layer.feature.properties.NAME,
        address: layer.feature.properties.ADDRESS1,
        source: "Adaptados",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0]
      });
    }
  }
});
$.getJSON("data/adaptado.php", function (data) {
  adaptados.addData(data);
  map.addLayer(adaptadoLayer);});var shopLayer = L.geoJson(null);
var shops = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "img/shop.png",
        iconSize: [24, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
      title: feature.properties.NAME,
      riseOnHover: true
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.NAME + "</td></tr>" + "<tr><th>Phone</th><td>" + feature.properties.TEL + "</td></tr>" + "<tr><th>Address</th><td>" + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + "</td></tr>" + "<tr><th></th><td><a class='url-break' href='/info/" + feature.properties.URL + "' target='_blank'>+ info</a></td></tr>" + "<table>";
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);
          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], highlightStyle));
        }
      });
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/shop.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
      shopSearch.push({
        name: layer.feature.properties.NAME,
        address: layer.feature.properties.ADDRESS1,
        source: "Shops",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0]
      });
    }
  }
});
$.getJSON("data/shop.php", function (data) {
  shops.addData(data);
  map.addLayer(shopLayer);});var campsLayer = L.geoJson(null);
var campss = L.geoJson(null, {
  pointToLayer: function (feature, latlng) {
    return L.marker(latlng, {
      icon: L.icon({
        iconUrl: "img/camps.png",
        iconSize: [24, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
      }),
      title: feature.properties.NAME,
      riseOnHover: true
    });
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      var content = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Name</th><td>" + feature.properties.NAME + "</td></tr>" + "<tr><th>Phone</th><td>" + feature.properties.TEL + "</td></tr>" + "<tr><th>Address</th><td>" + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + "</td></tr>" + "<tr><th></th><td><a class='url-break' href='/info/" + feature.properties.URL + "' target='_blank'>+ info</a></td></tr>" + "<table>";
      layer.on({
        click: function (e) {
          $("#feature-title").html(feature.properties.NAME);
          $("#feature-info").html(content);
          $("#featureModal").modal("show");
          highlight.clearLayers().addLayer(L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], highlightStyle));
        }
      });
      $("#feature-list tbody").append('<tr class="feature-row" id="' + L.stamp(layer) + '" lat="' + layer.getLatLng().lat + '" lng="' + layer.getLatLng().lng + '"><td style="vertical-align: middle;"><img width="16" height="18" src="img/camps.png"></td><td class="feature-name">' + layer.feature.properties.NAME + '</td><td style="vertical-align: middle;"><i class="fa fa-chevron-right pull-right"></i></td></tr>');
      campsSearch.push({
        name: layer.feature.properties.NAME,
        address: layer.feature.properties.ADDRESS1,
        source: "Campss",
        id: L.stamp(layer),
        lat: layer.feature.geometry.coordinates[1],
        lng: layer.feature.geometry.coordinates[0]
      });
    }
  }
});
$.getJSON("data/camps.php", function (data) {
  campss.addData(data);
  map.addLayer(campsLayer);});





map = L.map("map", {
  zoom: 2,
  center: [40.427225, -3.674348],
  layers: [cartoLight, markerClusters, highlight],
  zoomControl: true,
  attributionControl: false
});

/* Layer control listeners that allow for a single markerClusters layer */

 map.on("overlayadd", function(e) { 
if (e.layer === surfLayer) {markerClusters.addLayer(surfs);syncSidebar();}if (e.layer === surfboardLayer) {markerClusters.addLayer(surfboards);syncSidebar();}if (e.layer === longboardLayer) {markerClusters.addLayer(longboards);syncSidebar();}if (e.layer === bodyboardLayer) {markerClusters.addLayer(bodyboards);syncSidebar();}if (e.layer === kneeboardLayer) {markerClusters.addLayer(kneeboards);syncSidebar();}if (e.layer === skimboardLayer) {markerClusters.addLayer(skimboards);syncSidebar();}if (e.layer === towinsurfLayer) {markerClusters.addLayer(towinsurfs);syncSidebar();}if (e.layer === bodysurfLayer) {markerClusters.addLayer(bodysurfs);syncSidebar();}if (e.layer === tandemLayer) {markerClusters.addLayer(tandems);syncSidebar();}if (e.layer === foilLayer) {markerClusters.addLayer(foils);syncSidebar();}if (e.layer === adaptadoLayer) {markerClusters.addLayer(adaptados);syncSidebar();}if (e.layer === shopLayer) {markerClusters.addLayer(shops);syncSidebar();}if (e.layer === campsLayer) {markerClusters.addLayer(campss);syncSidebar();}  
});
map.on("overlayremove", function(e) {
if (e.layer === surfLayer) {markerClusters.removeLayer(surfs);syncSidebar();}if (e.layer === surfboardLayer) {markerClusters.removeLayer(surfboards);syncSidebar();}if (e.layer === longboardLayer) {markerClusters.removeLayer(longboards);syncSidebar();}if (e.layer === bodyboardLayer) {markerClusters.removeLayer(bodyboards);syncSidebar();}if (e.layer === kneeboardLayer) {markerClusters.removeLayer(kneeboards);syncSidebar();}if (e.layer === skimboardLayer) {markerClusters.removeLayer(skimboards);syncSidebar();}if (e.layer === towinsurfLayer) {markerClusters.removeLayer(towinsurfs);syncSidebar();}if (e.layer === bodysurfLayer) {markerClusters.removeLayer(bodysurfs);syncSidebar();}if (e.layer === tandemLayer) {markerClusters.removeLayer(tandems);syncSidebar();}if (e.layer === foilLayer) {markerClusters.removeLayer(foils);syncSidebar();}if (e.layer === adaptadoLayer) {markerClusters.removeLayer(adaptados);syncSidebar();}if (e.layer === shopLayer) {markerClusters.removeLayer(shops);syncSidebar();}if (e.layer === campsLayer) {markerClusters.removeLayer(campss);syncSidebar();}
});

/* Filter sidebar feature list to only show features in current map bounds */
map.on("moveend", function (e) {
  syncSidebar();
});

/* Clear feature highlight when map is clicked */
map.on("click", function(e) {
  highlight.clearLayers();
});



/* GPS enabled geolocation control set to follow the user's location */
var locateControl = L.control.locate({
  position: "bottomright",
  drawCircle: true,
  follow: true,
  setView: true,
  keepCurrentZoomLevel: true,
  markerStyle: {
    weight: 1,
    opacity: 0.8,
    fillOpacity: 0.8
  },
  circleStyle: {
    weight: 1,
    clickable: false
  },
  icon: "fa fa-location-arrow",
  metric: false,
  strings: {
    title: "My location",
    popup: "You are within {distance} {unit} from this point",
    outsideMapBoundsMsg: "You seem located outside the boundaries of the map"
  },
  locateOptions: {
    maxZoom: 18,
    watch: true,
    enableHighAccuracy: true,
    maximumAge: 10000,
    timeout: 10000
  }
}).addTo(map);

/* Larger screens get expanded layer control and visible sidebar */
if (document.body.clientWidth <= 767) {
  var isCollapsed = true;
} else {
  var isCollapsed = false;
}

var baseLayers = {
  "Mapa base": cartoLight,
  "Imagen aerea": usgsImagery
};

var groupedOverlays = {
  "Tipos": {
  
"<img src='img/surf.png' width='24' height='28'>&nbsp;surf": surfLayer,"<img src='img/surfboard.png' width='24' height='28'>&nbsp;surfboard": surfboardLayer,"<img src='img/longboard.png' width='24' height='28'>&nbsp;longboard": longboardLayer,"<img src='img/bodyboard.png' width='24' height='28'>&nbsp;bodyboard": bodyboardLayer,"<img src='img/kneeboard.png' width='24' height='28'>&nbsp;kneeboard": kneeboardLayer,"<img src='img/skimboard.png' width='24' height='28'>&nbsp;skimboard": skimboardLayer,"<img src='img/towinsurf.png' width='24' height='28'>&nbsp;towinsurf": towinsurfLayer,"<img src='img/bodysurf.png' width='24' height='28'>&nbsp;bodysurf": bodysurfLayer,"<img src='img/tandem.png' width='24' height='28'>&nbsp;tandem": tandemLayer,"<img src='img/foil.png' width='24' height='28'>&nbsp;foil": foilLayer,"<img src='img/adaptado.png' width='24' height='28'>&nbsp;adaptado": adaptadoLayer,"<img src='img/shop.png' width='24' height='28'>&nbsp;shop": shopLayer,"<img src='img/camps.png' width='24' height='28'>&nbsp;camps": campsLayer  }
};

var layerControl = L.control.groupedLayers(baseLayers, groupedOverlays, {
  collapsed: isCollapsed
}).addTo(map);

/* Highlight search box text on click */
$("#searchbox").click(function () {
  $(this).select();
});

/* Prevent hitting enter from refreshing the page */
$("#searchbox").keypress(function (e) {
  if (e.which == 13) {
    e.preventDefault();
  }
});

$("#featureModal").on("hidden.bs.modal", function (e) {
  $(document).on("mouseout", ".feature-row", clearHighlight);
});

/* Typeahead search functionality */
$(document).one("ajaxStop", function () {
  $("#loading").hide();
  sizeLayerControl();

  featureList = new List("features", {valueNames: ["feature-name"]});
  featureList.sort("feature-name", {order:"asc"});


var surfsBH = new Bloodhound({name: "Surfs",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: surfSearch,limit: 10});var surfboardsBH = new Bloodhound({name: "Surfboards",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: surfboardSearch,limit: 10});var longboardsBH = new Bloodhound({name: "Longboards",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: longboardSearch,limit: 10});var bodyboardsBH = new Bloodhound({name: "Bodyboards",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: bodyboardSearch,limit: 10});var kneeboardsBH = new Bloodhound({name: "Kneeboards",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: kneeboardSearch,limit: 10});var skimboardsBH = new Bloodhound({name: "Skimboards",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: skimboardSearch,limit: 10});var towinsurfsBH = new Bloodhound({name: "Towinsurfs",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: towinsurfSearch,limit: 10});var bodysurfsBH = new Bloodhound({name: "Bodysurfs",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: bodysurfSearch,limit: 10});var tandemsBH = new Bloodhound({name: "Tandems",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: tandemSearch,limit: 10});var foilsBH = new Bloodhound({name: "Foils",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: foilSearch,limit: 10});var adaptadosBH = new Bloodhound({name: "Adaptados",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: adaptadoSearch,limit: 10});var shopsBH = new Bloodhound({name: "Shops",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: shopSearch,limit: 10});var campssBH = new Bloodhound({name: "Campss",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: campsSearch,limit: 10});
  var geonamesBH = new Bloodhound({
    name: "GeoNames",
    datumTokenizer: function (d) {
      return Bloodhound.tokenizers.whitespace(d.name);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
      url: "http://api.geonames.org/searchJSON?username=bootleaf&featureClass=P&maxRows=5&countryCode=US&name_startsWith=%QUERY",
      filter: function (data) {
        return $.map(data.geonames, function (result) {
          return {
            name: result.name + ", " + result.adminCode1,
            lat: result.lat,
            lng: result.lng,
            source: "GeoNames"
          };
        });
      },
      ajax: {
        beforeSend: function (jqXhr, settings) {
          settings.url += "&east=" + map.getBounds().getEast() + "&west=" + map.getBounds().getWest() + "&north=" + map.getBounds().getNorth() + "&south=" + map.getBounds().getSouth();
          $("#searchicon").removeClass("fa-search").addClass("fa-refresh fa-spin");
        },
        complete: function (jqXHR, status) {
          $('#searchicon').removeClass("fa-refresh fa-spin").addClass("fa-search");
        }
      }
    },
    limit: 10
  });
  
surfsBH.initialize();surfboardsBH.initialize();longboardsBH.initialize();bodyboardsBH.initialize();kneeboardsBH.initialize();skimboardsBH.initialize();towinsurfsBH.initialize();bodysurfsBH.initialize();tandemsBH.initialize();foilsBH.initialize();adaptadosBH.initialize();shopsBH.initialize();campssBH.initialize();  geonamesBH.initialize();

  /* instantiate the typeahead UI */
  $("#searchbox").typeahead({
    minLength: 3,
    highlight: true,
    hint: false
  }, 
  
{name: "Surfs",displayKey: "name",source: surfsBH.ttAdapter(),templates: {header: "<h4 class='typeahead-header'><img src='img/surf.png' width='24' height='28'>&nbsp;surfs</h4>",suggestion: Handlebars.compile(["{{name}}<br>&nbsp;<small>{{address}}</small>"].join(""))}},{name: "Surfboards",displayKey: "name",source: surfboardsBH.ttAdapter(),templates: {header: "<h4 class='typeahead-header'><img src='img/surfboard.png' width='24' height='28'>&nbsp;surfboards</h4>",suggestion: Handlebars.compile(["{{name}}<br>&nbsp;<small>{{address}}</small>"].join(""))}},{name: "Longboards",displayKey: "name",source: longboardsBH.ttAdapter(),templates: {header: "<h4 class='typeahead-header'><img src='img/longboard.png' width='24' height='28'>&nbsp;longboards</h4>",suggestion: Handlebars.compile(["{{name}}<br>&nbsp;<small>{{address}}</small>"].join(""))}},{name: "Bodyboards",displayKey: "name",source: bodyboardsBH.ttAdapter(),templates: {header: "<h4 class='typeahead-header'><img src='img/bodyboard.png' width='24' height='28'>&nbsp;bodyboards</h4>",suggestion: Handlebars.compile(["{{name}}<br>&nbsp;<small>{{address}}</small>"].join(""))}},{name: "Kneeboards",displayKey: "name",source: kneeboardsBH.ttAdapter(),templates: {header: "<h4 class='typeahead-header'><img src='img/kneeboard.png' width='24' height='28'>&nbsp;kneeboards</h4>",suggestion: Handlebars.compile(["{{name}}<br>&nbsp;<small>{{address}}</small>"].join(""))}},{name: "Skimboards",displayKey: "name",source: skimboardsBH.ttAdapter(),templates: {header: "<h4 class='typeahead-header'><img src='img/skimboard.png' width='24' height='28'>&nbsp;skimboards</h4>",suggestion: Handlebars.compile(["{{name}}<br>&nbsp;<small>{{address}}</small>"].join(""))}},{name: "Towinsurfs",displayKey: "name",source: towinsurfsBH.ttAdapter(),templates: {header: "<h4 class='typeahead-header'><img src='img/towinsurf.png' width='24' height='28'>&nbsp;towinsurfs</h4>",suggestion: Handlebars.compile(["{{name}}<br>&nbsp;<small>{{address}}</small>"].join(""))}},{name: "Bodysurfs",displayKey: "name",source: bodysurfsBH.ttAdapter(),templates: {header: "<h4 class='typeahead-header'><img src='img/bodysurf.png' width='24' height='28'>&nbsp;bodysurfs</h4>",suggestion: Handlebars.compile(["{{name}}<br>&nbsp;<small>{{address}}</small>"].join(""))}},{name: "Tandems",displayKey: "name",source: tandemsBH.ttAdapter(),templates: {header: "<h4 class='typeahead-header'><img src='img/tandem.png' width='24' height='28'>&nbsp;tandems</h4>",suggestion: Handlebars.compile(["{{name}}<br>&nbsp;<small>{{address}}</small>"].join(""))}},{name: "Foils",displayKey: "name",source: foilsBH.ttAdapter(),templates: {header: "<h4 class='typeahead-header'><img src='img/foil.png' width='24' height='28'>&nbsp;foils</h4>",suggestion: Handlebars.compile(["{{name}}<br>&nbsp;<small>{{address}}</small>"].join(""))}},{name: "Adaptados",displayKey: "name",source: adaptadosBH.ttAdapter(),templates: {header: "<h4 class='typeahead-header'><img src='img/adaptado.png' width='24' height='28'>&nbsp;adaptados</h4>",suggestion: Handlebars.compile(["{{name}}<br>&nbsp;<small>{{address}}</small>"].join(""))}},{name: "Shops",displayKey: "name",source: shopsBH.ttAdapter(),templates: {header: "<h4 class='typeahead-header'><img src='img/shop.png' width='24' height='28'>&nbsp;shops</h4>",suggestion: Handlebars.compile(["{{name}}<br>&nbsp;<small>{{address}}</small>"].join(""))}},{name: "Campss",displayKey: "name",source: campssBH.ttAdapter(),templates: {header: "<h4 class='typeahead-header'><img src='img/camps.png' width='24' height='28'>&nbsp;campss</h4>",suggestion: Handlebars.compile(["{{name}}<br>&nbsp;<small>{{address}}</small>"].join(""))}},  
  
 {
    name: "GeoNames",
    displayKey: "name",
    source: geonamesBH.ttAdapter(),
    templates: {
      header: "<h4 class='typeahead-header'><img src='img/globe.png' width='25' height='25'>&nbsp;GeoNames</h4>"
    }
  }).on("typeahead:selected", function (obj, datum) {
   
    	if (datum.source === "Surfs") {if (!map.hasLayer(surfLayer)) {map.addLayer(surfLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Surfboards") {if (!map.hasLayer(surfboardLayer)) {map.addLayer(surfboardLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Longboards") {if (!map.hasLayer(longboardLayer)) {map.addLayer(longboardLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Bodyboards") {if (!map.hasLayer(bodyboardLayer)) {map.addLayer(bodyboardLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Kneeboards") {if (!map.hasLayer(kneeboardLayer)) {map.addLayer(kneeboardLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Skimboards") {if (!map.hasLayer(skimboardLayer)) {map.addLayer(skimboardLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Towinsurfs") {if (!map.hasLayer(towinsurfLayer)) {map.addLayer(towinsurfLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Bodysurfs") {if (!map.hasLayer(bodysurfLayer)) {map.addLayer(bodysurfLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Tandems") {if (!map.hasLayer(tandemLayer)) {map.addLayer(tandemLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Foils") {if (!map.hasLayer(foilLayer)) {map.addLayer(foilLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Adaptados") {if (!map.hasLayer(adaptadoLayer)) {map.addLayer(adaptadoLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Shops") {if (!map.hasLayer(shopLayer)) {map.addLayer(shopLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Campss") {if (!map.hasLayer(campsLayer)) {map.addLayer(campsLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} } 

    if (datum.source === "GeoNames") {
      map.setView([datum.lat, datum.lng], 14);
    }
    if ($(".navbar-collapse").height() > 50) {
      $(".navbar-collapse").collapse("hide");
    }
  }).on("typeahead:opened", function () {
    $(".navbar-collapse.in").css("max-height", $(document).height() - $(".navbar-header").height());
    $(".navbar-collapse.in").css("height", $(document).height() - $(".navbar-header").height());
  }).on("typeahead:closed", function () {
    $(".navbar-collapse.in").css("max-height", "");
    $(".navbar-collapse.in").css("height", "");
  });
  $(".twitter-typeahead").css("position", "static");
  $(".twitter-typeahead").css("display", "block");
});

// Leaflet patch to make layer control scrollable on touch browsers
var container = $(".leaflet-control-layers")[0];
if (!L.Browser.touch) {
  L.DomEvent
  .disableClickPropagation(container)
  .disableScrollPropagation(container);
} else {
  L.DomEvent.disableClickPropagation(container);
}