popup implementation

README.md

@@ -17,9 +17,7 @@ Please send your pull requests to [mourner](http://github.com/mourner) - we'll b
   
  Overlays:
  
- - markers
  - vectors (polyline, polygon, circle)
- - popup window (with smart autosizing)
  - KML, GeoRSS, GeoJSON layers
  
 Controls:
@@ -32,4 +30,5 @@ Controls:
 Visual appearance:
 
  - zooming animation
- - show scaled background until tiles are loaded
+ - show scaled background until tiles are loaded
+ - popup autopan

debug/include.js

@@ -27,6 +27,8 @@
 		'layer/TileLayer.js',
 		'layer/ImageOverlay.js',
 		'layer/Marker.js',
+		'layer/Popup.js',
+		'layer/Marker.Popup.js',
 		
 		'handler/Handler.js',
 		'handler/MapDrag.js',
@@ -36,7 +38,8 @@
 		
 		'map/Map.js',
 		'map/Map.Geolocation.js',
-		'map/Map.Animation.js'
+		'map/Map.Animation.js',
+		'map/Map.Popup.js'
 	];
 	
 	for (var i = 0; i < scripts.length; i++) {

debug/map-mobile.html

@@ -29,9 +29,10 @@
 	
 		var map = new L.Map('map').addLayer(cloudmade).setView(latlng, 15).locate();
 		
-		var marker = new L.Marker(latlng).on('click', function() { alert("Hi!"); });
+		var marker = new L.Marker(latlng);
 		map.addLayer(marker);
 		
+		marker.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>");
 	</script>
 </body>
 </html>

debug/map.html

@@ -18,9 +18,10 @@
 	
 		var map = new L.Map('map').addLayer(cloudmade).setView(latlng, 15);
 		
-		var marker = new L.Marker(latlng).on('click', function() { alert("Hi!"); });
+		var marker = new L.Marker(latlng);
 		map.addLayer(marker);
 		
+		marker.bindPopup("<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>");
 	</script>
 </body>
 </html>

dist/leaflet.css

@@ -25,9 +25,47 @@
 .leaflet-clickable {
 	cursor: pointer;
 	}
+	
+.leaflet-popup {
+	position: absolute;
+	}
 
 /* visual appearance */
 
 .leaflet-container {
 	background: #ddd;
+	}
+.leaflet-popup {
+	text-align: center;
+	}
+.leaflet-popup-content {
+	background: white;
+	padding: 0 15px;
+	text-align: left;
+	}
+.leaflet-popup-tip-container {
+	margin: 0 auto;
+	width: 26px;
+	height: 15px;
+	position: relative;
+	margin-top: -1px;
+	overflow: hidden;
+	}
+.leaflet-popup-tip {
+	width: 15px;
+	height: 15px;
+	
+	-moz-transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);
+	-moz-transform-origin: 0 0;
+	-webkit-transform-origin: 0 0;
+	
+	background: white;
+	margin-top: -12px;
+	margin-left: 12px;
+	}
+.leaflet-popup-content, .leaflet-popup-tip {
+	border: 1px solid white;
+	 -moz-box-shadow: 0px 0px 8px #777;
+	 -webkit-box-shadow: 0px 0px 8px #777;
 	}

src/dom/Draggable.js

@@ -41,6 +41,8 @@ L.Draggable = L.Class.extend({
 		this._startX = e.clientX;
 		this._startY = e.clientY;
 		
+		this._moved = false;
+
 		this._disableTextSelection();
 		
 		this._setMovingCursor();
@@ -84,7 +86,6 @@ L.Draggable = L.Class.extend({
 		
 		if (this._moved) {
 			this.fire('dragend');
-			this._moved = false;
 		}
 	},
 	

src/dom/Icon.js

@@ -6,6 +6,7 @@ L.Icon = L.Class.extend({
 	//shadowSize: new L.Point(42, 37),
 	
 	iconAnchor: new L.Point(12, 37),
+	popupAnchor: new L.Point(0, -29),
 	
 	initialize: function(iconUrl) {
 		if (iconUrl) {

src/handler/MapDrag.js

@@ -29,6 +29,10 @@ L.Handler.MapDrag = L.Handler.extend({
 		this._enabled = false;
 	},
 	
+	moved: function() {
+		return this._draggable._moved;
+	},
+	
 	_onDragStart: function() {
 		this._map.fire('movestart');
 		this._map.fire('dragstart');

src/layer/Marker.Popup.js

@@ -0,0 +1,12 @@
+
+L.Marker.include({
+	bindPopup: function(content) {
+		this._popupContent = content;
+		this.on('click', this._onMarkerClick, this);
+	},
+	
+	_onMarkerClick: function() {
+		this._map.closePopup();
+		this._map.openPopup(this._latlng, this._popupContent, this.options.icon.popupAnchor);
+	}
+});

src/layer/Popup.js

@@ -0,0 +1,83 @@
+
+L.Popup = L.Class.extend({
+	includes: L.Mixin.Events,
+	
+	options: {
+		maxWidth: 300,
+		closeOnClick: true
+	},
+	
+	initialize: function() {
+	},
+	
+	onAdd: function(map) {
+		this._map = map;
+		
+		if (!this._container) {
+			this._initLayout();
+		}
+		this._contentNode.innerHTML = this._content;
+		
+		map._panes.popupPane.appendChild(this._container);
+		
+		map.on('viewreset', this._updatePosition, this);
+		
+		if (this.options.closeOnClick) {
+			map.on('click', map.closePopup, map);
+		}
+		
+		this._updateLayout();
+		this._updatePosition();
+	},
+	
+	onRemove: function(map) {
+		map._panes.popupPane.removeChild(this._container);
+		map.off('viewreset', this._updatePosition, this);
+	},
+	
+	setData: function(latlng, content, offset) {
+		this._latlng = latlng; 
+		this._content = content;
+		this._offset = offset;
+	},
+	
+	_initLayout: function() {
+		this._container = document.createElement('div');
+		this._container.className = 'leaflet-popup';
+		L.DomEvent.addListener(this._container, 'click', L.DomEvent.stopPropagation);
+		L.DomEvent.addListener(this._container, 'mousedown', L.DomEvent.stopPropagation);
+		
+		this._contentNode = document.createElement('div');
+		this._contentNode.className = 'leaflet-popup-content';
+		
+		this._tipContainer = document.createElement('div');
+		this._tipContainer.className = 'leaflet-popup-tip-container';
+		
+		this._tip = document.createElement('div');
+		this._tip.className = 'leaflet-popup-tip';
+		
+		this._tipContainer.appendChild(this._tip);
+		
+		this._container.appendChild(this._contentNode);
+		this._container.appendChild(this._tipContainer);
+	},
+	
+	_updateLayout: function() {
+		this._container.style.width = '';
+		this._container.style.whiteSpace = 'nowrap';
+
+		var width = this._container.offsetWidth;
+		
+		this._container.style.width = (width > this.options.maxWidth ? this.options.maxWidth : width) + 'px';
+		this._container.style.whiteSpace = '';
+		
+		this._containerWidth = this._container.offsetWidth;
+	},
+	
+	_updatePosition: function() {
+		var pos = this._map.latLngToLayerPoint(this._latlng);
+		
+		this._container.style.bottom = (-pos.y - this._offset.y) + 'px';
+		this._container.style.left = (pos.x - this._containerWidth/2 + this._offset.x) + 'px';
+	}
+});

src/map/Map.Popup.js

@@ -0,0 +1,19 @@
+
+L.Map.include({
+	openPopup: function(latlng, content, offset) {
+		if (!this._popup) {
+			this._popup = new L.Popup();
+		} else {
+			this.removeLayer(this._popup);
+		}
+		this._popup.setData(latlng, content, offset);
+		
+		this.addLayer(this._popup);
+	},
+	
+	closePopup: function() {
+		if (this._popup) {
+			this.removeLayer(this._popup);
+		}
+	}
+});

src/map/Map.js

@@ -252,6 +252,7 @@ L.Map = L.Class.extend({
 		this._panes.shadowPane = this._createPane('leaflet-shadow-pane');
 		this._panes.overlayPane = this._createPane('leaflet-overlay-pane');
 		this._panes.markerPane = this._createPane('leaflet-marker-pane');
+		this._panes.popupPane = this._createPane('leaflet-popup-pane');
 	},
 	
 	_createPane: function(className) {
@@ -303,7 +304,7 @@ L.Map = L.Class.extend({
 	},
 	
 	_onMouseClick: function(e) {
-		if (this.dragging && this.dragging._moved) { return; }
+		if (this.dragging && this.dragging.moved()) { return; }
 		this._fireMouseEvent(e);
 	},