custom map tiles

[aston...@gmail.com]

I have created a small experimental .jpg map with geolocation, a bubble marker and a custom map tile set. The geolocation and the bubble marker work great, but the custom tile set doesn't display. I used MapTiler to create the tile set and it works when viewed with MapTiler's viewer, and appears to be in the correct name and file structure format, but the maps don't show up when the page loads...

The map page in question is at http://www.astonisher.com/map_test/geo_tile1.html. The map tile folders are located at http://www.astonisher.com/map_test/test1/ in subfolders http://www.astonisher.com/map_test/test1/0 through http://www.astonisher.com/map_test/test1/3. The full URL of one of the images is http://www.astonisher.com/map_test/test1/3/4/0.png

Here's the code I used to try to call the custom map tiles at http://www.astonisher.com/map_test/test1/...

L.tileLayer('http://{s}.astonisher.com/map_test/test1/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
        }).addTo(map);

I'm guessing there's something wrong with my L.tileLayer( sytax, but I can't see what it is. Really appreciate any help you can offer...

[aston...@gmail.com]

Added the line tms: true, thusly, but still doesn't work...

L.tileLayer('http://{s}.astonisher.com/map_test/test1/{z}/{x}/{y}.png', {

            tms: true,

            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org

">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
        }).addTo(map);

[aston...@gmail.com]

Still working on this, and I checked the http://www.astonisher.com/map_test/test1/0/0/0.png image and it contains the entire, untiled map image, just as it should, but the map tiles still don't display...

[Andreas Wagner]

Try square tiles of width and height 256x256 pixels. I don't think leafletjs supports non-square tiles. Also check that you have the correct maxZoom (it's the number of subdirectories in test1). Leave out the "{s}." in your url.

- Andreas

--
 
---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[aston...@gmail.com]

Hey Andreas. Really appreciate your reply. It appears that MapTiler actually WILL tile images that aren't 256 pixels square. Please see http://www.astonisher.com/map_test/test1/openlayers.html. This is my entire test map tile set displayed in MapTiler's viewer. As you can see, the image isn't square (or 256x256), but MapTiler handled it just fine...

Will mess with maxZoom and remove the {s}. next...

[Andreas Wagner]

I meant the tiles themselves should be 256x256 but it looks like they already are so nevermind. I've had problems with a lot of the tilers out there. The only thing that worked for me is this little perl script: http://pastebin.com/AB6fWcrK

On Sun, Jan 26, 2014 at 9:38 PM, <aston...@gmail.com> wrote:

Hey Andreas. Really appreciate your reply. It appears that MapTiler actually WILL tile images that aren't 256 pixels square. Please see http://www.astonisher.com/map_test/test1/openlayers.html. This is my entire test map tile set displayed in MapTiler's viewer. As you can see, the image isn't square (or 256x256), but MapTiler handled it just fine...

Will mess with maxZoom and remove the {s}. next...

--

[aston...@gmail.com]

Hey Andreas. I tried what you suggested -- removed the "{s}." and set the zoom to three (there are four map tile folders, 0-3), but it still doesn't work.

Here's my entire <div> and <script>...


    <div id="map" style="width: 300px; height: 600px"></div>

    <script>
        var map = L.map('map').setView([48.99548, -122.25405], 13);
       
        L.marker([48.99548, -122.25405]).addTo(map)
            .bindPopup("<b>Temixwten</b><br />AKA The Old Brown Place").openPopup();
 
        L.tileLayer('http://astonisher.com/map_test/test1/{z}/{x}/{y}.png', {
            tms: true,
            maxZoom: 3,

            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
        }).addTo(map);

        function onLocationFound(e) {
            var radius = e.accuracy / 2;

            L.marker(e.latlng).addTo(map)
                .bindPopup("You are within " + radius + " meters from this point").openPopup();

            L.circle(e.latlng, radius).addTo(map);
        }

        function onLocationError(e) {
            alert(e.message);
        }

        map.on('locationfound', onLocationFound);
        map.on('locationerror', onLocationError);

        map.locate({setView: true, maxZoom: 3});
    </script>

REALLY appreciate any help anyone can offer...

* * *

[aston...@gmail.com]

Andreas, you say the pastebin script "worked" for you -- you used it to massage existing tile set, or what?

* * *

[Andreas Wagner]

I used it to tile a single fullsize map image (a giant jpeg floorplan) for my own leafletjs map projects after trying other map tilers and getting a similar effect to what you got in your map (empty spaces between bits of map) and disorganized tile layout. The perl script generated tiles that worked with leaflet out of the box. If you decide to use use it remember to change:

astonisher.com/map_test/test1/{z}/{x}/{y}.png

to

astonisher.com/map_test/test1/{z}/{x}-{y}.png

[Andreas Wagner]

If necessary you can give me the path to a fullsize image and I can tile it to test this out because I already have functional perl modules installed.

On Sun, Jan 26, 2014 at 10:01 PM, <aston...@gmail.com> wrote:

[Andreas Wagner]

I successfully tried your code with a high-res wallpaper. So there is nothing really wrong with geo_tile1.html I only had to remove tms:true and zoom out to see the map because you setView() to somewhere else.

On Sun, Jan 26, 2014 at 10:01 PM, <aston...@gmail.com> wrote:

[Mark]

Aston how did you get your image geolocated ? 

I am trying to get my own image geolocated and tiled into the right format  to create my own map but having troubles getting started. 

[aston...@gmail.com]

Hey Andreas. Thanks so much for your help. I stayed with it last night until I also confirmed that the map tiles are actually OK.

Now I'm back at it... So you got my map tiles to display successfully in a Leafletjs map?!!  Or did you just get the map tiles to display in a wallpaper program?

If you got the map tiles to display in a leafletsjs map, can you please give me the <div> and <script> code you used? Sounds like both Mark and I would really appreciate it!

FI, you say I setView() elsewhere -- I don't understand...

[aston...@gmail.com]

Hey Mark. I read your posts about this subject in this forum! I'll get back to you later today -- assuming I make some progress!

[Mark]

sounds great  be looking forward to it, I got a massive project I donated myself too and seems im in over my head lol.

[Andreas Wagner]

I tiled a wallpaper from wallbase.cc with the perl script and used the resulting tiles with your web page.

If you want to use the existing tiles try adding "tileSize: 512," and removing "tms: true," from the L.tileLayer like so:


        L.tileLayer('http://astonisher.com/map_test/test1/{z}/{x}/{y}.png', {
            tileSize: 512,
            maxZoom: 3,

            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
        }).addTo(map);

[aston...@gmail.com]

Hey Andreas. Thanks so much for your help! And the plot thickens! I've been working on this since the early dark today and I've made some progress, but I'm still not there yet. What I've learned is that my small experimental custom map tile IS actually being shown in the Leafletjs map, BUT there are three problems: (1) my custom map tile ONLY DISPLAYS WHEN YOU ZOOM WAY OUT, (2) my custom map tile repeats horizontally to infinity in both directions, and (3) my custom map tile is not in the right place (the bubble marker should be near the middle of the map, not off the edge.

There is a screenshot of these three problems in my test Leafletjs test map at http://www.astonisher.com/map_test/geo4_nogeo.html.

All this says to me that my L.tileLayer syntax is correct in connecting to the online map tile location, and the assembly, format and file structure of my MapTiler map tiles are correct.

However, maybe there are syntax problems with the rest of my L.tileLayer statement? FI, should I add a maxBounds?

* * *

[aston...@gmail.com]

Still working on this problem -- simplifying to see where the problem is. So I remade my custom tile set with just one level of magnification. One level of magnification works the way its supposed to, and my custom map tile is closer to where it's supposed to be so that its viewable without zooming way out, but the marker bubble still is NOT on the map, and the map still repeats horizontally to infinity in each direction.

One curiosity is that I have had the L.map statement and the L.marker statement set to exactly the same lat/lng, but they are displaying at different places!!!! How can that be?

var map = L.map('map').setView([48.99548, -122.25405], 1);

       
        L.marker([48.99548, -122.25405]).addTo(map)
            .bindPopup("<b>Temixwten</b><br />AKA The Old Brown Place").openPopup();

So I tried the map.locate method without a lat/lng stipulated in he L.map, and it's still the same: the marker doesn't show on the map tile (even though both have the same lat/lng), and the map repeats horizontalled in a band (but not vertically)...