[GIS] Leaflet Basemap and Overlay Display

basemapleafletoverlaywms

When running this why does the open street layer not show up as the base layer by default? and why does the precipitation layer come up as already checked to display? None of the other overlays automatically display 

<head>
<title>Maryland Sports.js Map</title>
<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"/>
<link rel="stylesheet" href="css/leaflet-measure.css"/>
<link rel="stylesheet" href="css/leaflet-control-boxzoom.css"/>
<link rel="stylesheet" href="css/leaflet.NavBar.css"/>
<link rel="stylesheet" href="css/Control.MiniMap.min.css"/>
<link rel="stylesheet" href="css/leaflet.groupedlayercontrol.min.css"/>
<link rel="stylesheet" href="css/MarkerCluster.Default.css" />

<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/leaflet-measure.js"></script>
<script type="text/javascript" src="scripts/leaflet-control-boxzoom.js"></script>
<script type="text/javascript" src="scripts/leaflet.NavBar.js"></script>
<script type="text/javascript" src="scripts/Control.MiniMap.js"></script>
<script type="text/javascript" src="scripts/leaflet.groupedlayercontrol.min.js"></script>
<script type="text/javascript" src="scripts/Leaflet.MarkerCluster.js"></script>


<!-- Start GeoJSON Data Load -->
<script type="text/javascript" src="data/baseball.txt"></script>
<script type="text/javascript" src="data/basketball.txt"></script>
<script type="text/javascript" src="data/disc_golf.txt"></script>
<script type="text/javascript" src="data/football.geojson"></script>
<script type="text/javascript" src="data/golf.geojson"></script>
<script type="text/javascript" src="data/lacrosse.geojson"></script>
<script type="text/javascript" src="data/icerinks.geojson"></script>
<script type="text/javascript" src="data/rollersports.geojson"></script>
<script type="text/javascript" src="data/soccer.geojson"></script>
<script type="text/javascript" src="data/tennis.geojson"></script>
<!-- End GeoJSON Data Load -->
<style>
#map{ width: 1200px; height: 700px; } 
</style>
</head>

<body>
<div id="navbar" class="navbar navbar-fixed-top">

<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>
<p><b>Maryland Sports</b></p>
<!-- display map -->
<div id="map"></div>
<script>

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

//BASEMAPS
// 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);

var Imagery = new L.TileLayer.WMTS('http://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/WMTS?', {
    format: 'image/png',
    minZoom: 5,
    maxZoom: 20,
    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
// Boundaries
    var boundaries = new L.TileLayer.WMS('http://services.nationalmap.gov/arcgis/services/govunits/MapServer/WmsServer?/>', {
      format: 'image/png',
      layers: '2,7',
      minZoom: 3,
      maxZoom: 20,
      opacity: 1,
      transparent: true,
});

// US Hazards Map
    var igems_haz = new L.TileLayer.WMS('http://igems.doi.gov/arcgis/services/igems_haz/MapServer/WmsServer?', {
      format: 'image/png',
      layers: '0,1,2',
      minZoom: 3,
      maxZoom: 20,
      opacity: 1,
      transparent: true,
});

//  OpenWeatherMap - Temperature
var temperature = L.tileLayer('http://{s}.tile.openweathermap.org/map/temp/{z}/{x}/{y}.png', {
    format: 'image/png',
    minZoom: 2,
    maxZoom: 20,
    opacity: 0.5,
    attribution: 'Map data &copy; <a href="http://openweathermap.org">OpenWeatherMap</a>'
});

//Precipitation
var precipitation = L.tileLayer.wms('http://nowcoast.noaa.gov/arcgis/services/nowcoast/analysis_meteohydro_sfc_qpe_time/MapServer/WmsServer', {
    format: 'image/png',
    transparent: true,
    layers: '5'
}).addTo(map);

//  GeoJSON Files - Baseball
    var baseballIcon = L.icon({ 
        iconUrl: 'images/markers/baseball.png',
        iconSize: [30, 30],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25],
        labelAnchor: [6, -12]
        });

    var baseball = new L.LayerGroup(); 

      L.geoJson(baseballfields, { 
        pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {
            icon: baseballIcon
          });
        },

        onEachFeature: function (feature, layer) {
          if (feature.properties) {
            var content = '<p>' + feature.properties.Title + '</p>' + 
                '<p>' + "<h4><a href=\"" + feature.properties.Website + "\" target=\"_blank\">" + 'Website' + "</a></h4>" + '</p>' +
                '<p>' + 'Address: ' + feature.properties.Address + "</a></h3>" + '</p>' +               
                '<p>' + 'City: ' + feature.properties.City + "</a></h3>" + '</p>' +
                '<p>' + 'ZIP Code: ' + feature.properties.ZIPCode + "</a></h3>" + '</p>';
            layer.bindPopup(content);
          }
        }
      }).addTo(baseball); 

// Basketball
    var basketballIcon = L.icon({ 
        iconUrl: 'images/markers/basketball.png',
        iconSize: [30, 30],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25],
        labelAnchor: [6, -12]
        });

    var basketball = new L.LayerGroup();

      L.geoJson(basketballcourts, { 
        pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {
            icon: basketballIcon
          });
        },

        onEachFeature: function (feature, layer) {
          if (feature.properties) {
            var content = '<p>' + feature.properties.Title + '</p>' + 
                '<p>' + "<h4><a href=\"" + feature.properties.Website + "\" target=\"_blank\">" + 'Website' + "</a></h4>" + '</p>' +
                '<p>' + 'Address: ' + feature.properties.Address + "</a></h3>" + '</p>' +               
                '<p>' + 'City: ' + feature.properties.City + "</a></h3>" + '</p>' +
                '<p>' + 'ZIP Code: ' + feature.properties.ZIPCode + "</a></h3>" + '</p>';
            layer.bindPopup(content);
          }
        }
      }).addTo(basketball); 

// Disc Golf
    var discgolfIcon = L.icon({ 
        iconUrl: 'images/markers/yellow.png',
        shadowUrl: 'images/markers/shadow.png',
        iconSize: [12, 20],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25],
        labelAnchor: [6, -12]
        });

    var discgolf = new L.LayerGroup();

      L.geoJson(discgolfcourses, { 
        pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {
            icon: discgolfIcon
          });
        },

        onEachFeature: function (feature, layer) {
          if (feature.properties) {
            var content = '<p>' + feature.properties.Title + '</p>' + 
                '<p>' + "<h4><a href=\"" + feature.properties.Website + "\" target=\"_blank\">" + 'Website' + "</a></h4>" + '</p>' +
                '<p>' + 'Address: ' + feature.properties.Address + "</a></h3>" + '</p>' +               
                '<p>' + 'City: ' + feature.properties.City + "</a></h3>" + '</p>' +
                '<p>' + 'ZIP Code: ' + feature.properties.ZIPCode + "</a></h3>" + '</p>';
            layer.bindPopup(content);
          }
        }
      }).addTo(discgolf); 

//Football
    var footballIcon = L.icon({ 
        iconUrl: 'images/markers/usfootball.png',
        iconSize: [30, 30],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25],
        labelAnchor: [6, -12]
        });

    var football = new L.LayerGroup();

      L.geoJson(footballfields, { 
        pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {
            icon: footballIcon
          });
        },

        onEachFeature: function (feature, layer) {
          if (feature.properties) {
            var content = '<p>' + feature.properties.Title + '</p>' + 
                '<p>' + "<h4><a href=\"" + feature.properties.Website + "\" target=\"_blank\">" + 'Website' + "</a></h4>" + '</p>' +
                '<p>' + 'Address: ' + feature.properties.Address + "</a></h3>" + '</p>' +               
                '<p>' + 'City: ' + feature.properties.City + "</a></h3>" + '</p>' +
                '<p>' + 'ZIP Code: ' + feature.properties.ZIPCode + "</a></h3>" + '</p>';
            layer.bindPopup(content);
          }
        }
      }).addTo(football); 


//Golf Courses
    var golfcoursesIcon = L.icon({ 
        iconUrl: 'images/markers/golfing.png',
        iconSize: [30, 30],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25],
        labelAnchor: [6, -12]
        });

    var golf = new L.LayerGroup();

      L.geoJson(golfcourses, { 
        pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {
            icon: golfcoursesIcon
          });
        },

        onEachFeature: function (feature, layer) {
          if (feature.properties) {
            var content = '<p>' + feature.properties.Title + '</p>' + 
                '<p>' + "<h4><a href=\"" + feature.properties.Website + "\" target=\"_blank\">" + 'Website' + "</a></h4>" + '</p>' +
                '<p>' + 'Address: ' + feature.properties.Address + "</a></h3>" + '</p>' +               
                '<p>' + 'City: ' + feature.properties.City + "</a></h3>" + '</p>' +
                '<p>' + 'ZIP Code: ' + feature.properties.ZIPCode + "</a></h3>" + '</p>';
            layer.bindPopup(content);
          }
        }
      }).addTo(golf); 

//Ice Rinks
    var icerinksIcon = L.icon({ 
        iconUrl: 'images/markers/iceskating.png',
        iconSize: [30, 30],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25],
        labelAnchor: [6, -12]
        });

    var ice = new L.LayerGroup();

      L.geoJson(icerinks, { 
        pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {
            icon: icerinksIcon
          });
        },

        onEachFeature: function (feature, layer) {
          if (feature.properties) {
            var content = '<p>' + feature.properties.Title + '</p>' + 
                '<p>' + "<h4><a href=\"" + feature.properties.Website + "\" target=\"_blank\">" + 'Website' + "</a></h4>" + '</p>' +
                '<p>' + 'Address: ' + feature.properties.Address + "</a></h3>" + '</p>' +               
                '<p>' + 'City: ' + feature.properties.City + "</a></h3>" + '</p>' +
                '<p>' + 'ZIP Code: ' + feature.properties.ZIPCode + "</a></h3>" + '</p>';
            layer.bindPopup(content);
          }
        }
      }).addTo(ice);      


//Lacrosse
    var lacrosseIcon = L.icon({ 
        iconUrl: 'images/markers/green.png',
        shadowUrl: 'images/markers/shadow.png',
        iconSize: [12, 20],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25],
        labelAnchor: [6, -12]
        });

    var lacrosse = new L.LayerGroup();

      L.geoJson(lacrossefields, { 
        pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {
            icon: lacrosseIcon
          });
        },

        onEachFeature: function (feature, layer) {
          if (feature.properties) {
            var content = '<p>' + feature.properties.Title + '</p>' + 
                '<p>' + "<h4><a href=\"" + feature.properties.Website + "\" target=\"_blank\">" + 'Website' + "</a></h4>" + '</p>' +
                '<p>' + 'Address: ' + feature.properties.Address + "</a></h3>" + '</p>' +               
                '<p>' + 'City: ' + feature.properties.City + "</a></h3>" + '</p>' +
                '<p>' + 'ZIP Code: ' + feature.properties.ZIPCode + "</a></h3>" + '</p>';
            layer.bindPopup(content);
          }
        }
      }).addTo(lacrosse); 

//Roller Sports
    var rollersportsIcon = L.icon({ 
        iconUrl: 'images/markers/rollerblade.png',
        iconSize: [30, 30],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25],
        labelAnchor: [6, -12]
        });

    var roller = new L.LayerGroup();

      L.geoJson(rollersports, { 
        pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {
            icon: rollersportsIcon
          });
        },

        onEachFeature: function (feature, layer) {
          if (feature.properties) {
            var content = '<p>' + feature.properties.Title + '</p>' + 
                '<p>' + "<h4><a href=\"" + feature.properties.Website + "\" target=\"_blank\">" + 'Website' + "</a></h4>" + '</p>' +
                '<p>' + 'Address: ' + feature.properties.Address + "</a></h3>" + '</p>' +               
                '<p>' + 'City: ' + feature.properties.City + "</a></h3>" + '</p>' +
                '<p>' + 'ZIP Code: ' + feature.properties.ZIPCode + "</a></h3>" + '</p>';
            layer.bindPopup(content);
          }
        }
      }).addTo(roller); 

//Soccer
    var soccerIcon = L.icon({ 
        iconUrl: 'images/markers/soccer.png',
        iconSize: [30, 30],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25],
        labelAnchor: [6, -12]
        });

    var soccer = new L.LayerGroup();

      L.geoJson(soccerfields, { 
        pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {
            icon: soccerIcon
          });
        },

        onEachFeature: function (feature, layer) {
          if (feature.properties) {
            var content = '<p>' + feature.properties.Title + '</p>' + 
                '<p>' + "<h4><a href=\"" + feature.properties.Website + "\" target=\"_blank\">" + 'Website' + "</a></h4>" + '</p>' +
                '<p>' + 'Address: ' + feature.properties.Address + "</a></h3>" + '</p>' +               
                '<p>' + 'City: ' + feature.properties.City + "</a></h3>" + '</p>' +
                '<p>' + 'ZIP Code: ' + feature.properties.ZIPCode + "</a></h3>" + '</p>';
            layer.bindPopup(content);
          }
        }
      }).addTo(soccer); 

//Tennis
    var tennisIcon = L.icon({ 
        iconUrl: 'images/markers/tennis.png',
        iconSize: [30, 30],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25],
        labelAnchor: [6, -12]
        });

    var tennis = new L.LayerGroup();

      L.geoJson(tenniscourts, { 
        pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {
            icon: tennisIcon
          });
        },

        onEachFeature: function (feature, layer) {
          if (feature.properties) {
            var content = '<p>' + feature.properties.Title + '</p>' + 
                '<p>' + "<h4><a href=\"" + feature.properties.Website + "\" target=\"_blank\">" + 'Website' + "</a></h4>" + '</p>' +
                '<p>' + 'Address: ' + feature.properties.Address + "</a></h3>" + '</p>' +               
                '<p>' + 'City: ' + feature.properties.City + "</a></h3>" + '</p>' +
                '<p>' + 'ZIP Code: ' + feature.properties.ZIPCode + "</a></h3>" + '</p>';
            layer.bindPopup(content);
          }
        }
      }).addTo(tennis);       

//Geocode Tool

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));
    }
    });

//Box Zoom Tool
L.Control.boxzoom({ position:'topleft' }).addTo(map);

//Nav Bar
L.control.navbar().addTo(map);

//Measure Tool
var measureControl = new L.Control.Measure({ 
    position: 'topleft',
    activeColor: '#023858',
    completedColor: '#023858'
    });
    measureControl.addTo(map);

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

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

//  Locate Control
var locateControl = new L.Control.Locate({
    follow: true,
    setView: true,
    position: 'topleft'
    });

    map.addControl(locateControl);

//MiniMap
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data &copy; OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 5, maxZoom: 18, attribution: osmAttrib});

map.addLayer(osm);

var osm2 = new L.TileLayer(osmUrl, {minZoom: 0, maxZoom: 13, attribution: osmAttrib });
var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);

//  Basemaps
var basemaps = {
    "OpenStreetMap": openstreetmap,
    "Esri World Imagery": Imagery
    };

//Layer Grouping
var groupedOverlays = {

"Boundaries": { 
    "Boundaries": boundaries
    },

  "Weather": {
    "Temperature": temperature,
    "Watches & Warnings": igems_haz,
    "Precipitation": precipitation
  },
  "Sports": {
    "Baseball": baseball,
    "Basketball": basketball,
    "Disc Golf Courses": discgolf,
    "Football Fields": football,
    "Golf Courses":golf,
    "Ice Rinks": ice,
    "Lacrosse Fields": lacrosse,
    "Roller Sports": roller,
    "Soccer Fields": soccer,
    "Tennis Courts": tennis
    }
    };

L.control.groupedLayers(basemaps, groupedOverlays).addTo(map);

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

Best Answer

1) The OSM Layer (that is, the one named osm) is added to the map, but because you have added the Mapquest layer (the one named openstreetmap) as well, the osm layer is hidden beneath it. And because you haven't added osm as one of the basemaps in your layer control, you have no way to turn off the other layers and reveal it.

2) The precipitation layer shows up because you are adding it to the map (with .addTo(map)), while you are not adding the other layers.

3) When asking questions, please try making a minimal, complete, verifiable example rather than posting 500+ lines of code. It not only makes it more likely that you'll get an answer, but also helps you spot the errors yourself. When you pare down the code to only the essential parts, it is much easier to isolate problems.

Related Question