Leaflet Experiements

index.html

<div class="container"><div id="map" class="map">
</div>
</div>
<div class="container">
<div id="cards" class="row"></div>
</div>

Leaflet Experiements .markdown

Leaflet Experiements ('-' * 21)

A Pen by Jordan Cauley on CodePen.

License.

script.js

(function(){
  
  	var Store = new Object();
  
  	function renderMan(){
			var cards = Store.cards;
      var container = document.getElementById('cards');
      container.innerHTML = '';
      
      for(var i = 0, x = cards.length; i < x; i++){
        
        var div = document.createElement('div');
        		div.className = 'col-sm-3';
        
        var img = document.createElement('img');
        		img.className = 'img-responsive';
        		img.src = cards[i].acf.card_image;
        
        div.appendChild(img);
        
        container.appendChild(div);
      }
    }
  
  	// Init Map
  	var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
					maxZoom: 18,
					attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
				}),
				latlng = L.latLng(35.9608666,-80.0036151),
      	map = L.map('map', {center: latlng, zoom: 15, layers: [tiles]});
  
  	var markers = new L.MarkerClusterGroup({
      disableClusteringAtZoom: 18,
    	iconCreateFunction: function(cluster) {
        return new L.DivIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
    	}
		});
  
  	function markerClick(){
      console.log(this);
    }
  
  
  
  	$.getJSON("http://jordancauley.com/assets/js/sample.jsonp", function(data){
      
      var locations = new Array();
      
      for(var i = 0, x = data.length; i < x; i++){
        data[i].id = i;
				if(data[i].latitude && data[i].longitude){
          
          var site = new Object();
        
          site.building_name = data[i].building_name;
          site.latitude = data[i].latitude;
          site.longitude = data[i].longitude;
          site.display_busstop = data[i].display_busstop;
          site.display_location = data[i].display_location;
          site.id = i;
          
          if(locations.length === 0){
            locations.push(site);
          } else {
            
            for(var j = 0, x = locations.length; j < x; j++){
            	if((locations[j].latitude === data[i].latitude) && (locations[j].longitude === data[i].longitude)){
            	} else {
              	locations.push(site);
            	}
          	}
            
          }  
          
          /* var marker = L.marker([data[i].latitude,data[i].longitude], { title: i });
        	marker.data = data[i];
          marker.number = i;
        	marker.on('click', markerClick);

        	markers.addLayer(marker); */
          
        }
      }
      Store.exhibitors = data;
      Store.locations = locations;
      console.log(Store);
      
      for(var i = 0, x = locations.length; i < x; i++){
        console.log(locations[i]);
        
        var marker = L.marker([locations[i].latitude,locations[i].longitude], { title: i });
        	marker.data = data[i];
          marker.number = i;
        	marker.on('click', markerClick);

        	markers.addLayer(marker);
      }
      
      
      map.addLayer(markers);
      
      
      
    });

  

})();

style.css

html, body{
  margin: 0;
  padding: 0;
}
.map{
  height: 400px;
  width: 100%;
}
.mycluster{
  background-color: #fff;
  padding: 20px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle
}