1

I am trying to use the leaflet.label plugin and have had no success getting it to recognize .bindLabel. I am a very basic user, new to Java and Leaflet. I'm trying .bindLabel with a simple, single marker as well as a series of markers loaded from a geoJSON file. Neither works, but it does run through the code and bring up the rest of the map and markers.

I feel like I am probably referencing the script wrong... I downloaded/installed it using NPM to the following folder: C:\FFS\Dashboard\node_modules\leaflet.label\

My index.html, map.html and map.js is located in C:\FFS\Dashboard\

Here's my map.html code:

<html>
  <head>
    <title>Flood Forecast Dashboard</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--<link rel="stylesheet" href="assets/html5up/main.css" />-->

    <!-- MapBox -->
    <script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />

    <!-- Leaflet 1.0.3 -->
    <link rel="stylesheet" href="assets/leaflet/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <!-- ADD-ONS -->

    <!-- Leaflet Label -->
    <link rel="stylesheet" href="node_modules/leaflet.label/dist/leaflet.label.css" />
    <script src="node_modules/leaflet.label/dist/leaflet.label-src.js"></script>

    <script src="node_modules/leaflet.label/dist/leaflet.label.js"></script>

    <script src="node_modules/leaflet.label/src/Label.js"></script>
    <script src="node_modules/leaflet.label/src/BaseMarkerMethods.js"></script>
    <script src="node_modules/leaflet.label/src/Marker.Label.js"></script>
    <script src="node_modules/leaflet.label/src/CircleMarker.Label.js"></script>
    <script src="node_modules/leaflet.label/src/Path.Label.js"></script>
    <script src="node_modules/leaflet.label/src/Map.Label.js"></script>
    <script src="node_modules/leaflet.label/src/FeatureGroup.Label.js"></script>
    <script src="node_modules/leaflet.label/src/FeatureGroup.Label.js"></script>

    <!-- Fullscreen button -->
    <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />

    <!-- GeoJSON Files  -->

    <script src="data/json/HCFCD_Gages.JSON" type="text/javascript"></script>

    <!-- CSS --> 
    <style type="text/css">
    html, body, #map {
        height:100%;
        width:100%;
        padding:0px;
        margin:0px;
    }
    </style>

</head>
<body>

<!-- Embedding in Image: <div style="width:100%; height:100%" id="map">-->
<div id="map">

</div>

<script src='map.js' type="text/javascript"></script>

</body>
</html>

Here is my map.js text:

    var map = L.map('map').setView([29.758994, -95.3635502], 10);

    map.zoomControl.remove();

    // Basemaps

    var baseGoogleSat = L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3'],
        attribution: '© Google'
    });

    var baseGoogleStreets = L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3']
    }).addTo(map);

    <!-- NEXRAD Reflectivity from Iowa State -->
    var NEXRAD_N0Q = L.tileLayer.wms("http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0q.cgi", {
      layers: 'nexrad-n0q-900913',
      format: 'image/png',
      transparent: true,
      opacity: 0.5,
      attribution: "NEXRAD N0Q"
    }).addTo(map);

    var basemaps = {
        "2017 Google Aerial Imagery":baseGoogleSat,
        "Google Maps":baseGoogleStreets
    };

    // Layers

    //Points//

    L.circleMarker([29.758994, -95.3635502], { color: "#f00", radius: 12 }).bindLabel( "Hello World", { direction: 'left' }).addTo(map);

    var styleHCFCD_Gages = {
        radius: 4,
        fillColor: "#0ba956",
        color: "#4de595",
        weight: 1,
        opacity: 1,
        fillOpacity: 1
    };

    var layerHCFCD_Gages = L.geoJSON(jsonHCFCD_Gages, {
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, styleHCFCD_Gages);
        },
        onEachFeature: function (feature, layer) {
              layer.bindPopup('<h1>Gage ID:'+feature.properties.GageID+'</h1><p>Site: '+feature.properties.Location+'</p>');
              layer.bindLabel( "Hello World", { direction: 'left' });
        }
    }).addTo(map);

    var overlays = {
      "HCFCD Gages":layerHCFCD_Gages,
      "NEXRAD N0Q":NEXRAD_N0Q
    };

    //L.control.measure({position: 'bottomright'}).addTo(map);
    L.control.fullscreen().addTo(map);
    L.control.scale().addTo(map);
    L.control.layers(basemaps, overlays, {collapsed: false}).addTo(map);
  • 3
    Leaflet is normally already included in Mapbox.js (non GL). Leaflet.label plugin is deprecated with Leaflet version 1.0+, because it is already included. – ghybs Jun 19 '17 at 5:28
  • How would I reference / use it then? According to mapbox.com/blog/extend-your-maps-mapboxjs-plugins I would add a script/link reference in the html but that didn't work (using their example of //api.tiles.../leaflet-label.js and .css). They then refer to the leaflet label github site. Aren't the files on github the same as what I downloaded through NPM? Apologies for the probably obvious question but I am new to all of this (my background is GIS with minimal programming). – drivetosave Jun 19 '17 at 12:18
  • Answer - Yes leaflet.label plugin is deprecated but it is now called .bindTooltip, not .bindLabel. Hence why my searching ended up a dead end. leafletjs.com/reference-1.0.3.html#tooltipevent – drivetosave Jun 20 '17 at 17:48
1

Leaflet.label plugin is deprecated (no longer active) but, importantly, it is now called .bindTooltip, not .bindLabel. Hence why my searching ended up a dead end.

http://leafletjs.com/reference-1.0.3.html#tooltipevent

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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