I'm creating a map using mapbox and I am having a problem with my marker filters. I want the map to load in with a filter already active. I currently have two buttons; development and land. They both work as intended but I would like the map to load with the "development" filter ALREADY active. As it stands the map loads and all markers are visible causing some areas, like the southeastern Georgia, to look very crowded. I've looked in several places and tried mapbox customer support but they don't seem to understand my question. Let me know if any more information is needed.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Custom marker icons</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.6/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.menu-ui {
background:#A2A19F;
position:absolute;
bottom:50px;
left:50%;
margin-left:-110px;
z-index:1;
border-radius:3px;
width:auto;
}
.menu-ui a {
font-size:22px;
color:#fff;
display:table-cell;
padding:10px;
text-decoration:none;
text-align:center;
}
.menu-ui a:first-child {
border-radius:3px 3px 0 0;
}
.menu-ui a:last-child {
border:none;
border-radius:0 0 3px 3px;
}
.menu-ui a:hover {
background:#f8f8f8;
color:#404040;
}
.menu-ui a.active,
.menu-ui a.active:hover {
background:#DB3E3A;
color:#FFF;
}
.popup {
text-align:center;
}
.popup .slideshow .image { display:none; }
.popup .slideshow .image.active { display:block; }
.popup .slideshow img {
width:100%;
}
.popup .slideshow .caption {
background:#eee;
padding:10px;
}
.popup .cycle {
padding:10px 0 20px;
}
.popup .cycle a.prev { float:left; }
.popup .cycle a.next { float:right; }
li.menu-item {
margin:0 0 10px 0;
}
</style>
//this defines my buttons for my filter
<nav class='menu-ui'>
<a href='#' class='active' data-filter='Development'>Development</a><a href='#' data-filter='Land'>Land</a>
</nav>
<div id='map'></div>
<!-- jQuery is required for this example. -->
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script>
L.mapbox.accessToken = 'pk.eyJ1Ijoib21uaXVzbm93IiwiYSI6ImFlZ0pNSXMifQ.VNyOy9GaRZ1cAS2nDTp3tw';
var southWest = L.latLng(21.284438,-131.265625),
northEast = L.latLng(51.606163, -62.929688),
bounds = L.latLngBounds(southWest, northEast);
var map = L.mapbox.map('map', 'coltonneil.3dc5d18e', {
// set that bounding box as maxBounds to restrict moving the map
// see full maxBounds documentation:
// http://leafletjs.com/reference.html#map-maxbounds
maxBounds: bounds,
maxZoom: 16,
minZoom: 5
});
// zoom the map to that bounding box
map.fitBounds(bounds);
var myLayer = L.mapbox.featureLayer().addTo(map);
var geoJson = [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-80.190583, 25.767619]
},
"properties": {
"title": "BRICKELL WORLD PLAZA",
//this should let the button code know whether this is a development or a //land catagory, IT IS CASE SENSATIVE!!
"Development":true,
"Land":false,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [44, 27], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/Y7O0ugQ.jpg','<p><b>Location: Miami, Florida</b></p>More than just another development. Brickell World Plaza is a benchmark for Miami’s future.<center>Visit <a href="httphttp://www.brickellworldplaza.com/://thebartram.com/"> The Bartram</a></center>.'],
['http://i.imgur.com/wCyKfJs.jpg',' The soaring 600 Brickell office tower is unmatched in its future-smart, Eco-friendly design and services.'],
['http://i.imgur.com/kvSRm4L.jpg','The 30,000-square-foot, tree-shaded Plaza will enrich the community for generations to come..']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-82.356899, 29.633012]
},
"properties": {
"title": "THE BARTRAM",
"Development":true,
"Land":false,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [44, 27], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/P6qbN8I.jpg','<p><b>Location: Gainesville, Florida</b></p>The Bartram is an environmentally friendly, Class A luxury, resort-style apartment complex, located at 2337 SW Archer Road in Gainesville Florida. Visit <a href="http://thebartram.com/"> The Bartram</a>.'],
['http://i.imgur.com/tcroFTJ.jpg','Text Goes Here.'],
['http://i.imgur.com/yDLxcqI.jpg','Text Goes Here.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-84.650528, 34.610110]
},
"properties": {
'title': 'CARTER\'S LAKE',
"Development":true,
"Land":false,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [44, 27], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/ClKkGwJ.png','This newly planned and gated community of 350 lots opened in 2004 on Carter’s Lake in Glimer county, Georgia.'],
['http://i.imgur.com/ClKkGwJ.png','The lots range in size from one to two acres each and offer some of the most spectacular views of the lake and the mountains of North Georgia.'],
['http://i.imgur.com/ClKkGwJ.png','Foram Group was the original co-developer of this project and is currently the asset manager for all lots in phase V of the development.']
]
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-81.052371, 32.043918]
},
"properties": {
'title': 'LAUREL VIEW',
"Development":true,
"Land":false,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [44, 27], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/ClKkGwJ.png','Laurel View is located just 30 miles south of historic downtown Savannah at the Midway interchange at 1-95, at Exit 76.'],
['http://i.imgur.com/ClKkGwJ.png','The prope1ty is 5, 000 acres with more than ten miles of pristine marsh and deep water frontage on Jones Creek and Laurel View River.'],
['http://i.imgur.com/ClKkGwJ.png','Laurel View will be a complete sustainable community with marina golf, residential and commercial sites on some of the most spectacular land in the coastal south.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-81.247057, 32.115481]
},
"properties": {
'title': 'POOLER, GA',
"Development":true,
"Land":false,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [44, 27], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/ClKkGwJ.png','Over 900 acres of commercial and residential develc Parkway Interchange in Savannah Georgia.'],
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-81.146635, 32.788518]
},
"properties": {
'title': 'ESTILL FARM',
"Development":false,
"Land":true,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [44, 27], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-81.610061, 32.750461]
},
"properties": {
'title': '301 FARM',
"Development":false,
"Land":true,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [44, 27], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-85.118540, 30.927965]
},
"properties": {
'title': 'SPORTING RETREAT / BASCOM',
"Development":false,
"Land":true,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [44, 27], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-105.071058, 39.033353]
},
"properties": {
'title': 'TRIPLE J RANCH',
"Development":false,
"Land":true,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [44, 27], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.']
]
}
},{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-84.490652, 34.508737]
},
"properties": {
'title': 'TALKING ROCK CREEK',
"Development":false,
"Land":true,
"icon": {
"iconUrl": "http://i.imgur.com/9sxqWaV.png",
"iconSize": [44, 27], // size of the icon
"iconAnchor": [22, 27], // point of the icon which will correspond to marker's location
"popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
"className": "dot"
},
'images': [
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.'],
['http://i.imgur.com/ClKkGwJ.png','Text Goes Here.']
]
}
}];
// Set a custom icon on each marker based on feature properties.
myLayer.on('layeradd', function(e) {
var marker = e.layer;
var feature = marker.feature;
var images = feature.properties.images
var slideshowContent = '';
marker.setIcon(L.icon(feature.properties.icon));
for(var i = 0; i < images.length; i++) {
var img = images[i];
slideshowContent += '<div class="image' + (i === 0 ? ' active' : '') + '">' +
'<img src="' + img[0] + '" />' +
'<div class="caption">' + img[1] + '</div>' +
'</div>';
}
// Create custom popup content
var popupContent = '<div id="' + feature.properties.id + '" class="popup">' +
'<h2>' + feature.properties.title + '</h2>' +
'<div class="slideshow">' +
slideshowContent +
'</div>' +
'<div class="cycle">' +
'<a href="#" class="prev">« Previous</a>' +
'<a href="#" class="next">Next »</a>' +
'</div>'
'</div>';
// http://leafletjs.com/reference.html#popup
marker.bindPopup(popupContent,{
closeButton: false,
minWidth: 400
});
});
// Add features to the map
myLayer.setGeoJSON(geoJson)
.addTo(map);
//this defines the buttons function
$('.menu-ui a').on('click', function() {
// For each filter link, get the 'data-filter' attribute value.
var filter = $(this).data('filter');
$(this).addClass('active').siblings().removeClass('active');
myLayer.setFilter(function(f) {
// If the data-filter attribute is set to "all", return
// all (true). Otherwise, filter on markers that have
// a value set to true based on the filter name.
return (filter === 'all') ? true : f.properties[filter] === true;
});
return false;
});
//end button stuff
$('#map').on('click', '.popup .cycle a', function() {
var $slideshow = $('.slideshow'),
$newSlide;
if ($(this).hasClass('prev')) {
$newSlide = $slideshow.find('.active').prev();
if ($newSlide.index() < 0) {
$newSlide = $('.image').last();
}
} else {
$newSlide = $slideshow.find('.active').next();
if ($newSlide.index() < 0) {
$newSlide = $('.image').first();
}
}
$slideshow.find('.active').removeClass('active').hide();
$newSlide.addClass('active').show();
return false;
});
</script>
</body>
</html>