0

I'm having trouble getting a simple java script plugin to work on my script. I'm trying to get the measure tool to work. The little toolbar pops up but it doesn't do anything. When I run it I get the error... Uncaught TypeError: L.control.selectLayers is not a function. How do I fix this?

Leaflet Heat Map

<!-- Start css file links -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-beta.2/leaflet.css" />
<link rel="stylesheet" href="css/L.Control.Locate.css"/>
<link rel="stylesheet" href="css/Leaflet.Coordinates-0.1.5.css"/>
<!-- End css file links -->

<!-- Start JavaScript calls -->
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script> -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/leaflet/1.0.0-beta.2/leaflet.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/leaflet.esri/2.0.0-beta.8/esri-leaflet.js"></script>
<script type="text/javascript" src="scripts/L.Control.Locate.js"></script>
<script type="text/javascript" src="scripts/Leaflet.Coordinates-0.1.5.js"></script>
<script type="text/javascript" src="scripts/leaflet-heat.js"></script>
<script type="text/javascript" src="scripts/TileLayer.WMTS.js"></script>
<script type="text/javascript" src="scripts/L.MeasureAreaControl.js"></script>
<!-- End JavaScript calls -->

<!-- Start GeoJSON Data Load -->
<script type="text/javascript" src="data/heatpoints1.js"></script>
<!-- End GeoJSON Data Load -->

<style>
body { margin:0; padding:0; }
#map{ width: 1200px; height: 700px; position: absolute; top:0; bottom:0; right:0; left:0; } 
</style>

</head>
<body>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet.esri.geocoder/2.0.2/esri-leaflet-geocoder.css">
<script src="https://cdn.jsdelivr.net/leaflet.esri.geocoder/2.0.2/esri-leaflet-geocoder.js"></script>

<!-- display map -->
<div id="map"></div>

<script>

//  Instantiate Map
var map = L.map('map').setView([38.80690, -77.26940], 8);

//  Basemaaps
//  OpenStreetMap
var openstreetmap = new L.TileLayer('http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpeg', {
    subdomains: '1234',
    format: 'image/png',
    minZoom: 2,
    maxZoom: 19,
    opacity: 1,
    attribution: 'Map tiles &copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}).addTo(map);

//  USGS Topo
var usgstopo = new L.TileLayer.WMTS('http://basemap.nationalmap.gov/arcgis/rest/services/USGSTopo/MapServer/WMTS?', {
    format: 'image/png',
    minZoom: 5,
    maxZoom: 15,
    opacity: 1,
    attribution: 'Map tiles &copy; <a href="http://www.esri.com/software/arcgis/arcgisonline/maps/maps-and-map-layers" target="_blank">Esri</a>'
    });

//  Overlays
//  TIGERWeb - Counties
var counties = new L.TileLayer.WMS('http://tigerweb.geo.census.gov/arcgis/services/TIGERweb/tigerWMS_Current/MapServer/WmsServer?', {
    format: 'image/png',
    layers: 'Counties,States',
    minZoom: 3,
    maxZoom: 15,
    opacity: 1,
    transparent: true,
    zIndex: 1000,
    attribution: 'Map tiles courtesy of <a href="http://tigerweb.geo.census.gov/tigerwebmain/TIGERweb_wms.html">US Census Bureau</a>'
});

//  The National Map - Roads (Interstate and US)
var majorroads = new L.TileLayer.WMS('http://services.nationalmap.gov/arcgis/services/transportation/MapServer/WMSServer', {
    format: 'image/png',
    layers: '6,7,15,16',
    minZoom: 3,
    maxZoom: 16,
    opacity: 1,
    transparent: true,
    zIndex: 1000,
    attribution: 'Map tiles courtesy of <a href="http://viewer.nationalmap.gov/services/" target="_blank">US Geological Survey</a>'
});

//  Start Heat Map
var golf = L.heatLayer(golfcoursePoints,{
    radius: 25,
    blur: 25, 
    maxZoom: 17
//  gradient: {
//      0.1: '#ffffb2',
//      0.3: '#fd8d3c',
//      0.8: '#fd8d3c', 
//      0.9: '#f03b20',
//      1.0: '#bd0026'
//  }
});
//  End Heat Map

var basemaps = {
    "OpenStreetMap": openstreetmap,
    "Topo": usgstopo
    };

var overlayMaps = {
    "Boundaries - State and County": counties,
    "Major Roads": majorroads,
    "Maryland Golf Courses": golf
    };

var layerControl = L.control.layers(basemaps, overlayMaps, {collapsed: true}).addTo(map);

var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();

var searchControl = L.esri.Geocoding.geosearch({
    providers: [arcgisOnline]
    }).addTo(map);

var results = L.layerGroup().addTo(map);

    searchControl.on('results', function(data){
    results.clearLayers();
    for (var i = data.results.length - 1; i >= 0; i--) {
      results.addLayer(L.marker(data.results[i].latlng));
    }
    });

//Measure Tool
var control2 = new L.Control.measureAreaControl(basemaps, overlayMaps)
control2.addTo(map);

// Display mouse coordinates
var mouseControl = new L.control.coordinates({
    position:"bottomleft",
    decimals:6,
    decimalSeperator:",",
    labelTemplateLat:"Latitude: {y}",
    labelTemplateLng:"Longitude: {x}"
    });

// Display scale control
var scaleControl = new L.control.scale({
    position: 'bottomleft'
    });

var control = L.control.selectLayers(basemaps, overlayMaps)
control.addTo(map)

    map.addControl(mouseControl);
    map.addControl(scaleControl);

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

closed as unclear what you're asking by Devdatta Tengshe, Evil Genius, Hornbydd, Andre Silva, Mapperz Dec 19 '16 at 21:18

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • What you have is an unhandled exception where the JavaScript object of a type is commended to behave as another type. Given that this is all your written code, the Leaflet API doesn't have a selectLayer member therefore selectLayers is undefined. An undefined object cannot execute as a function. Inspecting L.control.selectLayers should return undefined. – RomaH Mar 30 '16 at 18:55
3

If you wish to use Leaflet.selectLayers plugin, you need to download the corresponding JavaScript file, and add it through a script tag to your page in order for the JS engine to know what L.control.selectLayers is. As said by IvanSanchez, it is not part of the core Leaflet API.

Assuming you have placed the JS file in your scripts subfolder, like the other plugins you use:

<script src="scripts/leaflet.select-layers.min.js"></script>

Not sure why you instantiate L.control.layers then try to instantiate L.control.selectLayers

2
var control = L.control.selectLayers(basemaps, overlayMaps)

That is wrong, you probably meant to write:

var control = L.control.layers(basemaps, overlayMaps)

I suggest you should double-check the Leaflet API documentation about L.Control.Layers.

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