var map, featureList,kayakSearch = [],slalomSearch = [],descensoSearch = [],rodeoSearch = [],surfSearch = [],poloSearch = [],raftingSearch = [],recreoSearch = [],marSearch = [],dragonSearch = [],extremoSearch = [],skiSearch = [],adaptadoSearch = [],shopSearch = [];
$(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 */
kayaks.eachLayer(function (layer) {if (map.hasLayer(kayakLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});slaloms.eachLayer(function (layer) {if (map.hasLayer(slalomLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});descensos.eachLayer(function (layer) {if (map.hasLayer(descensoLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});rodeos.eachLayer(function (layer) {if (map.hasLayer(rodeoLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});surfs.eachLayer(function (layer) {if (map.hasLayer(surfLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});polos.eachLayer(function (layer) {if (map.hasLayer(poloLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});raftings.eachLayer(function (layer) {if (map.hasLayer(raftingLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});recreos.eachLayer(function (layer) {if (map.hasLayer(recreoLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});mars.eachLayer(function (layer) {if (map.hasLayer(marLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});dragons.eachLayer(function (layer) {if (map.hasLayer(dragonLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});extremos.eachLayer(function (layer) {if (map.hasLayer(extremoLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});skis.eachLayer(function (layer) {if (map.hasLayer(skiLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});adaptados.eachLayer(function (layer) {if (map.hasLayer(adaptadoLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});shops.eachLayer(function (layer) {if (map.hasLayer(shopLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});
/* 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: '© OpenStreetMap contributors, © CartoDB'
});
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 kayakLayer = L.geoJson(null);
var kayaks = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/kayak.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 = "" + "| Name | " + feature.properties.NAME + " |
|---|
" + "| Phone | " + feature.properties.TEL + " |
|---|
" + "| Address | " + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + " |
|---|
" + " | + info |
|---|
" + "";
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(' | ' + layer.feature.properties.NAME + ' | |
');
kayakSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Kayaks",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/kayak.php", function (data) {
kayaks.addData(data);
map.addLayer(kayakLayer);});var slalomLayer = L.geoJson(null);
var slaloms = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/slalom.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 = "" + "| Name | " + feature.properties.NAME + " |
|---|
" + "| Phone | " + feature.properties.TEL + " |
|---|
" + "| Address | " + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + " |
|---|
" + " | + info |
|---|
" + "";
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(' | ' + layer.feature.properties.NAME + ' | |
');
slalomSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Slaloms",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/slalom.php", function (data) {
slaloms.addData(data);
map.addLayer(slalomLayer);});var descensoLayer = L.geoJson(null);
var descensos = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/descenso.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 = "" + "| Name | " + feature.properties.NAME + " |
|---|
" + "| Phone | " + feature.properties.TEL + " |
|---|
" + "| Address | " + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + " |
|---|
" + " | + info |
|---|
" + "";
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(' | ' + layer.feature.properties.NAME + ' | |
');
descensoSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Descensos",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/descenso.php", function (data) {
descensos.addData(data);
map.addLayer(descensoLayer);});var rodeoLayer = L.geoJson(null);
var rodeos = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/rodeo.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 = "" + "| Name | " + feature.properties.NAME + " |
|---|
" + "| Phone | " + feature.properties.TEL + " |
|---|
" + "| Address | " + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + " |
|---|
" + " | + info |
|---|
" + "";
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(' | ' + layer.feature.properties.NAME + ' | |
');
rodeoSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Rodeos",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/rodeo.php", function (data) {
rodeos.addData(data);
map.addLayer(rodeoLayer);});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 = "" + "| Name | " + feature.properties.NAME + " |
|---|
" + "| Phone | " + feature.properties.TEL + " |
|---|
" + "| Address | " + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + " |
|---|
" + " | + info |
|---|
" + "";
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(' | ' + layer.feature.properties.NAME + ' | |
');
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 poloLayer = L.geoJson(null);
var polos = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/polo.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 = "" + "| Name | " + feature.properties.NAME + " |
|---|
" + "| Phone | " + feature.properties.TEL + " |
|---|
" + "| Address | " + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + " |
|---|
" + " | + info |
|---|
" + "";
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(' | ' + layer.feature.properties.NAME + ' | |
');
poloSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Polos",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/polo.php", function (data) {
polos.addData(data);
map.addLayer(poloLayer);});var raftingLayer = L.geoJson(null);
var raftings = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/rafting.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 = "" + "| Name | " + feature.properties.NAME + " |
|---|
" + "| Phone | " + feature.properties.TEL + " |
|---|
" + "| Address | " + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + " |
|---|
" + " | + info |
|---|
" + "";
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(' | ' + layer.feature.properties.NAME + ' | |
');
raftingSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Raftings",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/rafting.php", function (data) {
raftings.addData(data);
map.addLayer(raftingLayer);});var recreoLayer = L.geoJson(null);
var recreos = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/recreo.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 = "" + "| Name | " + feature.properties.NAME + " |
|---|
" + "| Phone | " + feature.properties.TEL + " |
|---|
" + "| Address | " + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + " |
|---|
" + " | + info |
|---|
" + "";
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(' | ' + layer.feature.properties.NAME + ' | |
');
recreoSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Recreos",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/recreo.php", function (data) {
recreos.addData(data);
map.addLayer(recreoLayer);});var marLayer = L.geoJson(null);
var mars = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/mar.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 = "" + "| Name | " + feature.properties.NAME + " |
|---|
" + "| Phone | " + feature.properties.TEL + " |
|---|
" + "| Address | " + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + " |
|---|
" + " | + info |
|---|
" + "";
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(' | ' + layer.feature.properties.NAME + ' | |
');
marSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Mars",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/mar.php", function (data) {
mars.addData(data);
map.addLayer(marLayer);});var dragonLayer = L.geoJson(null);
var dragons = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/dragon.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 = "" + "| Name | " + feature.properties.NAME + " |
|---|
" + "| Phone | " + feature.properties.TEL + " |
|---|
" + "| Address | " + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + " |
|---|
" + " | + info |
|---|
" + "";
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(' | ' + layer.feature.properties.NAME + ' | |
');
dragonSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Dragons",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/dragon.php", function (data) {
dragons.addData(data);
map.addLayer(dragonLayer);});var extremoLayer = L.geoJson(null);
var extremos = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/extremo.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 = "" + "| Name | " + feature.properties.NAME + " |
|---|
" + "| Phone | " + feature.properties.TEL + " |
|---|
" + "| Address | " + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + " |
|---|
" + " | + info |
|---|
" + "";
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(' | ' + layer.feature.properties.NAME + ' | |
');
extremoSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Extremos",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/extremo.php", function (data) {
extremos.addData(data);
map.addLayer(extremoLayer);});var skiLayer = L.geoJson(null);
var skis = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/ski.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 = "" + "| Name | " + feature.properties.NAME + " |
|---|
" + "| Phone | " + feature.properties.TEL + " |
|---|
" + "| Address | " + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + " |
|---|
" + " | + info |
|---|
" + "";
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(' | ' + layer.feature.properties.NAME + ' | |
');
skiSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Skis",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/ski.php", function (data) {
skis.addData(data);
map.addLayer(skiLayer);});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 = "" + "| Name | " + feature.properties.NAME + " |
|---|
" + "| Phone | " + feature.properties.TEL + " |
|---|
" + "| Address | " + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + " |
|---|
" + " | + info |
|---|
" + "";
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(' | ' + layer.feature.properties.NAME + ' | |
');
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 = "" + "| Name | " + feature.properties.NAME + " |
|---|
" + "| Phone | " + feature.properties.TEL + " |
|---|
" + "| Address | " + feature.properties.ADDRESS1 + ", " + feature.properties.CITY + " |
|---|
" + " | + info |
|---|
" + "";
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(' | ' + layer.feature.properties.NAME + ' | |
');
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);});
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 === kayakLayer) {markerClusters.addLayer(kayaks);syncSidebar();}if (e.layer === slalomLayer) {markerClusters.addLayer(slaloms);syncSidebar();}if (e.layer === descensoLayer) {markerClusters.addLayer(descensos);syncSidebar();}if (e.layer === rodeoLayer) {markerClusters.addLayer(rodeos);syncSidebar();}if (e.layer === surfLayer) {markerClusters.addLayer(surfs);syncSidebar();}if (e.layer === poloLayer) {markerClusters.addLayer(polos);syncSidebar();}if (e.layer === raftingLayer) {markerClusters.addLayer(raftings);syncSidebar();}if (e.layer === recreoLayer) {markerClusters.addLayer(recreos);syncSidebar();}if (e.layer === marLayer) {markerClusters.addLayer(mars);syncSidebar();}if (e.layer === dragonLayer) {markerClusters.addLayer(dragons);syncSidebar();}if (e.layer === extremoLayer) {markerClusters.addLayer(extremos);syncSidebar();}if (e.layer === skiLayer) {markerClusters.addLayer(skis);syncSidebar();}if (e.layer === adaptadoLayer) {markerClusters.addLayer(adaptados);syncSidebar();}if (e.layer === shopLayer) {markerClusters.addLayer(shops);syncSidebar();}
});
map.on("overlayremove", function(e) {
if (e.layer === kayakLayer) {markerClusters.removeLayer(kayaks);syncSidebar();}if (e.layer === slalomLayer) {markerClusters.removeLayer(slaloms);syncSidebar();}if (e.layer === descensoLayer) {markerClusters.removeLayer(descensos);syncSidebar();}if (e.layer === rodeoLayer) {markerClusters.removeLayer(rodeos);syncSidebar();}if (e.layer === surfLayer) {markerClusters.removeLayer(surfs);syncSidebar();}if (e.layer === poloLayer) {markerClusters.removeLayer(polos);syncSidebar();}if (e.layer === raftingLayer) {markerClusters.removeLayer(raftings);syncSidebar();}if (e.layer === recreoLayer) {markerClusters.removeLayer(recreos);syncSidebar();}if (e.layer === marLayer) {markerClusters.removeLayer(mars);syncSidebar();}if (e.layer === dragonLayer) {markerClusters.removeLayer(dragons);syncSidebar();}if (e.layer === extremoLayer) {markerClusters.removeLayer(extremos);syncSidebar();}if (e.layer === skiLayer) {markerClusters.removeLayer(skis);syncSidebar();}if (e.layer === adaptadoLayer) {markerClusters.removeLayer(adaptados);syncSidebar();}if (e.layer === shopLayer) {markerClusters.removeLayer(shops);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": {
" kayak": kayakLayer," slalom": slalomLayer," descenso": descensoLayer," rodeo": rodeoLayer," surf": surfLayer," polo": poloLayer," rafting": raftingLayer," recreo": recreoLayer," mar": marLayer," dragon": dragonLayer," extremo": extremoLayer," ski": skiLayer," adaptado": adaptadoLayer," shop": shopLayer }
};
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 kayaksBH = new Bloodhound({name: "Kayaks",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: kayakSearch,limit: 10});var slalomsBH = new Bloodhound({name: "Slaloms",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: slalomSearch,limit: 10});var descensosBH = new Bloodhound({name: "Descensos",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: descensoSearch,limit: 10});var rodeosBH = new Bloodhound({name: "Rodeos",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: rodeoSearch,limit: 10});var surfsBH = new Bloodhound({name: "Surfs",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: surfSearch,limit: 10});var polosBH = new Bloodhound({name: "Polos",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: poloSearch,limit: 10});var raftingsBH = new Bloodhound({name: "Raftings",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: raftingSearch,limit: 10});var recreosBH = new Bloodhound({name: "Recreos",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: recreoSearch,limit: 10});var marsBH = new Bloodhound({name: "Mars",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: marSearch,limit: 10});var dragonsBH = new Bloodhound({name: "Dragons",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: dragonSearch,limit: 10});var extremosBH = new Bloodhound({name: "Extremos",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: extremoSearch,limit: 10});var skisBH = new Bloodhound({name: "Skis",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: skiSearch,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 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
});
kayaksBH.initialize();slalomsBH.initialize();descensosBH.initialize();rodeosBH.initialize();surfsBH.initialize();polosBH.initialize();raftingsBH.initialize();recreosBH.initialize();marsBH.initialize();dragonsBH.initialize();extremosBH.initialize();skisBH.initialize();adaptadosBH.initialize();shopsBH.initialize(); geonamesBH.initialize();
/* instantiate the typeahead UI */
$("#searchbox").typeahead({
minLength: 3,
highlight: true,
hint: false
},
{name: "Kayaks",displayKey: "name",source: kayaksBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Slaloms",displayKey: "name",source: slalomsBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Descensos",displayKey: "name",source: descensosBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Rodeos",displayKey: "name",source: rodeosBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Surfs",displayKey: "name",source: surfsBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Polos",displayKey: "name",source: polosBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Raftings",displayKey: "name",source: raftingsBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Recreos",displayKey: "name",source: recreosBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Mars",displayKey: "name",source: marsBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Dragons",displayKey: "name",source: dragonsBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Extremos",displayKey: "name",source: extremosBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Skis",displayKey: "name",source: skisBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Adaptados",displayKey: "name",source: adaptadosBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Shops",displayKey: "name",source: shopsBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},
{
name: "GeoNames",
displayKey: "name",
source: geonamesBH.ttAdapter(),
templates: {
header: ""
}
}).on("typeahead:selected", function (obj, datum) {
if (datum.source === "Kayaks") {if (!map.hasLayer(kayakLayer)) {map.addLayer(kayakLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Slaloms") {if (!map.hasLayer(slalomLayer)) {map.addLayer(slalomLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Descensos") {if (!map.hasLayer(descensoLayer)) {map.addLayer(descensoLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Rodeos") {if (!map.hasLayer(rodeoLayer)) {map.addLayer(rodeoLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }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 === "Polos") {if (!map.hasLayer(poloLayer)) {map.addLayer(poloLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Raftings") {if (!map.hasLayer(raftingLayer)) {map.addLayer(raftingLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Recreos") {if (!map.hasLayer(recreoLayer)) {map.addLayer(recreoLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Mars") {if (!map.hasLayer(marLayer)) {map.addLayer(marLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Dragons") {if (!map.hasLayer(dragonLayer)) {map.addLayer(dragonLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Extremos") {if (!map.hasLayer(extremoLayer)) {map.addLayer(extremoLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Skis") {if (!map.hasLayer(skiLayer)) {map.addLayer(skiLayer);}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 === "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);
}
GeoNames