Last active
August 29, 2015 14:02
Marker menu with custom tab groups in tooltips
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset=utf-8 /> | |
<title>Marker navigation from a marker menu</title> | |
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script> | |
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' /> | |
<style> | |
body { margin:0; padding:0; } | |
#map { position:absolute; top:0; bottom:0; width:100%; } | |
</style> | |
</head> | |
<body> | |
<style> | |
.info { | |
background:#fff; | |
position:absolute; | |
width:260px; | |
top:10px; | |
right:10px; | |
border-radius:2px; | |
} | |
.info .item { | |
display:block; | |
border-bottom:1px solid #eee; | |
padding:10px; | |
text-decoration:none; | |
} | |
.info .item small { color:#888; } | |
.info .item:hover, | |
.info .item.active { background:#f8f8f8; } | |
.info .item:last-child { border-bottom:none; } | |
.leaflet-popup-content { | |
width:240px; | |
} | |
.tabs { | |
position:relative; | |
min-height:200px; | |
clear:both; | |
margin:25px 0; | |
} | |
.tab { | |
float:left; | |
} | |
.tab label { | |
background:#eee; | |
padding:10px; | |
border:1px solid #ccc; | |
margin-left:-1px; | |
position:relative; | |
left:1px; | |
top:1px; | |
cursor:pointer; | |
} | |
.tab label:hover { | |
background:#f8f8f8; | |
} | |
.tab [type=radio] { | |
display:none; | |
} | |
.content { | |
background:white; | |
position:absolute; | |
top:28px; | |
left:0; | |
right:0; | |
bottom:0; | |
padding:20px; | |
border:1px solid #ccc; | |
} | |
[type=radio]:checked ~ label { | |
background:white; | |
border-bottom:1px solid white; | |
z-index:2; | |
} | |
[type=radio]:checked ~ label ~ .content { | |
z-index:1; | |
} | |
</style> | |
<div id='map' class='map'></div> | |
<div id='info' class='info'></div> | |
<script> | |
var map = L.mapbox.map('map', 'examples.h186knp8').setView([37.9, -77], 6); | |
var myLayer = L.mapbox.featureLayer().addTo(map); | |
myLayer.setGeoJSON([{ | |
type: 'Feature', | |
geometry: { | |
type: 'Point', | |
coordinates: [-77, 37.9] | |
}, | |
properties: { | |
title: 'Marker one', | |
description: 'This marker has a description', | |
'marker-id': 'marker-1', | |
'marker-color': '#f86767' | |
} | |
}, { | |
type: 'Feature', | |
geometry: { | |
type: 'Point', | |
coordinates: [-78, 36.5] | |
}, | |
properties: { | |
title: 'Marker two', | |
description: 'So does this one!', | |
'marker-id': 'marker-2', | |
'marker-color': '#f86767' | |
} | |
}]); | |
var info = document.getElementById('info'); | |
// Iterate through each feature layer item, build a | |
// marker menu item and enable a click event that pans to + opens | |
// a marker that's associated to the marker item. | |
myLayer.eachLayer(function (marker) { | |
// here you call `bindPopup` with a string of HTML you create - the feature | |
// properties declared above are available under `layer.feature.properties` | |
var p = marker.feature.properties; | |
var content = '<div class="tabs">' + | |
'<div class="tab">' + | |
'<input type="radio" id="tab-1" name="tab-group-1" checked>' + | |
'<label for="tab-1">Tab One</label>' + | |
'<div class="content">' + | |
p.title + | |
'</div>' + | |
'</div>' + | |
'<div class="tab">' + | |
'<input type="radio" id="tab-2" name="tab-group-2">' + | |
'<label for="tab-2">Tab Two</label>' + | |
'<div class="content">' + | |
p.description + | |
'</div>' + | |
'</div>' + | |
'</div>'; | |
myLayer.bindPopup(content); | |
var link = info.appendChild(document.createElement('a')); | |
link.className = 'item'; | |
link.href = '#'; | |
// Populate content from each markers object. | |
link.innerHTML = marker.feature.properties.title + | |
'<br /><small>' + marker.feature.properties.description + '</small>'; | |
link.onclick = function () { | |
if (/active/.test(this.className)) { | |
this.className = this.className.replace(/active/, '').replace(/\s\s*$/, ''); | |
} else { | |
var siblings = info.getElementsByTagName('a'); | |
for (var i = 0; i < siblings.length; i++) { | |
siblings[i].className = siblings[i].className | |
.replace(/active/, '').replace(/\s\s*$/, ''); | |
}; | |
this.className += ' active'; | |
// When a menu item is clicked, animate the map to center | |
// its associated marker and open its popup. | |
map.panTo(marker.getLatLng()); | |
marker.openPopup(); | |
} | |
return false; | |
}; | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment