diff --git a/src/leaflet.locationlist.js b/src/leaflet.locationlist.js index 182be5f..69916b7 100644 --- a/src/leaflet.locationlist.js +++ b/src/leaflet.locationlist.js @@ -4,7 +4,7 @@ L.Control.LocationList = L.Control.extend({ options: { position: 'topright', - showlist: true, + showList: true, locationsList : [ {title: 'Poland', latlng: [52.03, 19.27], zoom: 6}, {title: 'Other', latlng: [50.04, 14.28], zoom: 6}, {title: 'Other2', latlng: [50.04, 19.27], zoom: 12}], @@ -22,7 +22,7 @@ L.Control.LocationList = L.Control.extend({ this._map = map; - var className = 'leaflet-control-location-list', container; + var className = 'leaflet-control-locationlist', container; container = this._contentContainer = L.DomUtil.create('div', 'leaflet-bar'); @@ -34,23 +34,55 @@ L.Control.LocationList = L.Control.extend({ this._nextButton = this._createButton(this.options.nextText, this.options.nextTitle, className + '-arrow-next', container, this._switchNext, this); + + if (this.options.showList) { + var form = this._form = L.DomUtil.create('form', className + '-fullist'); + this._fullist = L.DomUtil.create('select', className + '-list', form); + this._fullist.style.width = '100%'; + + L.DomEvent.on(this._fullist, 'change', this._onListChange, this); + + container.appendChild(form); + this._update(); + } + return container; }, + _onListChange: function () { + + this._currentLocation_index = this._fullist.selectedIndex; -// _createList: function (list, linkClass, container, fn, context) { -// for location in list{ -// var link = L.DomUtil.create('a', linkClass,container); -// link.href = location.latlng; -// link.innerHTML = location.title; -// -// } -// -// return content -// }, - + this._map.setView(this.options.locationsList[this._currentLocation_index].latlng, this.options.locationsList[this._currentLocation_index].zoom); + this.fire('changed'); + }, + + _createListElement: function (obj,ind) { + var option = document.createElement('option'); + option.innerHTML = obj.title; + if (this._currentLocation_index == ind ) { + option.setAttribute('selected', true); + } + return option; + }, + + _update: function () { + // L.DomUtil.empty(this._fullist); add in 0.7.4 + while (this._fullist.firstChild) { + this._fullist.removeChild(this._fullist.firstChild); + }; + var i, obj; + for (i in this.options.locationsList) { + obj = this.options.locationsList[i]; + this._fullist.appendChild(this._createListElement(obj,i)); + }; + + console.log(this); + return this; + }, + _createButton: function (text, title, className, container, fn, context) { var link = L.DomUtil.create('a', className, container); @@ -73,6 +105,10 @@ L.Control.LocationList = L.Control.extend({ this._currentLocation_index = 0 ;} this._map.setView(this.options.locationsList[this._currentLocation_index].latlng, this.options.locationsList[this._currentLocation_index].zoom); + if (this.options.showList) { + this._update(); + }; + this.fire('changed'); this.fire('next'); }, _switchPrev: function (e) { @@ -82,6 +118,10 @@ L.Control.LocationList = L.Control.extend({ this._currentLocation_index = this.options.locationsList.length - 1 ;} this._map.setView(this.options.locationsList[this._currentLocation_index].latlng, this.options.locationsList[this._currentLocation_index].zoom); + if (this.options.showList) { + this._update(); + }; + this.fire('changed'); this.fire('prev'); }