D3 Examples - Polygons with multiple popups open Fav DC spots

Polygons with multiple popups open Fav DC spots

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.

xxxxxxxxxx
 
<!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="https://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="https://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'
});
​
var map = L.map('map').addLayer(mytile)
    .setView([38.889, -77.0170], 15);
  geojson.addTo(map);
});
​
​
​
}
initialize();
</script>
</body>
</html>
​
    