CODEWITHSUNDEEP
javascriptlayerleaflet
user3233010
user3233010

Reputation: 91

Leaflet base layer control with non-geographic image?

I've run multiple searches on this subject without luck, so here's my question...

I have created Leaflet maps with geographic map tiles that have layer controls for both base and overlay layers, AND I've created Leaflet maps with non-geographic image tiles, but I'm having trouble creating leaflet maps with non-geographic images that ALSO have tile layer controls -- so the user can switch between images to view and zoom in on via the Leaflet layer control switch.

All the settings work fine in the single-image version without tile layer control, but they don't work in the following code. I've run the code checkers in Dreamweaver and Firebug on it and they find no fault, but what I get is a blank screen with no image and no layer control visible, and no layer attribution at the bottom right corner. 

<!DOCTYPE html>
<html>
  <head>
    <title>Horsehead Nebulae</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
    <![endif]-->
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script>
      function init() {
        var mapMinZoom = 0;
        var mapMaxZoom = 5;
        var map = L.map('map', {
          maxZoom: mapMaxZoom,
          minZoom: mapMinZoom,
          crs: L.CRS.Simple
        }).setView([0, 0], mapMaxZoom);

        var mapBounds = new L.LatLngBounds(
            map.unproject([0, 5376], mapMaxZoom),
            map.unproject([5120, 0], mapMaxZoom));

        map.fitBounds(mapBounds);

        var hhAttr = 'Ipsulem lorem',

            hhUrl = 'http://www.astonisher.com/maps/nebulae/horsehead/{z}/{x}/{y}.png';

        var horsehead   = L.tileLayer(hhUrl, {attribution: hhAttr});

        var heAttr = 'Ipsumel lorem',

             heUrl = 'http://www.astonisher.com/maps/nebulae/helix/{z}/{x}/{y}.png';

         var helix = L.tileLayer(heUrl, {attribution: heAttr});


         var map = L.map('map', {
          minZoom: mapMinZoom, 
          maxZoom: mapMaxZoom,
          bounds: mapBounds,
          noWrap: true,          
          layers: [horsehead]
        });

        var baseLayers = {
            "Horsehead": horsehead,
            "Helix": helix

        };

        L.control.layers(baseLayers).addTo(map);
      }
    </script>
    <style>
      html, body, #map { width:100%; height:100%; margin:0; padding:0; }
    </style>
  </head>
  <body onLoad="init()">
    <div id="map"></div>
  </body>
</html>

Been chewing on this for days now. Really appreciate it of you can steer me in the right direction. Thanks...

Upvotes: 1

Views: 1859

Answers (1)

user3233010
user3233010

Reputation: 91

Got it. Turned out I had mixed up a couple L.tileLayer and L.map properties. When I got that straightened out, it worked fine...

Upvotes: 2

Related Questions