Here’s a little map of my favorite two tourist spots I hit up on my recent trip (April 2014) to Washington DC. The two places highlighted are the National Botanical Garden and the Thomas Jefferson Building Library of Congress.
I wanted to get multiple popups being open at the same time to work with the typical map loading method but failed. Maybe I have to use stuff like that as is if I do the L.mapbox.map thing???
Oh well if you have a day free in DC and haven’t checked out these two free destinations I highly recommend them.
Plus if you know how to make the mapbox.js api to work with multiple popups as I confusedly described above let me know.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A DC Tourist Map</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="points" type="application/json" href="./map.geojson">
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
function initialize() {
$.getJSON($('link[rel="points"]').attr("href"), function(data) {
L.Map = L.Map.extend({
openPopup: function(popup) {
// this.closePopup(); // just comment this
this._popup = popup;
return this.addLayer(popup).fire('popupopen', {
popup: this._popup
});
}
});
var geojson = L.geoJson(data, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.place);
},
style:function(feature){
if(feature.properties.place === "National Botanic Garden and Conservatory"){
return {color:"red"}
}
else{
return {color:"purple"}
}
},
closeOnClick:false
});
var mytile = L.tileLayer('https://{s}.tiles.mapbox.com/v3/mpmckenna8.i60p2il1/{z}/{x}/{y}.png', {
attribution: '<a href="//www.mapbox.com/about/maps/" target="_blank">Terms & Feedback</a>'
});
var map = L.map('map').addLayer(mytile)
.setView([38.889, -77.0170], 15);
geojson.addTo(map);
});
}
initialize();
</script>
</body>
</html>
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"place": "National Botanic Garden and Conservatory"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-77.01222896575928,
38.888727996589154
],
[
-77.01219141483305,
38.887600606902474
],
[
-77.01346278190613,
38.88762983574991
],
[
-77.01378464698792,
38.887596431351874
],
[
-77.0139080286026,
38.88800145861872
],
[
-77.0139616727829,
38.88849416908772
],
[
-77.01263129711151,
38.88888666481246
],
[
-77.01254546642303,
38.88876975141911
],
[
-77.01244354248047,
38.88873634755711
],
[
-77.01233625411987,
38.888719645620206
],
[
-77.01222896575928,
38.888727996589154
]
]
]
}
},
{
"type": "Feature",
"properties": {
"place": "Jefferson Library of Congress"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-77.00406163930893,
38.88935014101414
],
[
-77.00536519289017,
38.889341790118344
],
[
-77.00536251068114,
38.88895556011488
],
[
-77.00556367635726,
38.88894512143699
],
[
-77.00554758310318,
38.888431536590566
],
[
-77.00538396835327,
38.88843362434137
],
[
-77.00538128614426,
38.888210234658395
],
[
-77.00537323951721,
38.888028599538565
],
[
-77.00506210327148,
38.88803277506378
],
[
-77.00492262840271,
38.88803486282628
],
[
-77.00434058904648,
38.88803486282628
],
[
-77.00411796569824,
38.888036950588756
],
[
-77.0041286945343,
38.8881935325978
],
[
-77.00413137674332,
38.88845241409576
],
[
-77.00401067733765,
38.88845867734612
],
[
-77.00401067733765,
38.88854427504568
],
[
-77.00385510921478,
38.88854636279315
],
[
-77.00385242700575,
38.888803155265414
],
[
-77.00405091047287,
38.8888052430053
],
[
-77.00405895709991,
38.88892215634025
],
[
-77.0040562748909,
38.88901192894896
],
[
-77.00405895709991,
38.889151806973665
],
[
-77.00406163930893,
38.88935014101414
]
]
]
}
}
]
}