[GIS] an appropriate tileLayer source for tiles served on an apache localhost through leaflet

apacheleafletmapnikmod-tileopenstreetmap

—I found a solution. Please, see answers below.—

I've been trying for about about 25 hours to get a working, locally hosted, tile server running, using this guide from switch2osm.

I have a virtualbox machine, running Ubuntu 14.04, with a postgres/postgis database set up (using osm2pgsql), mapnik installed, mod_tile/renderd loaded with apache and set to run on startup.

I have the appropriate test image loading through firefox at http://localhost/osm_tiles/0/0/0.png.

I even have a leaflet.js 0.7.7 setup in the document root of my apache virtual host, and it displays map tiles when my tileLayer source is "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", but not when I try and source the tiles from my localhost "http://{s}.127.0.0.1:80/{z}/{x}/{y}.png".
The map remains blank, and the GET requests that show up in the firefox development tool do not have a status number (i.e. 404 not found) or a size/transferred amount.

The apache error and access logs show no indication that anything is wrong, except that the GETs for the tiles aren't showing up in the apache access log at all (only the GET for the leaflet.js).

My index.html is fairly sparse:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="leaflet.css" />
    <link rel="stylesheet" href="map.css" />
    <script src="leaflet.js"></script>
</head>
<body>
    <div id="mapid"></div>
    <script>
            var mymap = L.map('mapid').setView([43, -70], 5);
            L.tileLayer("http://{s}.127.0.0.1:80/{z}/{x}/{y}.png").addTo(mymap);    
    </script>
</body>
</html>

The map.css only contains the height for the mapid div.

#mapid { height: 600px }

Replacing the loopback IP (127.0.0.1) with "localhost" yeilds 404 errors on all the tiles. Replacing it with my outward facing IP (192.168.56.102, for use with the virtualbox host-only adapter), creates the same problem (no tiles displayed, no status/transfer/size).

My apache virtualhost is set up as follows:

<VirtualHost *:80>
    ServerAdmin webmaster@localhost

    LoadTileConfigFile /usr/local/etc/renderd.conf
    ModTileRenderdSocketName /var/run/renderd/renderd.sock
    # Timeout before giving up for a tile to be rendered
    ModTileRequestTimeout 0
    # Timeout before giving up for a tile to be rendered that is otherwise missing
    ModTileMissingRequestTimeout 30

    DocumentRoot /var/www/html

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

I'm not sure I've got that configured correctly, but I only added what the tutorial told me to. This is a minimally edited 000-default.conf file with the comments removed.

The only other thing I can think of, is that I have two network cards on the virtual machine. One is set up as a NAT device, in order to have access to the internet for updates. The other is a Host-Only device, in order to test access to the "outside world", but I haven't even gotten it displaying tiles from within the VM yet, so I'm not sure this is the source of my issue.

As of yet, the problem with a manual server build has not been solved

—EDIT: (Trying a different approach)—

I wanted to make absolutely sure I didn't mess up the configuration of all the pieces in this server, so I found the slightly easier (though less educational) installation by package off the same site, switch2osm.org.

After spinning up a fresh 14.04 VM, with only an SSH server, I followed the installation by package instructions, and I'm able to see tiles hosted on my guest OS from my host OS!

The only issue now is that the automatic install of this system is using OpenLayers as a front end instead of Leaflet. This is not a terrible issue, I could end up porting my code over from Leaflet to OpenLayers, but I would really like to try and solve this issue, as it seems like a simple misunderstanding of how the tileLayer method accesses a server's locally hosted tiles.

I decided to go even further with the swtich2osm tutorials by copy-pasting their "Getting Started with Leaflet" code. This default code got me back to where I was, pulling tiles off of tile.openstreetmap.org.

The edits I then made to try and access my local tiles got me a blank map again,

leafletembed.js:

var map;
var ajaxRequest;
var plotlist;
var plotlayers=[];

function initmap() {
    // set up the map
    map = new L.Map('map');

    // create the tile layer with correct attribution
    var osmUrl='http://localhost/{z}/{x}/{y}.png';
    var osm = new L.TileLayer(osmUrl);

    // start the map in Portland, Maine.
    map.setView(new L.LatLng(43.651183, -70.249044),9);
    map.addLayer(osm);
}

leaflet.html:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
    <script type="text/javascript" src="leaflet/leaflet.js"></script>
    <script type="text/javascript" src="leaflet/leafletembed.js"></script>
    <link rel="stylesheet" type="text/css" href="leaflet/map.css" />
</head>
<body>
    <div id='map'></div>
    <script>initmap();</script>
</body>
</html>

I did take the suggestions from Balazs and elrobis to remove the subdomain from my link and enable mod_rewrite, and it seems that now the loopback IP and "localhost" have the same effect.

The only other information I've come up with is that when viewing the site through Chrome instead of Firefox, the images that aren't loading are reporting an "net::ERR_CONNECTION_REFUSED" message instead of nothing:

Leaflet.js ERR_CONNECTION_REFUSED

Best Answer

Your problem is that you referenced {s} in your code but you dont have subdomains installed. The official OSM has 3 different subdomains for that: http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png where {s} = a,b and c. So you should create at least one subdomain (set a DNS server and configure apache2 properly). But you can use it without subdomains. They use it because of heavy loads. When a.tile.openstreetmap.org is offline the second 'b' is still active because it exists on a different server and wont cause any problem in service.

PS: Don't forget to activate mod_rewrite in apache2 configuration too.

Related Question