emoran/MapBox_Visualforce Sample

## MapBox_Visualforce Sample
<apex:page standardController="Inventario_de_Guardias__c" extensions="CM_GSM_Guard_Location">
<head>

<title>Single marker</title>
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

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


<script>
    var map = L.mapbox.map('map', 'examples.map-20v6611k')
    .setView([19.4284700,  -99.1276600],7);


    map.featureLayer.on('ready', function(e) {
      var line = [];

      this.eachLayer(function(marker) {
        line.push(marker.getLatLng());
      });

      var polyline_options = {
        color: '#000'
      };

      var polyline = L.polyline(line, polyline_options).addTo(map);
    });

    var myLayer = L.mapbox.featureLayer().addTo(map);

    var geojson = {
    type: 'FeatureCollection',
    features: [

      <apex:repeat value="{!locations}" var="location">
      {
          type: 'Feature',
          properties: {
              title: '{!location.Fecha_Hora__c}',
              'marker-color': '#f86767',
              'marker-size': 'large',
              'marker-symbol': 'star',
              url: 'http://en.wikipedia.org/wiki/Washington,_D.C.'
          },
          geometry: {
              type: 'Point',
              coordinates: [{!location.Location__Longitude__s},{!location.Location__Latitude__s}]
          }
      },
      </apex:repeat>

    ]
};
myLayer.setGeoJSON(geojson);

</script>

</body>

</apex:page>
	<apex:page standardController="Inventario_de_Guardias__c" extensions="CM_GSM_Guard_Location">
	<head>

	<title>Single marker</title>
	<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>

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


	<script>
	var map = L.mapbox.map('map', 'examples.map-20v6611k')
	.setView([19.4284700, -99.1276600],7);



	map.featureLayer.on('ready', function(e) {
	var line = [];

	this.eachLayer(function(marker) {
	line.push(marker.getLatLng());
	});

	var polyline_options = {
	color: '#000'
	};

	var polyline = L.polyline(line, polyline_options).addTo(map);
	});

	var myLayer = L.mapbox.featureLayer().addTo(map);

	var geojson = {
	type: 'FeatureCollection',
	features: [

	<apex:repeat value="{!locations}" var="location">
	{
	type: 'Feature',
	properties: {
	title: '{!location.Fecha_Hora__c}',
	'marker-color': '#f86767',
	'marker-size': 'large',
	'marker-symbol': 'star',
	url: 'http://en.wikipedia.org/wiki/Washington,_D.C.'
	},
	geometry: {
	type: 'Point',
	coordinates: [{!location.Location__Longitude__s},{!location.Location__Latitude__s}]
	}
	},
	</apex:repeat>

	]
	};
	myLayer.setGeoJSON(geojson);

	</script>

	</body>

	</apex:page>