$( document ).ready(function() { // Defaults defaults = { lat: 47.218371, lng: -1.553621, zoom: 13, } // Icons var leecherIcon = L.icon({ //iconUrl: '../assets/leaflet/images/marker-blue.png', iconUrl: '../assets/leaflet/images/marker-icon.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [0, -28] }); var seederIcon = L.icon({ iconUrl: '../assets/leaflet/images/marker-icon-red.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [0, -28] }); // Create map var map = L.map('map', {scrollWheelZoom: false}).setView([defaults.lat,defaults.lng], defaults.zoom); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', maxZoom: 18 }).addTo(map); // Get JSON var GeoJsonPath = $('#map').data('json') $.getJSON(GeoJsonPath, function(data){ function buildPopupContent(feature, layer) { feature.properties.popupContent = ''; if (feature.properties.name) { feature.properties.popupContent += '

#'+feature.id+': '+feature.properties.name+'

'; } else { feature.properties.popupContent += '

#'+feature.id+'

'; } if (feature.properties.place) { feature.properties.popupContent += ''; } if (feature.properties.comment) { feature.properties.popupContent += '

'+feature.properties.comment+'

'; } layer.bindPopup(feature.properties.popupContent); } function drawSemiCircles(feature, layer) { if (feature.properties.place) { feature.properties.place.angles.map(function(angles) { // Strangely enough, we need to invert the coordinates. L.circle([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], 150, { startAngle: angles[0], stopAngle: angles[1] }).addTo(map); }); } } // Add to map var featureLayer = L.geoJson(data, { onEachFeature: function(feature, layer) { buildPopupContent(feature, layer); drawSemiCircles(feature, layer); }, pointToLayer: function(feature, latlng) { var icon; if (feature.properties.contrib_type == 'connect') { icon = leecherIcon; } else { icon = seederIcon; } return L.marker(latlng, {icon: icon}); } }).addTo(map); // Auto Zoom // Strange leaflet bug, we need to set a null timeout setTimeout(function () { map.fitBounds(featureLayer.getBounds()) }, 2); }); });