[OpenLayers-Users] How to use OpenLayers with tiles generated
by mapnik
flavio rigolon
flavio.rigolon at gmail.com
Thu Apr 23 10:48:24 EDT 2009
>
> I have succeeded to generate tiles of my country using mapnik.
> I would like to know how to use OpenLayers to obtain a slippy map of my
> country in local .
>
>
Hi,
this is the code i'm using to load mapnik local tiles stored in
"/var/www/openlayer/tiles/" directory (in particular see the bold code):
------------------------------------
<html>
<head>
<title>Esempio di marker GML con identificazione degli attributi</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css"
/>
<link rel="stylesheet" href="../theme/default/framedCloud.css"
type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
#map {
width: 800px;
height: 600px;
border: 1px solid black;
}
.olPopup p { margin:0px; }
</style>
<script src="../lib/OpenLayers.js"></script>
<!--<script src="
http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>-->
<script src="../OpenStreetMap.js"></script>
<script type="text/javascript">
// Start position for the map (hardcoded here for simplicity,
// but maybe you want to get from URL params)
var lat=45.5060
var lon=11.41
var zoom=13
var map, layer;
var symbolizer = OpenLayers.Util.applyDefaults(
// {externalGraphic: "./balloon_blue_sh.png", pointRadius: 10},
{fillColor:'red', fillOpacity: 0.9, strokeColor: "orange",
strokeWidth: "6", strokeOpacity: 0.6},
OpenLayers.Feature.Vector.style["default"]);
styleMap = new OpenLayers.StyleMap({"default": symbolizer});
function init(){
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution()],
maxExtent: new
OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
//projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
*var newLayer = new OpenLayers.Layer.OSM("Mapnik at home", "
http://localhost/openlayer/tiles/", {numZoomLevels: 19});
map.addLayer(newLayer);*
map.addLayer(new OpenLayers.Layer.GML("Siti di interesse",
"siti_int.gml",
{styleMap: styleMap,
format: OpenLayers.Format.GML,
formatOptions: {
extractStyles: true,
extractAttributes: true
}
}));
map.addLayer(new OpenLayers.Layer.GML("GML lungo",
"../track/baciccio.gml", {styleMap: styleMap}));
map.addLayer(new OpenLayers.Layer.GML("GML corto",
"../track/data_track.gml", "#ff0000"));
// aggiunta della navtoolbar
var panel = new
OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
map.addControl(panel);
// fine aggiunta navtoolbar
selectControl = new OpenLayers.Control.SelectFeature(map.layers[1],
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
map.addControl(selectControl);
selectControl.activate();
//map.zoomToMaxExtent();
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new
OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter (lonLat, zoom);
}
function onPopupClose(evt) {
selectControl.unselect(selectedFeature);
}
// script per la visualizzazione degli attributi del file GML su un Ballon
function onFeatureSelect(feature) {
selectedFeature = feature;
for(var key in feature.attributes)
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,100), "<div
style='font-size:16'>"+feature.attributes.nome + "</div>" + "<div
style='font-size:13'>" + "descrizione: " +feature.attributes.descriz +
"</div>" + "<div style='font-size:13'>" +feature.attributes.img + "</div>",
null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
</script>
</head>
<body onload="init()">
<h1 id="title">Esempio di Layer GML</h1>
<div id="tags"></div>
<p id="shortdesc">
Caricamento e visualizzazione di un file GML su base OSM.
</p>
<div id="map" align="right"></div>
<!--aggiunta del navtoolbar -->
<div id="paneldiv" class="olControlNavToolbar"></div>
<!--fine aggiunta del navtoolbar -->
<div id="docs"></div>
</body>
</html>
------------------------------------------------------------
hope this help
flavio
--
io uso Debian GNU/Linux
user #413018 counter.li.org
<<usiamo formati aperti!>>
http://it.wikipedia.org/wiki/Formato_aperto
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20090423/30a7917d/attachment.html
More information about the Users
mailing list