2

I generated tiles in Maperative. Created following html file:

<html>
    <head>
    <meta charset="utf-8" />
         <link rel="stylesheet" href="leaflet/leaflet.css" />

    </head>
    <body>
         <div style="width: 600px; height: 400px" id="map"></div>
          <script src="leaflet/leaflet.js"></script>
          <script type="text/javascript" src="leaflet/leaflet-src.js"></script>
          <script>
        map = new L.Map('map');

    // create the tile layer with correct attribution
    var osmUrl='Maperitive\Tiles\{z}\{x}\{y}.png';
    var osmAttrib='Map data © OpenStreetMap contributors';
    var osm = new L.TileLayer(osmUrl, {minZoom: 13, maxZoom: 16, attribution: osmAttrib});      

    // start the map in South-East England
    map.setView(new L.LatLng(59.55, 30.09),13);
    map.addLayer(osm);
        var popup = L.popup();

        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(map);
        }

        map.on('click', onMapClick);

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

, but do not see a map - only a form for map with +- buttons. What could be a problem?

I configured both the openlayers and leaflet, but it seems that this programs seek wrong folder/folder/file.png names on coordinates I provide. But I have no idea how to set this names in Maperative, I see many people generate tiles using mapnik, but as I understand, to do this I need to set up a database and something else. Maybe there is an easier method?

Improve this question

2 Answers 2

Reset to default
1

You better specify the full path to the tiles. In Openlayers I added these lines:

    var MyMapnikLayer = new OpenLayers.Layer.OSM("myMapnik", "file:///D:/Tiles/myMapnik/${z}/${x}/${y}.png", {numZoomLevels: 16, alpha: true, isBaseLayer: true, visibility: false});
    map.addLayer(MyMapnikLayer);

This is for Windows; Linux and Mac might have different ways to give absolute paths.

You can also take a look at the error console of your browser to see if something else is wrong.

Improve this answer
3
  • No errors, after adding absolute path nothing changes, the same result. Can you provide me with your html file?
    – user1956641
    Jan 29, 2014 at 20:19
  • No need html, updated question.
    – user1956641
    Jan 29, 2014 at 20:55
  • Op, found mistakes. I mixed up longitude and latitude. Sorry for confusion.
    – user1956641
    Jan 29, 2014 at 21:11
1

Don't know how to resolve your script, but here's a simple page on my end that's shorter, doesn't need leaflet-src.js, and is working just fine:

<html>
<head>
<link rel="stylesheet" href="lib/leaflet.css" />
</head>
  <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 100%;
            width: 100%;
        }
    </style>
<body>
<div id="map"></div>
<script src="lib/leaflet.js"></script>
<script>
var map = L.map('map', {
    center: [18.512224413095872, 73.868436919390348],
    zoom: 12,
    minZoom: 8,
    maxZoom: 15,
    maxBounds: [
    [18.443790655688225, 73.741131698096311],
    [18.672919555595893, 73.955365096533811]
    ]
});
L.tileLayer('tiles/{z}/{x}/{y}.png', { attribution: 'Map tiles generated for local use by <a href="http://maperitive.net">Maperitive</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.' }).addTo(map);

/* //Uncomment this section if you want to get the longitude, latitude co-ordinates in a popup on clicking a point on the screen.
var popup = L.popup();
        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("" + e.latlng.toString())
                .openOn(map);
        }

map.on('click', onMapClick);
*/

</script>
</body>
</html>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.