egardner/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
#map {
  height: 800px;
}
</style>
</head>
<body>
  <div id="map">
  </div>
<script id="jsbin-javascript">
// MyMap Class
//
//
//
// Properties
// -------------------------------------------------------------------------------------------
// All new MyMap objects get these upon instantiation
function MyMap() {
  this.map       = {}; // stash a leaflet map object here once we initialize
  this.zoomLevel = 9;
  this.center    = [34.050, -118.250];
  this.tiles     = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
  this.attr      = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';

//   this.bind('init');
//   this.bind('addTiles');

//   this.bind('addMarker');

  this.init();
  this.addTiles();
//   this.addMarker([34.050, -118.250]);
}

// Methods
// -------------------------------------------------------------------------------------------
MyMap.prototype = {

  // an example of a "bind" function...
  bind: function(method) {
    var fn = this[method],
        self = this;
    this[method] = function() {
      return fn.apply(self, arguments);
    };
    return this;
  },

  addTiles: function() {
    L.tileLayer(this.tiles, {attribution: this.attr}).addTo(this.map);
  },

  addMarker: function(latlng) {
    // expect latlng to be an array
    L.marker(latlng).addTo(this.map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.');
  },

  init: function() {
    this.map = L.map('map').setView(this.center, this.zoomLevel);
  }
};

var map = new MyMap();

// This method can be called publicly:
map.addMarker([34.050, -118.250]);
</script>


<script id="jsbin-source-css" type="text/css">#map {
  height: 800px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">// MyMap Class
//
//
//
// Properties
// -------------------------------------------------------------------------------------------
// All new MyMap objects get these upon instantiation
function MyMap() {
  this.map       = {}; // stash a leaflet map object here once we initialize
  this.zoomLevel = 9;
  this.center    = [34.050, -118.250];
  this.tiles     = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
  this.attr      = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';

//   this.bind('init');
//   this.bind('addTiles');

//   this.bind('addMarker');

  this.init();
  this.addTiles();
//   this.addMarker([34.050, -118.250]);
}

// Methods
// -------------------------------------------------------------------------------------------
MyMap.prototype = {

  // an example of a "bind" function...
  bind: function(method) {
    var fn = this[method],
        self = this;
    this[method] = function() {
      return fn.apply(self, arguments);
    };
    return this;
  },

  addTiles: function() {
    L.tileLayer(this.tiles, {attribution: this.attr}).addTo(this.map);
  },

  addMarker: function(latlng) {
    // expect latlng to be an array
    L.marker(latlng).addTo(this.map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.');
  },

  init: function() {
    this.map = L.map('map').setView(this.center, this.zoomLevel);
  }
};

var map = new MyMap();

// This method can be called publicly:
map.addMarker([34.050, -118.250]);


</script></body>
</html>

## jsbin.yudenugugu.css
#map {
  height: 800px;
}

## jsbin.yudenugugu.js
// MyMap Class
//
//
//
// Properties
// -------------------------------------------------------------------------------------------
// All new MyMap objects get these upon instantiation
function MyMap() {
  this.map       = {}; // stash a leaflet map object here once we initialize
  this.zoomLevel = 9;
  this.center    = [34.050, -118.250];
  this.tiles     = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
  this.attr      = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';

//   this.bind('init');
//   this.bind('addTiles');

//   this.bind('addMarker');

  this.init();
  this.addTiles();
//   this.addMarker([34.050, -118.250]);
}

// Methods
// -------------------------------------------------------------------------------------------
MyMap.prototype = {

  // an example of a "bind" function...
  bind: function(method) {
    var fn = this[method],
        self = this;
    this[method] = function() {
      return fn.apply(self, arguments);
    };
    return this;
  },

  addTiles: function() {
    L.tileLayer(this.tiles, {attribution: this.attr}).addTo(this.map);
  },

  addMarker: function(latlng) {
    // expect latlng to be an array
    L.marker(latlng).addTo(this.map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.');
  },

  init: function() {
    this.map = L.map('map').setView(this.center, this.zoomLevel);
  }
};

var map = new MyMap();

// This method can be called publicly:
map.addMarker([34.050, -118.250]);
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	#map {
	height: 800px;
	}
	</style>
	</head>
	<body>
	<div id="map">
	</div>
	<script id="jsbin-javascript">
	// MyMap Class
	//
	//
	//
	// Properties
	// -------------------------------------------------------------------------------------------
	// All new MyMap objects get these upon instantiation
	function MyMap() {
	this.map = {}; // stash a leaflet map object here once we initialize
	this.zoomLevel = 9;
	this.center = [34.050, -118.250];
	this.tiles = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
	this.attr = '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';

	// this.bind('init');
	// this.bind('addTiles');

	// this.bind('addMarker');

	this.init();
	this.addTiles();
	// this.addMarker([34.050, -118.250]);
	}

	// Methods
	// -------------------------------------------------------------------------------------------
	MyMap.prototype = {

	// an example of a "bind" function...
	bind: function(method) {
	var fn = this[method],
	self = this;
	this[method] = function() {
	return fn.apply(self, arguments);
	};
	return this;
	},

	addTiles: function() {
	L.tileLayer(this.tiles, {attribution: this.attr}).addTo(this.map);
	},

	addMarker: function(latlng) {
	// expect latlng to be an array
	L.marker(latlng).addTo(this.map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.');
	},

	init: function() {
	this.map = L.map('map').setView(this.center, this.zoomLevel);
	}
	};

	var map = new MyMap();

	// This method can be called publicly:
	map.addMarker([34.050, -118.250]);
	</script>


	<script id="jsbin-source-css" type="text/css">#map {
	height: 800px;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">// MyMap Class
	//
	//
	//
	// Properties
	// -------------------------------------------------------------------------------------------
	// All new MyMap objects get these upon instantiation
	function MyMap() {
	this.map = {}; // stash a leaflet map object here once we initialize
	this.zoomLevel = 9;
	this.center = [34.050, -118.250];
	this.tiles = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
	this.attr = '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';

	// this.bind('init');
	// this.bind('addTiles');

	// this.bind('addMarker');

	this.init();
	this.addTiles();
	// this.addMarker([34.050, -118.250]);
	}

	// Methods
	// -------------------------------------------------------------------------------------------
	MyMap.prototype = {

	// an example of a "bind" function...
	bind: function(method) {
	var fn = this[method],
	self = this;
	this[method] = function() {
	return fn.apply(self, arguments);
	};
	return this;
	},

	addTiles: function() {
	L.tileLayer(this.tiles, {attribution: this.attr}).addTo(this.map);
	},

	addMarker: function(latlng) {
	// expect latlng to be an array
	L.marker(latlng).addTo(this.map).bindPopup('A pretty CSS3 popup.<br> Easily customizable.');
	},

	init: function() {
	this.map = L.map('map').setView(this.center, this.zoomLevel);
	}
	};

	var map = new MyMap();

	// This method can be called publicly:
	map.addMarker([34.050, -118.250]);





	</script></body>
	</html>