Test mapbox.js with: tilejson, locate control, draggable markers, custom control (Filters)

Control.Filters.css

.leaflet-control-layers {
  background-color:#fff;
  border:1px solid #999;
  border-color:rgba(0,0,0,0.4);
  border-radius:3px;
  box-shadow:none;
  }

Control.Filters.js

/*
 * L.Control.Filters is a control to allow user filter wifi points by encryption type .
 */

L.Control.Filters = L.Control.extend({
	options: {
		collapsed: true,
		position: 'topright',
		autoZIndex: true
	},

	initialize: function (baseLayers, overlays, options) {
		L.setOptions(this, options);

		this._layers = {};
		this._lastZIndex = 0;
		this._handlingClick = false;

		for (var i in baseLayers) {
			this._addLayer(baseLayers[i], i);
		}

		for (i in overlays) {
			this._addLayer(overlays[i], i, true);
		}
	},

	onAdd: function () {
		this._initLayout();
		this._update();

		return this._container;
	},

	addBaseLayer: function (layer, name) {
		this._addLayer(layer, name);
		return this._update();
	},

	addOverlay: function (layer, name) {
		this._addLayer(layer, name, true);
		return this._update();
	},

	removeLayer: function (layer) {
		layer.off('add remove', this._onLayerChange, this);

		delete this._layers[L.stamp(layer)];
		return this._update();
	},

	_initLayout: function () {
		var className = 'leaflet-control-layers',
		    container = this._container = L.DomUtil.create('div', className);

		// makes this work on IE 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);
		}

		var form = this._form = L.DomUtil.create('form', className + '-list');

		if (this.options.collapsed) {
			if (!L.Browser.android) {
				L.DomEvent.on(container, {
					mouseenter: this._expand,
					mouseleave: this._collapse
				}, this);
			}

			var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
			link.href = '#';
			link.title = 'Layers';

			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);
			}

			// work around for Firefox Android issue https://github.com/Leaflet/Leaflet/issues/2033
			L.DomEvent.on(form, 'click', function () {
				setTimeout(L.bind(this._onInputClick, this), 0);
			}, this);

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

		this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
		this._separator = L.DomUtil.create('div', className + '-separator', form);
		this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);

		container.appendChild(form);
	},

	_addLayer: function (layer, name, overlay) {
		layer.on('add remove', this._onLayerChange, this);

		var id = L.stamp(layer);

		this._layers[id] = {
			layer: layer,
			name: name,
			overlay: overlay
		};

		if (this.options.autoZIndex && layer.setZIndex) {
			this._lastZIndex++;
			layer.setZIndex(this._lastZIndex);
		}
	},

	_update: function () {
		if (!this._container) { return; }

		this._baseLayersList.innerHTML = '';
		this._overlaysList.innerHTML = '';

		var baseLayersPresent, overlaysPresent, i, obj;

		for (i in this._layers) {
			obj = this._layers[i];
			this._addItem(obj);
			overlaysPresent = overlaysPresent || obj.overlay;
			baseLayersPresent = baseLayersPresent || !obj.overlay;
		}

		this._separator.style.display = overlaysPresent && baseLayersPresent ? '' : 'none';

		return this;
	},

	_onLayerChange: function (e) {
		if (!this._handlingClick) {
			this._update();
		}

		var overlay = this._layers[L.stamp(e.target)].overlay;

		var type = overlay ?
			(e.type === 'add' ? 'overlayadd' : 'overlayremove') :
			(e.type === 'add' ? 'baselayerchange' : null);

		if (type) {
			this._map.fire(type, e.target);
		}
	},

	// IE7 bugs out if you create a radio dynamically, so you have to do it this hacky way (see http://bit.ly/PqYLBe)
	_createRadioElement: function (name, checked) {

		var radioHtml = '<input type="radio" class="leaflet-control-layers-selector" name="' +
				name + '"' + (checked ? ' checked="checked"' : '') + '/>';

		var radioFragment = document.createElement('div');
		radioFragment.innerHTML = radioHtml;

		return radioFragment.firstChild;
	},

	_addItem: function (obj) {
		var label = document.createElement('label'),
		    checked = this._map.hasLayer(obj.layer),
		    input;

		if (obj.overlay) {
			input = document.createElement('input');
			input.type = 'checkbox';
			input.className = 'leaflet-control-layers-selector';
			input.defaultChecked = checked;
		} else {
			input = this._createRadioElement('leaflet-base-layers', checked);
		}

		input.layerId = L.stamp(obj.layer);

		L.DomEvent.on(input, 'click', this._onInputClick, this);

		var name = document.createElement('span');
		name.innerHTML = ' ' + obj.name;

		label.appendChild(input);
		label.appendChild(name);

		var container = obj.overlay ? this._overlaysList : this._baseLayersList;
		container.appendChild(label);

		return label;
	},

	_onInputClick: function () {
		var inputs = this._form.getElementsByTagName('input'),
		    input, layer, hasLayer;

		this._handlingClick = true;

		for (var i = 0, len = inputs.length; i < len; i++) {
			input = inputs[i];
			layer = this._layers[input.layerId].layer;
			hasLayer = this._map.hasLayer(layer);

			if (input.checked && !hasLayer) {
				this._map.addLayer(layer);

			} else if (!input.checked && hasLayer) {
				this._map.removeLayer(layer);
			}
		}

		this._handlingClick = false;

		this._refocusOnMap();
	},

	_expand: function () {
		L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
	},

	_collapse: function () {
		L.DomUtil.removeClass(this._container, 'leaflet-control-layers-expanded');
	}
});

L.control.filters = function (baseLayers, overlays, options) {
	return new L.Control.Layers(baseLayers, overlays, options);
};

geocoder.json

{"geocoder":"http://a.tiles.mapbox.com/v3/examples.map-vyofok3q/geocode/{query}.jsonp"
}

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A Simple Map</title>

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />

<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />

<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.24.0/L.Control.Locate.css' rel='stylesheet' />
<!--[if lt IE 9]>
  <link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.21.0/L.Control.Locate.ie.css' rel='stylesheet' />
<![endif]-->

<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.2/Leaflet.fullscreen.min.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.2/leaflet.fullscreen.css' rel='stylesheet' />

<script src='./Control.Filters.js'></script>


<style>
  /* main map */
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
  /* locate control */  
  .leaflet-control-locate {
        border: 1px solid rgba(0,0,0,0.4);
   }
   .leaflet-control-locate a {
        background-color: #fff;
        background-position: -3px, -2px;
    }
   .leaflet-control-locate.active a {
        background-position: -33px -2px;
    }  
   .leaflet-draw-marker-icon-edit {
	border: 38px solid rgba(244,244,0,.5);
	border-radius: 76px;
	width: 100px !important;
	height: 100px !important;
	position: relative;
	left: -38px;
	top: -38px;
    }    
</style>
</head>
<body>
<div id='map'></div>
<script>
  var osmLayer = L.mapbox.tileLayer('./osm.json');
  var osmapaLayer = L.mapbox.tileLayer('./osmapa.json');  
  var mapquestLayer = L.mapbox.tileLayer('./mapquest.json');   
  
  var baseLayers = {
	"OSM Mapnik": osmLayer,
	"OSMapa": osmapaLayer,
	"MapQuest": mapquestLayer
  };  
  
  var map = L.mapbox.map('map');
    map.addLayer(osmLayer);
    map.addLayer(osmapaLayer);    
    map.setView([40, -74.50], 9);
    L.control.locate().addTo(map);
    L.control.fullscreen().addTo(map);    
    L.control.layers(baseLayers).addTo(map);    
    L.control.filters(baseLayers).addTo(map);      
  
/*  
  var MyIcon = L.Icon.extend({options: 
                                       { iconUrl:'http://www.osmhydrant.org/assets/img/target.png',
                                         iconSize:[24,24],
                                         iconAnchor:[12,12],
                                         popupAnchor:[0,-20],
                                         shadowUrl:null}
                             });    
  
  var drawMarkerControl = L.control.drawMarker({icon:new MyIcon()});  
  
  map.addControl(drawMarkerControl);
*/  
  
  var marker = L.marker(new L.LatLng(37.9, -77), {
//                icon: L.mapbox.marker.icon({'marker-color': 'CC0033'}),
		icon: L.icon({
		    iconUrl: 'http://www.osmhydrant.org/assets/img/target.png',
		    iconSize: [24, 24],
		    iconAnchor:[12,12],
                    popupAnchor:[0,-20],
                    shadowUrl:null
		  }),                
                draggable: true 
            });
//    L.DomUtil.addClass(marker._icon,'leaflet-draw-marker-icon-edit');        

    marker.bindPopup('Simple popup without html');
    marker.addTo(map);  
    
    map.addControl(L.mapbox.geocoderControl('./geocoder.json'));   // na razie tylko kontrolka 
  
</script>
</body>
</html>

mapquest.json

{   "tilejson": "2.0.0",
    "autoscale":true,
    "name": "MapQuest",
    "description": "A free editable map of the whole world.",
    "version": "1.0.0",
    "attribution": "Tiles: <a href='http://www.mapquest.com/' target='_blank'>MapQuest</a> <a class='mapbox-improve-map' href='http://www.openstreetmap.org/' target='_blank'>&copy; OpenStreetMap</a>",
    "scheme": "xyz",
    "tiles": [
        "http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png",
        "http://otile2.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png",
        "http://otile3.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png"
    ],
    "minzoom": 0,
    "maxzoom": 18,
    "bounds": [ -180, -85, 180, 85 ],
    "center":[0,0,3]
}

osm.json

{   "tilejson": "2.0.0",
    "autoscale":true,
    "name": "OpenStreetMap",
    "description": "A free editable map of the whole world.",
    "version": "1.0.0",
    "attribution": "(c) OpenStreetMap contributors, CC-BY-SA",
    "scheme": "xyz",
    "tiles": [
        "http://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
        "http://b.tile.openstreetmap.org/{z}/{x}/{y}.png",
        "http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
    ],
    "minzoom": 0,
    "maxzoom": 18,
    "bounds": [ -180, -85, 180, 85 ],
    "center":[0,0,3]
}

osmapa.json

{"attribution":"<a href='https://www.osmapa.pl' target='_blank'>&copy; OSMapa.pl</a> <a class='mapbox-improve-map' href='http://www.openstreetmap.org/' target='_blank'>&copy; OpenStreetMap</a>",
 "autoscale":true,
 "bounds":[-180,-85,180,85],
 "center":[0,0,3],
 "description":"",
 "id":"osmapa",
 "maxzoom":19,
 "minzoom":0,
 "name":"OSMapa.pl",
 "scheme":"xyz",
 "tilejson":"2.0.0",
 "tiles":["http://a.osm.trail.pl/osmapa.pl/{z}/{x}/{y}.png"],
 "webpage":"http://osmapa.pl"}