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/[email protected]/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);
