Angular: MapBox

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.8/mapbox.css">
<!-- ==== LIBRARIES === -->
<!-- jquery 2.1.4-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- angular 1.4.0 -->
<script src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
<!-- react 0.13.3 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
<!-- MapBox -->
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.8/mapbox.js'></script>
<!-- Bootstrap -->
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<!-- ng-React is hard-coded below, at the bottom -->



<div style="position:absolute; top:0; bottom:0; width:100%; overflow: hidden;">  
    
   <!-- MAPBOX DIRECTIVE -->     
   <mapbox-element id="map"></mapbox-element>  

    <!-- LEFT PANEL --> 
   <div>
    <div style="position:fixed; left:0px; 
                height:300px; width:160px;" 
	     class="panel panel-primary slideRight">
	               
		<div class="panel-body"  
			 style="padding:0px;
                    overflow-y: scroll; height:100%; 
                    -webkit-overflow-scrolling:touch;">
			 				 		 
		   <div>		
             <!-- REACT ELEMENT --> 
			 <poi-list list="m_list"/>
           </div>

		</div>
    </div>
  </div>    
</div>    


<!-- ng-React -->	 
<script>
(function(n,t){"undefined"!=typeof module&&module.exports?module.exports=t(require("react"),require("angular")):"function"==typeof define&&define.amd?define(["react","angular"],function(e,angular){return n.ngReact=t(e,angular)}):n.ngReact=t(n.React,n.angular)})(this,function(React,angular){"use strict";function n(n,t){if(angular.isFunction(n))return n;if(!n)throw Error("ReactComponent name attribute must be specified");var e;try{e=t.get(n)}catch(r){}if(!e)try{e=n.split(".").reduce(function(n,t){return...

JavaScript

var myApp = angular.module('myApp',['react']);


/*==== REACT ELEMENT =======*/
myApp.value( "PoiList", React.createClass( {

  propTypes : 
    { list: React.PropTypes.object.isRequired },

  render: function() 
   { 
    var pois = this.props.list.map( function( poi, index ) 
    	{
	     // prepare style of the button
     	 var btnStyle = {
			  height:'100%',
			  width: '100%',
			  textAlign: 'left'
			};
	     
		 var title = poi.feature.properties.title;
         return React.DOM.button( 
               {className: 'btn btn-default',
	            style: btnStyle
	            }, title
                                 ); 
        } );
       
    return React.DOM.div(null, pois);
    }
    
         
}))

.directive( 'poiList', function( reactDirective ) {
  return reactDirective( 'PoiList' );
} )

/*==== MAPBOX ELEMENT DIRECTIVE =======*/
myApp.directive('mapboxElement', function() {
  return {
	scope: { id: '@id' },
    replace:true,
    controller : ['$rootScope', function($rootScope) 
                  {
                   $rootScope.temp_list = []; // where to push the markers one by one      
                   $rootScope.m_list = [];  // the $watched array
                      
                   this.pushMarker = function(marker)
					 { $rootScope.temp_list.push(marker); }
                   
                   this.loadMarkers = function(map)
                     { map.featureLayer.setGeoJSON(
                   		[{"_id":"503414efe4b0ea245a52811e","type":"Feature","geometry":{"type":"Point","coordinates":[13.917041483356256,42.83941366347779]},"properties":{"title":"gelateria edelweiss","id":"503414efe4b0ea245a52811e","marker-color":"#FF7519","marker-size":"small","marker-symbol":"restaurant"}},
                       {"_id":"4e423e6145dd4a1e043807a2","type":"Feature","geometry":{"type":"Point","coordinates":[13.913824116566088,42.83934627204573]},"properties":{"title":"Hotel Villa...