Howto real time tiles rendering with mapnik and mod python/index.html

From OpenStreetMap Wiki
Jump to navigation Jump to search

My exemple index.html file for openlayers and my setup 

<html xmlns="http://www.w3.org/1999/xhtml">
  <head> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
     <style type="text/css">
#map {
	left:0px;
        width: 100%;
        height: 92%;
        border: 0px;
        padding: 0px;
        position: absolute;
     }
body {
        border: 0px;
         margin: 0px;
         margin-bottom: 2px;

        padding: 0px;
        height: 100%;
     }	
#permalinks {
	    position: absolute;
	    bottom: 0px;
	    right: 10px;
	    text-align: right;
            z-index: 1008;
	    font-size:12px;
	}
#attributions {
	    position: absolute;
	    bottom: 0px;
	    left: 10px;
	    font-size:12px;
	    text-align: right;
            z-index: 1008;
	}
	a:link, a:visited {
	    color: #5ca5ff;
	    text-decoration: none;
	}

	a:hover {
	    color: #ffcc66;
	    text-decoration: none;
	}
li {
	    list-style-type: none;
	    display:table;
	}
    </style>
<script src="/libs/OpenLayers.js"></script>
<script src="/libs/styles.js"></script>
<script type="text/javascript">
<!--

var map;
function qs_init() {
  var params = {};
  var qs = location.search.substring(1, location.search.length);

  qs = qs.replace(/\+/g, ' ');
  var args = qs.split('&'); // parse out name/value pairs separated via &

  for (var i = 0; i < args.length; i++) {
    var pair = args[i].split('=');
    var name = decodeURIComponent(pair[0]);

    var value = (pair.length==2)? decodeURIComponent(pair[1]): name;
    params[name] = value;
  }
  return params;
}

function get_osm_url (bounds) {
  var res = this.map.getResolution();
  var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
  var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
  var z = this.map.getZoom();
  var limit = Math.pow(2, z);

  if (y < 0 || y >= limit)
    {
      return null;
    }
  else
    {
      return this.url + z + "/" + x + "/" + y + "." + this.type; 
    }
}

var epsg4326 = new OpenLayers.Projection("EPSG:4326");

function setMapCenter(center, zoom) {
   var numzoom = map.getNumZoomLevels();
   if (zoom >= numzoom) zoom = numzoom - 1;
   map.setCenter(center.clone().transform(epsg4326, map.getProjectionObject()), zoom);
}

function init()
{
  map = new OpenLayers.Map('map',
			   {
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
		numZoomLevels:19,
                maxResolution: 156543.0399,
		units:'m',
		projection: new OpenLayers.Projection("EPSG:900913"),
		displayProjection: new OpenLayers.Projection("EPSG:4326"),
			       controls:[ new OpenLayers.Control.PanZoomBar(),
					  new OpenLayers.Control.Navigation(),
					  new OpenLayers.Control.Attribution(),
					  new OpenLayers.Control.MouseDefaults(),
					  new OpenLayers.Control.Permalink("permalink"),
					  new OpenLayers.Control.LayerSwitcher(),
					  new OpenLayers.Control.MousePosition()
					  ]
			       });

  var permalink_potlatch = new OpenLayers.Control.Permalink("permalink.potlatch");
  permalink_potlatch.base = "http://www.openstreetmap.org/edit";
  map.addControl(permalink_potlatch);

/* Base layers inclusion */
  var layers = [];

/* Here is you want to add the mapnik@osm.org layer by default */
  var l = new OpenLayers.Layer.TMS( 
          "Mapnik@osm.org", 
          ["http://tile.openstreetmap.org/"],
          {type:'png',
          getURL: get_osm_url,
	  transitionEffect: 'resize',
          displayOutsideMaxExtent: true }, {'buffer':1} );
  layers.push(l);

/* Automatic inclusion of all base layers in /libs/styles.js */
  for ( var idx in all_available_styles ) {
      var name = all_available_styles[idx];
      var l = new OpenLayers.Layer.TMS( 
          name, 
          ["/tiles/renderer.py/"+idx+"/"],
          {type:'jpeg',
          getURL: get_osm_url,
	  transitionEffect: 'resize',
          displayOutsideMaxExtent: true }, {'buffer':1} );
      layers.push(l);
  }

/* 
   Automatic inclusion of all overlays layers in /libs/styles.js 
   Transparent overlays (must be png with alpha channel) 
*/
   for ( var idx in all_available_overlays ) {
      var name = all_available_overlays[idx];
      var overlay = new OpenLayers.Layer.TMS( 
          name, 
          ["/tiles/renderer.py/"+idx+"/"],
          {type:'png',
          getURL: get_osm_url, 
          displayOutsideMaxExtent: true , 'buffer':1, isBaseLayer: false, visibility: false} );
      layers.push(overlay);
  }

  map.addLayers(layers);

  var params = qs_init();
  if (! (params["lat"] || params["lon"] || params["zoom"])) {
    setMapCenter(new OpenLayers.LonLat(2.3,48.8), 7);
  }
}
 // -->
 </script>

 </head>


<!-- content -->
<body onload="init()">
<div id="map"></div>

<div id="attributions">
<p>
Copyright : <a href="http://www.openstreetmap.org">openstreetmap.org</a> & contributors CC-BY-SA.
</p>
</div>
<div id="permalinks">
      <ul>
        <li><a id="permalink" href="">Permalink</a></li>
        <li><a id="permalink.potlatch" href="">Edit on Potlatch</a></li>
      </ul>
    </div>

</body>

</html>
Retrieved from "https://wiki.openstreetmap.org/w/index.php?title=Howto_real_time_tiles_rendering_with_mapnik_and_mod_python/index.html&oldid=455565"