var map, featureList,olimpicaSearch = [],ligeraSearch = [],adaptadaSearch = [],cruceroSearch = [],clubSearch = [];
$(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 */
olimpicas.eachLayer(function (layer) {if (map.hasLayer(olimpicaLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});ligeras.eachLayer(function (layer) {if (map.hasLayer(ligeraLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});adaptadas.eachLayer(function (layer) {if (map.hasLayer(adaptadaLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});cruceros.eachLayer(function (layer) {if (map.hasLayer(cruceroLayer)) {if (map.getBounds().contains(layer.getLatLng())) {$("#feature-list tbody").append(' | ' + layer.feature.properties.NAME + ' | |
');}}});clubs.eachLayer(function (layer) {if (map.hasLayer(clubLayer)) {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 olimpicaLayer = L.geoJson(null);
var olimpicas = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/olimpica.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 + ' | |
');
olimpicaSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Olimpicas",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/olimpica.php", function (data) {
olimpicas.addData(data);
map.addLayer(olimpicaLayer);});var ligeraLayer = L.geoJson(null);
var ligeras = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/ligera.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 + ' | |
');
ligeraSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Ligeras",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/ligera.php", function (data) {
ligeras.addData(data);
map.addLayer(ligeraLayer);});var adaptadaLayer = L.geoJson(null);
var adaptadas = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/adaptada.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 + ' | |
');
adaptadaSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Adaptadas",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/adaptada.php", function (data) {
adaptadas.addData(data);
map.addLayer(adaptadaLayer);});var cruceroLayer = L.geoJson(null);
var cruceros = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/crucero.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 + ' | |
');
cruceroSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Cruceros",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/crucero.php", function (data) {
cruceros.addData(data);
map.addLayer(cruceroLayer);});var clubLayer = L.geoJson(null);
var clubs = L.geoJson(null, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconUrl: "img/club.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 + ' | |
');
clubSearch.push({
name: layer.feature.properties.NAME,
address: layer.feature.properties.ADDRESS1,
source: "Clubs",
id: L.stamp(layer),
lat: layer.feature.geometry.coordinates[1],
lng: layer.feature.geometry.coordinates[0]
});
}
}
});
$.getJSON("data/club.php", function (data) {
clubs.addData(data);
map.addLayer(clubLayer);});
map = L.map("map", {
zoom: 2,
center: [35.729569, -8.723145],
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 === olimpicaLayer) {markerClusters.addLayer(olimpicas);syncSidebar();}if (e.layer === ligeraLayer) {markerClusters.addLayer(ligeras);syncSidebar();}if (e.layer === adaptadaLayer) {markerClusters.addLayer(adaptadas);syncSidebar();}if (e.layer === cruceroLayer) {markerClusters.addLayer(cruceros);syncSidebar();}if (e.layer === clubLayer) {markerClusters.addLayer(clubs);syncSidebar();}
});
map.on("overlayremove", function(e) {
if (e.layer === olimpicaLayer) {markerClusters.removeLayer(olimpicas);syncSidebar();}if (e.layer === ligeraLayer) {markerClusters.removeLayer(ligeras);syncSidebar();}if (e.layer === adaptadaLayer) {markerClusters.removeLayer(adaptadas);syncSidebar();}if (e.layer === cruceroLayer) {markerClusters.removeLayer(cruceros);syncSidebar();}if (e.layer === clubLayer) {markerClusters.removeLayer(clubs);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": {
" olimpica": olimpicaLayer," ligera": ligeraLayer," adaptada": adaptadaLayer," crucero": cruceroLayer," club": clubLayer }
};
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 olimpicasBH = new Bloodhound({name: "Olimpicas",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: olimpicaSearch,limit: 10});var ligerasBH = new Bloodhound({name: "Ligeras",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: ligeraSearch,limit: 10});var adaptadasBH = new Bloodhound({name: "Adaptadas",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: adaptadaSearch,limit: 10});var crucerosBH = new Bloodhound({name: "Cruceros",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: cruceroSearch,limit: 10});var clubsBH = new Bloodhound({name: "Clubs",datumTokenizer: function (d) {return Bloodhound.tokenizers.whitespace(d.name);},queryTokenizer: Bloodhound.tokenizers.whitespace,local: clubSearch,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
});
olimpicasBH.initialize();ligerasBH.initialize();adaptadasBH.initialize();crucerosBH.initialize();clubsBH.initialize(); geonamesBH.initialize();
/* instantiate the typeahead UI */
$("#searchbox").typeahead({
minLength: 3,
highlight: true,
hint: false
},
{name: "Olimpicas",displayKey: "name",source: olimpicasBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Ligeras",displayKey: "name",source: ligerasBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Adaptadas",displayKey: "name",source: adaptadasBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Cruceros",displayKey: "name",source: crucerosBH.ttAdapter(),templates: {header: "",suggestion: Handlebars.compile(["{{name}}
{{address}}"].join(""))}},{name: "Clubs",displayKey: "name",source: clubsBH.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 === "Olimpicas") {if (!map.hasLayer(olimpicaLayer)) {map.addLayer(olimpicaLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Ligeras") {if (!map.hasLayer(ligeraLayer)) {map.addLayer(ligeraLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Adaptadas") {if (!map.hasLayer(adaptadaLayer)) {map.addLayer(adaptadaLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Cruceros") {if (!map.hasLayer(cruceroLayer)) {map.addLayer(cruceroLayer);}map.setView([datum.lat, datum.lng], 17);if (map._layers[datum.id]) {map._layers[datum.id].fire("click");} }if (datum.source === "Clubs") {if (!map.hasLayer(clubLayer)) {map.addLayer(clubLayer);}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