Leaflet.label
by Kyle Pennell
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
<script src="http://leaflet.github.io/Leaflet.label/leaflet.label-src.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.label/leaflet.label.css">
<div id="map"></div>
CSS
#map {
height: 640px;
}
JavaScript
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/427d7a7244db4c62b51b1ee252996cc0/997/256/{z}/{x}/{y}.png',
cloudmade = new L.TileLayer(cloudmadeUrl, {
maxZoom: 18
}),
map = new L.Map('map', {
layers: [cloudmade],
center: new L.LatLng(17.059417, -96.721622),
zoom: 12
});
var data = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
MAP_LABEL: 'one'
},
"geometry": {
"type": "Point",
"coordinates": [
17.026609, -96.721129
]
}
}, {
"type": "Feature",
"properties": {
MAP_LABEL: 'two'
},
"geometry": {
"type": "Point",
"coordinates": [
175.2746343612671, -37.794694560984574]
}
}, {
"type": "Feature",
"properties": {
MAP_LABEL: 'three'
},
"geometry": {
"type": "Point",
"coordinates": [
175.270299911499, -37.79571192027402]
}
}]
};
var callLocatorLayer = L.geoJson(data, {
style: function (feature) {
return {
color: '#03f'
};
},
pointToLayer: function (feature, latlng) {
return L.marker(latlng).bindLabel(feature.properties.MAP_LABEL, {
noHide: true
});
},
onEachFeature: function (feature, layer) {
var myLayer = layer;
myLayer.bindPopup('<b>STATUS:</b>');
return myLayer;
}
}).addTo(map);