How can I make my infobox on cartodb close when I click outside of it or any part of my basemap. I do not want it to close when I click the closing button on the top right corner of the infobox. I am looking for a code I can add to my script or anything that might help.
var map;
var google_api_key = "ljkjGcnvIaN-4HXq45A7Q-HD"
function main() {
//var google_api_key = "ljkjGcnvIaN-4HXq45A7Q-HD"
// Map center
var myLatlng = new google.maps.LatLng(42.358, -71.07);
var myOptions = {
zoom: 14,
center: myLatlng,
disableDefaultUI: true,
zoomControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Render basemap
map = new google.maps.Map(document.getElementById("map"), myOptions);
map.set('styles', [
{
featureType: "road",
elementType: "geometry",
stylers: [
{ visibility: "on" }
]
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [
{ lightness: 100 },
]
},
{
featureType: "road",
elementType: "labels",
stylers: [
{ lightness: 20},
{visibility: "off" }
]
},
{
featureType: "road.highway",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "poi.business",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "poi.government",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "poi.attraction",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "poi.medical",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "poi.place_of_worship",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "poi.sports_complex",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "poi.school",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "poi.park",
elementType: "labels.icon",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "landscape",
elementType: "labels.icon",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "administrative",
elementType: "labels.icon",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "transit.station",
stylers: [
{visibility: "off" }
]
},
{
featureType: "poi",
elementType: "labels.icon",
stylers: [
{ visibility: "off" }
]
},
{
featureType: "road.local",
elementType: "labels",
stylers: [
{ visibility: "on" }
]
}
]);
// Put layer data into a JS object
var layerSource = 'http://ift.tt/1vWhvnO';
// For storing the sublayers
var sublayers = [];
var cdbOptions = {
cartodb_logo: false,
mobile_layout: true
}
// Add data layer to your map
cartodb.createLayer(map,layerSource, cdbOptions)
.addTo(map)
.done(function(layer) {
//console.log(layer);
var num_sublayers = layer.getSubLayerCount();
for (var i = 0; i < num_sublayers; i++) {
sublayers[i] = layer.getSubLayer(i);
//console.log(sublayers[i]);
}
var sublayer0Shown = true;
$("#sublayer0").on('click', function() {
if (sublayer0Shown) {
sublayers[0].hide();
sublayers[1].hide();
$("#switch1").removeClass('right switch enabled');
$("#switch1").addClass('right switch disabled');
} else {
sublayers[0].show();
sublayers[1].show();
$("#switch1").removeClass('right switch disabled');
$("#switch1").addClass('right switch enabled');
}
sublayer0Shown = !sublayer0Shown;
});
var sublayer1Shown = true;
$("#sublayer1").on('click', function() {
if (sublayer1Shown) {
sublayers[2].hide();
sublayers[3].hide();
$("#switch2").removeClass('right switch enabled');
$("#switch2").addClass('right switch disabled');
} else {
sublayers[2].show();
sublayers[3].show();
$("#switch2").removeClass('right switch disabled');
$("#switch2").addClass('right switch enabled');
}
sublayer1Shown = !sublayer1Shown;
});
})
.error(function(err) {
console.log("error: " + err);
});
}
window.onload = main;
</script>
Aucun commentaire:
Enregistrer un commentaire