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;"
     ng-controller="mainController as ctrl">  
    
   <!-- 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="json_m_list" ctrl="ctrl"/>
           </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...

JavaScript

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


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

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

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

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


.controller( 'mainController', function( $rootScope ) {
    $rootScope.json_temp_list = []; // where to push the json markers one by one
    $rootScope.josn_m_list = [];  // the $watched array
    $rootScope.obj_m_list = {};  // the map with marker objects
    
   this.highlightMarker = function(marker_id)
     {
      var marker_obj = $rootScope.obj_m_list[marker_id];
      var icon = marker_obj.feature.properties;
	      icon['marker-color'] = '#0041C2';
	      icon['marker-size'] = 'medium';
	  marker_obj.setIcon(L.mapbox.marker.icon(icon));
     }
} )

/*==== MAPBOX ELEMENT DIRECTIVE =======*/
myApp.directive('mapboxElement', function() {
  return {
	scope: { id: '@id' },
    replace:true,
    controller : ['$rootScope', function($rootScope) 
                  {   
                   this.pushMarker = function(marker)
				   { 
                    $rootScope.json_temp_list.push(marker.feature); // push the json 
                   ...