CODEWITHSUNDEEP
javascriptleaflet
David Ranich
David Ranich

Reputation: 11

Custom map tiles not loading -- Leafletjs

I am following a tutorial on how to create your own custom map. I sliced my image into tiles, but nothing loads when I go to view the page.

The JavaScript:

L.tileLayer('/Users/ranichd/Desktop/maptest/{z}_{x}_{y}.png', {
    minZoom: 1,
    maxZoom: 6,
    attribution: 'David'
}).addTo(map);

The CSS:

#carpmap2 {
    height: 400px;
    width: 900px;
    margin: auto;
    padding: 10px;
    border: 1px solid black;
}

A screenshot of the map tiles:

http://imgur.com/SrQewWA

And finally, the result I am getting:

http://imgur.com/FV9jtIA

How can I make this work?

Upvotes: 0

Views: 204

Answers (1)

YaFred
YaFred

Reputation: 10008

Your tiles have to be served by an http server.

L.tileLayer('http://yourhost/maptest/{z}_{x}_{y}.png', {
    minZoom: 1,
    maxZoom: 6,
    attribution: 'David'
}).addTo(map);

Upvotes: 1

Related Questions