0

I cannot figure out how to get labels on my featureLayers to show in my LeafLet map for a mapbox featureLayer using the leaflet-label plugin. I thought all i needed to do was add

.bindLabel('Look revealing label!')

Please help.

<!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>A Site Survery of Antikythera Greece</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.css' rel='stylesheet' />
    <!--labeling scripts-->
    <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-label/v0.2.1/leaflet.label.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-label/v0.2.1/leaflet.label.css' rel='stylesheet' />

<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>

</head>
<body>
<div id='map'></div>

<script>



//load the map

L.mapbox.accessToken = 'pk.eyJ1IjoibWFwcGluZ3RoaW5ncyIsImEiOiJkSy1MRlNVIn0.jt2ol5HlgFaCdx4Ajn5WjA';
var map = L.mapbox.map('map')
    .setView([35.87, 23.3], 14);

// Load all the layers in

L.marker([35.87, 23.3]).bindLabel('Look revealing label!').addTo(map);

var geologyLayer = L.mapbox.featureLayer(geologyLayer, {
    style: {
    "color": "Black",
    "weight": 3,
    "opacity": .5,
    }
})
    .loadURL('http://jwitcoski.github.io/Antikythera/data/geology.geojson')
    .bindLabel('Look revealing label!')
    .addTo(map);


//map legend

L.control.layers({
    'Mapbox Satellite': L.mapbox.tileLayer('mapbox.satellite').addTo(map),
    'Mapbox Light': L.mapbox.tileLayer('mapbox.light'),
    'Thunderforest Outdoors' : L.tileLayer('http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.thunderforest.com/">Thunderforest</a>, &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }),
    'MtbMap' : L.tileLayer('http://tile.mtbmap.cz/mtbmap_tiles/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &amp; USGS'
        }),
    'Esri_WorldImagery' : L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
        }),

    },
    {

    "Geology": geologyLayer,
}).addTo(map);
;

</script>
</body>
</html>

1 Answer 1

1

Seems like bindLabel doesn't work as expected with asynchronously loaded data with loadURL(). If you pass geojson directly, it works:

// jQuery usage just for the sake of brevity
jQuery.get('http://jwitcoski.github.io/Antikythera/data/geology.geojson').success(function(data) {
  var geologyLayer = L.mapbox.featureLayer(data, {
    style: {
      "color": "Black",
      "weight": 3,
      "opacity": .5,
    }
  })
  .bindLabel('look label')
  .addTo(map);
})

Hope this helps!

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.