parisnakitakejser/jsbin.alAlISe.html

## jsbin.alAlISe.html
<!DOCTYPE html>
<html>
<head>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />
	  <!--[if lte IE 8]>
	    <link href='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.ie.css' rel='stylesheet' >
	  <![endif]-->
	  <style>
	    body { margin:0; padding:0; }
	    #map { position:absolute; top:0; bottom:0; width:100%; }
	  </style>
</head>
<body>

<div style="width: 400px; position:absolute; z-index: 10000; background: white; height: 100%;">

	<button onclick="test1Func();">
		frederkshavn
	</button>
	<button onclick="test2Func();">
		aalborg
	</button>
	<button onclick="test3Func();">
		thisted
	</button>
	<button onclick="test4Func();">
		helsingborg
	</button>

</div>

<div id='map'></div>


<script src='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

</body>
</html>

## jsbin.alAlISe.js
$(function(){
	$.mapbox =
	{
		mapId: 'parisnakitakejser.map-51ry8wxq',
		mapObj : null,
		mapFeatures : [],
		layerGroupObj : L.layerGroup()
	};

	$.mapbox.mapObj = L.mapbox.map('map', $.mapbox.mapId )
		.setView([56, 10], 8);
});


function test1Func()
{
	L.mapbox.markerLayer({
		// this feature is in the GeoJSON format: see geojson.org
		// for the full specification
		type: 'Feature',
		geometry: {
			type: 'Point',
				coordinates: [10.517723, 57.432231]
			},
			properties: {
				title: 'A Single Marker',
				description: 'Just one of me',
				'marker-size': 'large',
				'marker-color': '#f0a'
			}
	}).addTo( $.mapbox.mapObj );

	$.mapbox.mapObj.setView([57.432231,10.517723], 8);
}

function test2Func()
{
	L.mapbox.markerLayer({
		// this feature is in the GeoJSON format: see geojson.org
		// for the full specification
		type: 'Feature',
		geometry: {
			type: 'Point',
				coordinates: [9.98827, 57.012755]
			},
			properties: {
				title: 'A Single Marker',
				description: 'Just one of me',
				'marker-size': 'large',
				'marker-color': '#f0a'
			}
	}).addTo( $.mapbox.mapObj );

	$.mapbox.mapObj.setView([57.012755,9.98827], 8);
}

function test3Func()
{
	L.mapbox.markerLayer({
		// this feature is in the GeoJSON format: see geojson.org
		// for the full specification
		type: 'Feature',
		geometry: {
			type: 'Point',
				coordinates: [8.6665988, 56.9605942]
			},
			properties: {
				title: 'A Single Marker',
				description: 'Just one of me',
				'marker-size': 'large',
				'marker-color': '#f0a'
			}
	}).addTo( $.mapbox.mapObj );

	$.mapbox.mapObj.setView([56.9605942,8.6665988], 8);
}

function test4Func()
{
	$.mapbox.layerGroupObj.clearLayers();
	$.mapbox.mapFeatures = [];

	$.mapbox.mapFeatures.push({
		"type": "Feature",
		"geometry":
		{
			"type": "Point",
			"coordinates": [12.3977895, 55.9792441]
		},
		"properties":
		{
      title: "Coors Field",
      description: "Baseball Stadium",

		}
	});

	var popupContent =  ''+
									'<a class="popup" href="/reparator/a">s</a>'+
									'<div class=""></div>'+
									'[star] | more info'+
									'';

								$.mapbox.layerGroupObj
								.addLayer(
									new L.mapbox.markerLayer(
									{
										"type": "Feature",
										"geometry":
										{
											"type": "Point",
											"coordinates": [12.3977895, 55.9792441]
										},
										"properties":
										{
											"id" : 'test',
											"marker-size" : "medium",
										}
									} ).bindPopup( popupContent ,{
										closeButton: false,
										minWidth: 250
									} )
								);

						 	 $.mapbox.layerGroupObj.addTo( $.mapbox.mapObj );

	$.mapbox.mapObj.setView([55.9792441,12.3977895], 8);
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />
	<!--[if lte IE 8]>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.ie.css' rel='stylesheet' >
	<![endif]-->
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>

	<div style="width: 400px; position:absolute; z-index: 10000; background: white; height: 100%;">

	<button onclick="test1Func();">
	frederkshavn
	</button>
	<button onclick="test2Func();">
	aalborg
	</button>
	<button onclick="test3Func();">
	thisted
	</button>
	<button onclick="test4Func();">
	helsingborg
	</button>

	</div>

	<div id='map'></div>


	<script src='http://api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

	</body>
	</html>
	$(function(){
	$.mapbox =
	{
	mapId: 'parisnakitakejser.map-51ry8wxq',
	mapObj : null,
	mapFeatures : [],
	layerGroupObj : L.layerGroup()
	};

	$.mapbox.mapObj = L.mapbox.map('map', $.mapbox.mapId )
	.setView([56, 10], 8);
	});


	function test1Func()
	{
	L.mapbox.markerLayer({
	// this feature is in the GeoJSON format: see geojson.org
	// for the full specification
	type: 'Feature',
	geometry: {
	type: 'Point',
	coordinates: [10.517723, 57.432231]
	},
	properties: {
	title: 'A Single Marker',
	description: 'Just one of me',
	'marker-size': 'large',
	'marker-color': '#f0a'
	}
	}).addTo( $.mapbox.mapObj );

	$.mapbox.mapObj.setView([57.432231,10.517723], 8);
	}

	function test2Func()
	{
	L.mapbox.markerLayer({
	// this feature is in the GeoJSON format: see geojson.org
	// for the full specification
	type: 'Feature',
	geometry: {
	type: 'Point',
	coordinates: [9.98827, 57.012755]
	},
	properties: {
	title: 'A Single Marker',
	description: 'Just one of me',
	'marker-size': 'large',
	'marker-color': '#f0a'
	}
	}).addTo( $.mapbox.mapObj );

	$.mapbox.mapObj.setView([57.012755,9.98827], 8);
	}

	function test3Func()
	{
	L.mapbox.markerLayer({
	// this feature is in the GeoJSON format: see geojson.org
	// for the full specification
	type: 'Feature',
	geometry: {
	type: 'Point',
	coordinates: [8.6665988, 56.9605942]
	},
	properties: {
	title: 'A Single Marker',
	description: 'Just one of me',
	'marker-size': 'large',
	'marker-color': '#f0a'
	}
	}).addTo( $.mapbox.mapObj );

	$.mapbox.mapObj.setView([56.9605942,8.6665988], 8);
	}

	function test4Func()
	{
	$.mapbox.layerGroupObj.clearLayers();
	$.mapbox.mapFeatures = [];

	$.mapbox.mapFeatures.push({
	"type": "Feature",
	"geometry":
	{
	"type": "Point",
	"coordinates": [12.3977895, 55.9792441]
	},
	"properties":
	{
	title: "Coors Field",
	description: "Baseball Stadium",

	}
	});

	var popupContent = ''+
	'<a class="popup" href="/reparator/a">s</a>'+
	'<div class=""></div>'+
	'[star] \| more info'+
	'';

	$.mapbox.layerGroupObj
	.addLayer(
	new L.mapbox.markerLayer(
	{
	"type": "Feature",
	"geometry":
	{
	"type": "Point",
	"coordinates": [12.3977895, 55.9792441]
	},
	"properties":
	{
	"id" : 'test',
	"marker-size" : "medium",
	}
	} ).bindPopup( popupContent ,{
	closeButton: false,
	minWidth: 250
	} )
	);

	$.mapbox.layerGroupObj.addTo( $.mapbox.mapObj );

	$.mapbox.mapObj.setView([55.9792441,12.3977895], 8);
	}