mpmckenna8/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    I hacked an example into the maptimes leaflet map to have multiple popups open concurrently.  Here is a map of some Maptimes. Go to one of em and learn how to make this map better or make your own!
See: Maptime on Github
http://jsfiddle.net/paulovieira/yVLJf/

  
## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Multiple concurrent popups w/ leaflet</title>
         <script type="text/javascript" src="./maptimes4leaflet.json" ></script>
 <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
       <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
        <!--[if lte IE 8]><link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.ie.css" /><![endif]-->

        <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>
        <link type="text/css" rel="stylesheet" href="mtLeaf.css"/>

    </head>
    <body onload="initialize()">

        <div id="map" ></div>
            <p>
            Here is a map of some Maptimes. Go to one of em and learn how to make this map better or make your own!

            See: <a href="https://github.com/maptime/maptime.github.io">Maptime on Github</a>
            </p>
        <script type="text/javascript">
            function initialize() {
                //var layers = ["terrain", "watercolor","toner"];


                    var watercolor = new  L.StamenTileLayer("watercolor");
                    var terrain = new L.StamenTileLayer("terrain");
                    var toner= new  L.StamenTileLayer("toner");

                    var bases = {
                        "Watercolor":watercolor,
                        "Terrain":terrain,
                        "Toner":toner


                    }

                    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
                                                                          });
                                         }
                                         }); /***  end of hack ***/


                    var map = new L.Map('map', {
                                        center: [39,-98],
                                        zoom:4,
                                        layers:watercolor
                                        })

                    var popmaps = function(feature,layer){
                        var popUp = feature.properties.name
                        layer.bindPopup(String(popUp));
                    }

                     L.control.layers(bases).addTo(map);


                     L.geoJson(maptimes, {
                               pointToLayer:function (feature, latlng) {
                               return L.marker(latlng, {

                                                     fillColor: "#000000",
                                                     color: "green",

                                                     opacity: 1,

                                                     });
                               },
                               onEachFeature:popmaps
                               }).addTo(map);


            }

        </script>

    </body>
</html>

## maptimes4leaflet.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              maptimes4leaflet.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## mtLeaf.css
#map {
    width: 80%;
    height: 500px;
    margin: 20px auto auto auto;

    }

.header {
    margin: auto auto auto auto;
    width: 100%;
    text-align:center;
    }
p{
    margin:30px 20px auto 20px;
        }


## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<title>Multiple concurrent popups w/ leaflet</title>
	<script type="text/javascript" src="./maptimes4leaflet.json" ></script>
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<!--[if lte IE 8]><link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.ie.css" /><![endif]-->

	<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>
	<link type="text/css" rel="stylesheet" href="mtLeaf.css"/>

	</head>
	<body onload="initialize()">

	<div id="map" ></div>
	<p>
	Here is a map of some Maptimes. Go to one of em and learn how to make this map better or make your own!

	See: <a href="https://github.com/maptime/maptime.github.io">Maptime on Github</a>
	</p>
	<script type="text/javascript">
	function initialize() {
	//var layers = ["terrain", "watercolor","toner"];


	var watercolor = new L.StamenTileLayer("watercolor");
	var terrain = new L.StamenTileLayer("terrain");
	var toner= new L.StamenTileLayer("toner");

	var bases = {
	"Watercolor":watercolor,
	"Terrain":terrain,
	"Toner":toner


	}

	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
	});
	}
	}); /* end of hack */


	var map = new L.Map('map', {
	center: [39,-98],
	zoom:4,
	layers:watercolor
	})

	var popmaps = function(feature,layer){
	var popUp = feature.properties.name
	layer.bindPopup(String(popUp));
	}

	L.control.layers(bases).addTo(map);



	L.geoJson(maptimes, {
	pointToLayer:function (feature, latlng) {
	return L.marker(latlng, {

	fillColor: "#000000",
	color: "green",

	opacity: 1,

	});
	},
	onEachFeature:popmaps
	}).addTo(map);


	}

	</script>

	</body>
	</html>
	#map {
	width: 80%;
	height: 500px;
	margin: 20px auto auto auto;

	}

	.header {
	margin: auto auto auto auto;
	width: 100%;
	text-align:center;
	}
	p{
	margin:30px 20px auto 20px;
	}