Skip to content

Commit

Permalink
basic behavior
Browse files Browse the repository at this point in the history
  • Loading branch information
@stefanocudini
stefanocudini committed Jan 8, 2014
1 parent 11671f6 commit a502c62
Show file tree
Hide file tree
Showing 12 changed files with 519 additions and 120 deletions.
7 changes: 6 additions & 1 deletion Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,9 +102,14 @@ grunt.initConfig({
TODO: ['src/*.js'],
},
watch: {
images: {
options: { livereload: true },
files: ['images/*.svg'],
tasks: ['svg2png']
},
dist: {
options: { livereload: true },
files: ['src/*'],
files: ['src/*','examples/*.html'],
tasks: ['clean','concat','cssmin','jshint']
}
}
Expand Down
3 changes: 3 additions & 0 deletions TODO
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
Tasks found in: src/leaflet-list-markers.js
[Line: 67] [low] //TODO use related marker icon!
[Line: 129] [low] // TODO keyboard accessibility
2 changes: 1 addition & 1 deletion dist/leaflet-list-markers.min.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,4 @@
*
*/

.leaflet-container .leaflet-list-markers{position:relative;float:left;background:#fff;color:#1978cf;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background-color:rgba(255,255,255,.8);z-index:1000;box-shadow:0 1px 7px rgba(0,0,0,.65);margin-left:10px;margin-top:10px}.leaflet-list-markers .list-button{display:block;float:left;width:26px;height:26px;background:url(../images/list-icon.png) no-repeat 2px 2px;border-radius:4px}.leaflet-list-markers .list-button.active:hover,.leaflet-list-markers .list-button:hover{background:url(../images/list-icon.png) no-repeat 2px -24px #fff}.leaflet-list-markers .list-button.active{background:url(../images/list-icon.png) no-repeat 2px -50px #fff}
.leaflet-container .list-markers{position:relative;float:left;color:#1978cf;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background-color:rgba(255,255,255,.4);z-index:1000;box-shadow:0 1px 7px rgba(0,0,0,.65);margin-left:10px;margin-top:10px;min-width:26px;min-height:26px}.leaflet-control.list-markers .list-markers-toggle{display:none}.leaflet-control.list-markers.list-markers-collapsed .list-markers-toggle{display:block}.list-markers-ul{list-style:none;padding:0;margin:0}.list-markers-li{padding:0;margin:0;clear:both;border-bottom:1px solid #666}.list-markers-li:first-child{border:0}.list-markers-li img{float:left;width:12px;height:20px;margin-right:4px}.list-markers-li b{float:right}.list-markers-li span{float:left}.list-markers-li a{display:block;float:left;line-height:20px;width:120px;overflow:hidden;margin:1px;padding:2px 4px;border-radius:4px;font-size:14px;color:#666;text-decoration:none}.list-markers-li a:hover{color:#0078A8;text-decoration:none;background-color:rgba(255,255,255,.8)}.leaflet-control.list-markers .list-markers-ul{display:block}.leaflet-control.list-markers.list-markers-collapsed .list-markers-ul{display:none}.list-markers .list-markers-toggle{display:block;float:left;width:26px;height:26px;background:url(../images/list-icon.png) no-repeat 2px 2px;border-radius:4px}.list-markers .list-markers-toggle.active:hover,.list-markers .list-markers-toggle:hover{background:url(../images/list-icon.png) no-repeat 2px -24px #fff}.list-markers .list-markers-toggle.active{background:url(../images/list-icon.png) no-repeat 2px -50px #fff}
2 changes: 1 addition & 1 deletion dist/leaflet-list-markers.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

85 changes: 68 additions & 17 deletions dist/leaflet-list-markers.src.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,45 +14,96 @@
* git@github.com:stefanocudini/leaflet-list-markers.git
*
*/
/*
* Leaflet Gps Control 1.0.0
* http://labs.easyblog.it/maps/leaflet-gps
*
* https://github.com/stefanocudini/leaflet-gps
* https://bitbucket.org/zakis_/leaflet-gps
*
* Copyright 2013, Stefano Cudini - stefano.cudini@gmail.com
* Licensed under the MIT license.
*/

.leaflet-container .leaflet-list-markers {
.leaflet-container .list-markers {
position:relative;
float:left;
background:#fff;
color:#1978cf;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
/*background-color: rgba(0, 0, 0, 0.25);*/
background-color: rgba(255, 255, 255, 0.8);
background-color: rgba(255, 255, 255, 0.4);
z-index:1000;
box-shadow: 0 1px 7px rgba(0,0,0,0.65);
margin-left:10px;
margin-top:10px;

min-width:26px;
min-height:26px;
}

.leaflet-control.list-markers .list-markers-toggle {
display: none;
}
.leaflet-control.list-markers.list-markers-collapsed .list-markers-toggle {
display: block;
}
.list-markers-ul {
/* border: 1px solid blue;*/
list-style: none;
padding: 0;
margin: 0;
}
.list-markers-li {
padding: 0;
margin: 0;
clear: both;
border-bottom: 1px solid #666;
}
.list-markers-li:first-child {
border: none;
}
.list-markers-li img {
float: left;
width: 12px;
height: 20px;
margin-right: 4px;
}
.leaflet-list-markers .list-button {
.list-markers-li b {
float: right;
}
.list-markers-li span {
float: left;
}
.list-markers-li a {
display: block;
float: left;
line-height: 20px;
width: 120px;
overflow: hidden;
margin: 1px;
padding: 2px 4px;
border-radius: 4px;
font-size: 14px;
color: #666;
text-decoration: none;
}
.list-markers-li a:hover {
color: #0078A8;
text-decoration: none;
background-color: rgba(255, 255, 255, 0.8);
}
.leaflet-control.list-markers .list-markers-ul {
display: block;
}
.leaflet-control.list-markers.list-markers-collapsed .list-markers-ul {
display: none;
}

.list-markers .list-markers-toggle {
display:block;
float:left;
width:26px;
height:26px;
background: url('../images/list-icon.png') no-repeat 2px 2px;
border-radius:4px;
}
.leaflet-list-markers .list-button:hover,
.leaflet-list-markers .list-button.active:hover {
.list-markers .list-markers-toggle:hover,
.list-markers .list-markers-toggle.active:hover {
background: url('../images/list-icon.png') no-repeat 2px -24px #fff;
}
.leaflet-list-markers .list-button.active {
.list-markers .list-markers-toggle.active {
background: url('../images/list-icon.png') no-repeat 2px -50px #fff;
}

Expand Down
131 changes: 119 additions & 12 deletions dist/leaflet-list-markers.src.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,29 +23,136 @@ L.Control.ListMarkers = L.Control.extend({

options: {
layer: false,
maxItems: 10,
collapsed: false,
label: 'title',
iconUrl: L.Icon.Default.imagePath+'/marker-icon.png',
maxZoom: 9,
position: 'topleft'
position: 'bottomleft'
},

initialize: function(options) {
L.Util.setOptions(this, options);
this._container = null;
this._list = null;
this._layer = this.options.layer || new L.LayerGroup();
},

onAdd: function (map) {

this._map = map;

var container = this._container = L.DomUtil.create('div', 'list-markers');

this._list = L.DomUtil.create('ul', 'list-markers-ul', container);

this._initToggle();

map.on('moveend', this._updateList, this);

this._updateList();

return container;
},

onAdd: function (map) {

this._map = map;

var container = L.DomUtil.create('div', 'leaflet-list-markers');

this._button = L.DomUtil.create('a', 'list-button', container);
this._button.href = '#';
onRemove: function(map) {
map.off('moveend', this._updateList, this);
this._container = null;
this._list = null;
},

_createItem: function(layer) {

var li = L.DomUtil.create('li', 'list-markers-li'),
a = L.DomUtil.create('a', '', li);

a.href = '#';
L.DomEvent
.on(this._button, 'click', L.DomEvent.stop, this);
.disableClickPropagation(a)
.on(a, 'click', L.DomEvent.stop, this)
.on(a, 'click', function(e) {
this._moveTo( layer.getLatLng() );
}, this);

//console.log('_createItem',layer.options);

if( layer.options.hasOwnProperty(this.options.label) )
{
a.innerHTML = '<img src="'+this.options.iconUrl+'" />'+
'<span>'+layer.options[this.options.label]+'</span> <b>&gt;</b>';
//TODO use related marker icon!
}
else
console.log("propertyName '"+this.options.label+"' not found in marker");

return li;
},

_updateList: function() {

var that = this,
n = 0;

this._list.innerHTML = '';
this._layer.eachLayer(function(layer) {
if(layer instanceof L.Marker)
if( that._map.getBounds().contains(layer.getLatLng()) )
if(++n < that.options.maxItems)
that._list.appendChild( that._createItem(layer) );
});
},

_initToggle: function () {

/* inspired by L.Control.Layers */

var container = this._container;

//Makes this work on IE10 Touch devices by stopping it from firing a mouseout event when the touch is released
container.setAttribute('aria-haspopup', true);

if (!L.Browser.touch) {
L.DomEvent
.disableClickPropagation(container);
//.disableScrollPropagation(container);
} else {
L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
}

return container;
},
if (this.options.collapsed)
{
this._collapse();

if (!L.Browser.android) {
L.DomEvent
.on(container, 'mouseover', this._expand, this)
.on(container, 'mouseout', this._collapse, this);
}
var link = this._button = L.DomUtil.create('a', 'list-markers-toggle', container);
link.href = '#';
link.title = 'List Markers';

if (L.Browser.touch) {
L.DomEvent
.on(link, 'click', L.DomEvent.stop)
.on(link, 'click', this._expand, this);
}
else {
L.DomEvent.on(link, 'focus', this._expand, this);
}

this._map.on('click', this._collapse, this);
// TODO keyboard accessibility
}
},

_expand: function () {
this._container.className = this._container.className.replace(' list-markers-collapsed', '');
},

_collapse: function () {
L.DomUtil.addClass(this._container, 'list-markers-collapsed');
},

_moveTo: function(latlng) {
if(this.options.maxZoom)
Expand Down
2 changes: 1 addition & 1 deletion examples/cities-italy.js
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions examples/simple.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ <h4>Simple Example: <em>Center random italy citi and show visible markers</em></
<script src="cities-italy.js"></script>
<script>

var map = new L.Map('map', {zoom: 10, center: L.latLng(cities[Math.floor(Math.random() * cities.length)].loc) }); //set center from first location
var map = new L.Map('map', {zoom: 10, minZoom:10, center: L.latLng(cities[Math.floor(Math.random() * cities.length)].loc) }); //set center from first location

map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer

Expand All @@ -31,8 +31,8 @@ <h4>Simple Example: <em>Center random italy citi and show visible markers</em></
L.marker(L.latLng(cities[i].loc), {title: cities[i].name}).addTo( markersLayer );

//TODO make example using label option with pop fields

map.addControl( new L.Control.ListMarkers({layer: markersLayer}) );
var list = new L.Control.ListMarkers({layer: markersLayer});
map.addControl( list );
//inizialize Leaflet List Markers

</script>
Expand Down
Binary file modified images/list-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit a502c62

Please sign in to comment.