Reputation: 2699
I am making a game for a Bible camp, and am wanting to use Leaflet.js for the map. I am creating a style using Mapbox. I imported the coordinates of Rome and Jerusalem into Mapbox via a csv upload, and they render just fine in the preview. However, they do not show on when loaded via Leaflet. See code below:
<head>
<title>Race to Rome</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
</head>
<body>
<div id="mapid" style="height:500px;"></div>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<h1>Race to Rome</h1>
</body>
<script>
var mymap = L.map('mapid').setView(L.latLng(34,30), 5);
L.tileLayer('https://api.mapbox.com/styles/v1/wheelerj/cioerd0vf001yacm7rff4tj5h/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoid2hlZWxlcmoiLCJhIjoiY2lvZXJheTZrMDByNXVsbTNpZXp0c2VnbCJ9.T_jRdbo0CKUgZ2aiuA3kKA', {
maxZoom: 18,
attribution:
'Imagery ©<a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
</script>
What do I need to do in order to include these labels in Leaflet?
Upvotes: 2
Views: 280
Reputation: 2991
You will probably want to look into using Mapbox.js (which is an Leaflet fork enhanced for their users), and using their pre-built features for handing feature layers like this. See example below.
https://www.mapbox.com/mapbox.js/example/v1.0.0/show-marker-as-label/
L.mapbox.featureLayer('MY_FEATURE_LABEL_SET')
.on('ready', function(e) {
gj.addData(this.getGeoJSON());
});
Upvotes: 1