I'm a bit new to this, but i have created a map with an option to filter the markers, as well as tabbed tooltips.
On page load, the tabbed tooltips work, but when I click on the filter buttons and then click on the marker again, the tabs (and the content I included with the tabs) are not showing up. I have to refresh the page to get the tabs to show up again.
The orange icon is the one I was playing around with and is the only one that has tabs at the moment.
Why do the tabs not work after I click on a filter button?
My code:
L.mapbox.accessToken = 'pk.wwwwwwwwwwwwxxxxxxxxxxxxxxxxxxssssssss';
// In the propeties object for each marker define key's
// like `rentals`, `fuel`, `tackleshop` that are set to true for false
// depending on whether or they exist at a location.
var geoJson = [
{
"type": "Feature",
"geometry": {
"coordinates": [
-84.519253,39.116177
],
"type": "Point"
},
"properties": {
"title": "Findlay Market (North Lot)",
"cashaccepted": true,
"creditcardsaccepted": true,
"indoorgarage": false,
"monthlyrates": true,
"open24": true,
"outdoorlots": true,
"icon": {
"iconUrl": "http://www.wakeupcoffee.biz/images/icon_car03b.png",
"iconSize": [35, 35], // size of the icon
"iconAnchor": [0, 0], // point of the icon which will correspond to marker's location
"popupAnchor": [17,-5], // point from which the popup should open relative to the iconAnchor
"className": "dot"
}
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
-84.518411,39.114629
],
"type": "Point"
},
"properties": {
"title": "Findlay Market (East Lot)",
"cashaccepted": true,
"creditcardsaccepted": true,
"indoorgarage": false,
"monthlyrates": true,
"open24": true,
"outdoorlots": true,
"icon": {
"iconUrl": "http://www.wakeupcoffee.biz/images/icon_car03b.png",
"iconSize": [35, 35], // size of the icon
"iconAnchor": [0, 0], // point of the icon which will correspond to marker's location
"popupAnchor": [17,-5], // point from which the popup should open relative to the iconAnchor
"className": "dot"
}
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
-84.520621,39.114837
],
"type": "Point"
},
"properties": {
"title": "Findlay Market (West Lot)",
"cashaccepted": true,
"creditcardsaccepted": true,
"indoorgarage": false,
"monthlyrates": true,
"open24": true,
"outdoorlots": true,
"icon": {
"iconUrl": "http://www.wakeupcoffee.biz/images/icon_car03b.png",
"iconSize": [35, 35], // size of the icon
"iconAnchor": [0, 0], // point of the icon which will correspond to marker's location
"popupAnchor": [17,-5], // point from which the popup should open relative to the iconAnchor
"className": "dot"
}
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
-84.510765,39.110845
],
"type": "Point"
},
"properties": {
"title": "ABM Parking",
"cashaccepted": true,
"creditcardsaccepted": true,
"indoorgarage": false,
"monthlyrates": false,
"open24": true,
"outdoorlots": true,
"icon": {
"iconUrl": "http://www.wakeupcoffee.biz/images/icon_car03b.png",
"iconSize": [35, 35], // size of the icon
"iconAnchor": [0, 0], // point of the icon which will correspond to marker's location
"popupAnchor": [17,-5], // point from which the popup should open relative to the iconAnchor
"className": "dot"
}
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
-84.518343,39.109173
],
"type": "Point"
},
"properties": {
"title": "Washington Park (Elm Entrance)",
"cashaccepted": true,
"creditcardsaccepted": true,
"indoorgarage": true,
"monthlyrates": false,
"open24": true,
"outdoorlots": false,
"icon": {
"iconUrl": "http://www.wakeupcoffee.biz/images/icon_car03b.png",
"iconSize": [35, 35], // size of the icon
"iconAnchor": [0, 0], // point of the icon which will correspond to marker's location
"popupAnchor": [17,-5], // point from which the popup should open relative to the iconAnchor
"className": "dot"
}
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
-84.516762,39.109543
],
"type": "Point"
},
"properties": {
"title": "Washington Park (Race Entrance)",
"cashaccepted": true,
"creditcardsaccepted": true,
"indoorgarage": true,
"monthlyrates": false,
"open24": true,
"outdoorlots": false,
"icon": {
"iconUrl": "http://www.wakeupcoffee.biz/images/icon_car03b.png",
"iconSize": [35, 35], // size of the icon
"iconAnchor": [0, 0], // point of the icon which will correspond to marker's location
"popupAnchor": [17,-5], // point from which the popup should open relative to the iconAnchor
"className": "dot"
}
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
-84.510899,39.109465
],
"type": "Point"
},
"properties": {
"title": "OTR Parking / Neon's",
"cashaccepted": false,
"creditcardsaccepted": true,
"indoorgarage": false,
"monthlyrates": false,
"open24": false,
"outdoorlots": true,
"icon": {
"iconUrl": "http://www.wakeupcoffee.biz/images/icon_car03b.png",
"iconSize": [35, 35], // size of the icon
"iconAnchor": [0, 0], // point of the icon which will correspond to marker's location
"popupAnchor": [17,-5], // point from which the popup should open relative to the iconAnchor
"className": "dot"
}
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
-84.511513,39.108121
],
"type": "Point"
},
"properties": {
"title": "Central Parking - Maint St.",
"cashaccepted": true,
"creditcardsaccepted": true,
"indoorgarage": false,
"monthlyrates": false,
"open24": true,
"outdoorlots": true,
"icon": {
"iconUrl": "http://www.wakeupcoffee.biz/images/icon_car03b.png",
"iconSize": [35, 35], // size of the icon
"iconAnchor": [0, 0], // point of the icon which will correspond to marker's location
"popupAnchor": [17,-5], // point from which the popup should open relative to the iconAnchor
"className": "dot"
}
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
-84.518547,39.108793
],
"type": "Point"
},
"properties": {
"title": "Central Parking - Memorial Hall",
"cashaccepted": true,
"creditcardsaccepted": true,
"indoorgarage": false,
"monthlyrates": false,
"open24": true,
"outdoorlots": true,
"icon": {
"iconUrl": "http://www.wakeupcoffee.biz/images/icon_car03b.png",
"iconSize": [35, 35], // size of the icon
"iconAnchor": [0, 0], // point of the icon which will correspond to marker's location
"popupAnchor": [17,-5], // point from which the popup should open relative to the iconAnchor
"className": "dot"
}
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
-84.516638,39.107744
],
"type": "Point"
},
"properties": {
"title": "Over The Rhine Public Parking",
"cashaccepted": true,
"creditcardsaccepted": true,
"indoorgarage": false,
"monthlyrates": false,
"open24": true,
"outdoorlots": true,
"icon": {
"iconUrl": "http://www.wakeupcoffee.biz/images/icon_car03b.png",
"iconSize": [35, 35], // size of the icon
"iconAnchor": [0, 0], // point of the icon which will correspond to marker's location
"popupAnchor": [17,-5], // point from which the popup should open relative to the iconAnchor
"className": "dot"
}
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [
-84.515022,39.110240
],
"type": "Point"
},
"information": {
"Information": "<p><b>Mercer Garage</b></p> <hr> <div style='float:left; margin-top:5px;'>1324 Vine St.<br>Cincinnati, OH 45202</div> <div style='float:right; width:100px; margin-top:5px; background-color:#3d54a5; color:white; text-align: center; padding:6px 0px 6px 0px; border-radius: 4px;'> Get Directions </div> <br><br><br><hr> <div style='margin-top:5px;'><b>Phone:</b>(513)381-5800</div> ",
"Rates": "<div>$1/hour, up to an $8 maximum</div> <div>Monday – Friday after 4pm: $5</div> <div>All day Saturday – Sunday: $5<div><br><div>Monthly parking passes are available for $85/month</div>",
"Images": "<iframe src='https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sus!4v1433855519514!6m8!1m7!1sI_zlWDFRpn2L2r1DmPeRBw!2m2!1d39.110841!2d-84.510429!3f276.4279292294492!4f-11.08512964773044!5f0.4000000000000002' width='350' height='250' frameborder='0' style='border:0'></iframe>",
},
"properties": {
"title": "Mercer Garage",
"cashaccepted": true,
"creditcardsaccepted": true,
"indoorgarage": true,
"monthlyrates": false,
"open24": true,
"outdoorlots": false,
"icon": {
"iconUrl": "http://static.nationwide.com/static/icon-opt-link-car-orange.gif?r=47",
"iconSize": [35, 35], // size of the icon
"iconAnchor": [0, 0], // point of the icon which will correspond to marker's location
"popupAnchor": [17,-5], // point from which the popup should open relative to the iconAnchor
"className": "dot"
}
}
}
];
var map = L.mapbox.map('map', 'motrpub.3bbda9ac', { zoomControl: false })
.setView([39.112, -84.514], 16);
new L.Control.Zoom({ position: 'topright' }).addTo(map);
var markers = L.mapbox.featureLayer()
.setGeoJSON(geoJson)
.addTo(map);
// START CUSTOM ICON //
markers.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
marker.setIcon(L.icon(feature.properties.icon));
});
// Add features to the map.
markers.setGeoJSON(geoJson);
// END CUSTOM ICON //
var info = document.getElementById('info');
// Iterate through each feature layer item,
// and create a custom HTML group for each. In this example
// we create a tabs menu and put each property in a respective tab.
markers.eachLayer(function(m) {
// Shorten m.feature.properties to p for convenience.
var p = m.feature.information;
var tabs = document.createElement('div');
tabs.className = 'tabs-ui';
for (var key in p) {
var tab = document.createElement('div');
tab.className = 'tab';
var input = document.createElement('input');
input.type = 'radio';
input.id = idify(key);
input.name = 'tab-group'; // For your own needs, you might want this to be unique.
if (key === 'Information') input.setAttribute('checked', true);
tab.appendChild(input);
tab.innerHTML += '<label for=' + idify(key) + '>' + key + '</label>' +
'<div class="content">' +
p[key] +
'</div>';
tabs.appendChild(tab);
}
m.bindPopup(tabs, {minWidth: 400});
});
function idify(str) { return str.replace(/\s+/g, '-').toLowerCase(); };
$('.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');
markers.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;
});
Yes, I believe
setFilterruns aclearLayerson your markersfeatureLayer, which wipes out your bound popups.I moved the popup binding into a function(setBinds) which runs on init, and after everysetFilter, and now I believe it works as you intended. Take a look at https://jsfiddle.net/asrgxtpv/3/