<br><div class="gmail_quote"><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div dir="ltr"><br>I have succeeded to generate tiles of my country using mapnik.<br>
I would like to know how to use OpenLayers to obtain a slippy map of my country in local .<br><br></div></blockquote></div><br>Hi,<br> 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):<br>
<br>------------------------------------<br><html><br><head><br> <title>Esempio di marker GML con identificazione degli attributi</title><br> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /><br>
<link rel="stylesheet" href="../theme/default/framedCloud.css" type="text/css" /><br> <link rel="stylesheet" href="style.css" type="text/css" /><br>
<style type="text/css"><br> #map {<br> width: 800px; <br> height: 600px; <br> border: 1px solid black;<br> }<br> .olPopup p { margin:0px; }<br> </style><br>
<script src="../lib/OpenLayers.js"></script><br> <!--<script src="<a href="http://www.openstreetmap.org/openlayers/OpenStreetMap.js">http://www.openstreetmap.org/openlayers/OpenStreetMap.js</a>"></script>--><br>
<script src="../OpenStreetMap.js"></script><br><br><br> <script type="text/javascript"><br> // Start position for the map (hardcoded here for simplicity,<br> // but maybe you want to get from URL params)<br>
var lat=45.5060<br> var lon=11.41<br> var zoom=13<br> var map, layer;<br><br> var symbolizer = OpenLayers.Util.applyDefaults(<br>// {externalGraphic: "./balloon_blue_sh.png", pointRadius: 10},<br>
{fillColor:'red', fillOpacity: 0.9, strokeColor: "orange", strokeWidth: "6", strokeOpacity: 0.6},<br> OpenLayers.Feature.Vector.style["default"]);<br> styleMap = new OpenLayers.StyleMap({"default": symbolizer}); <br>
<br> function init(){<br> map = new OpenLayers.Map ("map", {<br> controls:[<br> new OpenLayers.Control.Navigation(),<br> new OpenLayers.Control.PanZoomBar(),<br>
new OpenLayers.Control.LayerSwitcher(),<br> new OpenLayers.Control.Attribution()],<br> maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),<br>
maxResolution: 156543.0399,<br> numZoomLevels: 19,<br> units: 'm',<br> //projection: new OpenLayers.Projection("EPSG:900913"),<br> displayProjection: new OpenLayers.Projection("EPSG:4326")<br>
} );<br><br> <br> <br> <b>var newLayer = new OpenLayers.Layer.OSM("Mapnik@home", "<a href="http://localhost/openlayer/tiles/">http://localhost/openlayer/tiles/</a>", {numZoomLevels: 19});<br>
map.addLayer(newLayer);</b><br> <br><br><br> map.addLayer(new OpenLayers.Layer.GML("Siti di interesse", "siti_int.gml", <br> {styleMap: styleMap,<br> format: OpenLayers.Format.GML, <br>
formatOptions: {<br> extractStyles: true, <br> extractAttributes: true<br> }<br> <br> }));<br><br> <br> map.addLayer(new OpenLayers.Layer.GML("GML lungo", "../track/baciccio.gml", {styleMap: styleMap}));<br>
map.addLayer(new OpenLayers.Layer.GML("GML corto", "../track/data_track.gml", "#ff0000"));<br> <br> // aggiunta della navtoolbar<br> var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});<br>
map.addControl(panel);<br> // fine aggiunta navtoolbar<br><br><br> selectControl = new OpenLayers.Control.SelectFeature(map.layers[1],<br> {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});<br>
<br> map.addControl(selectControl);<br> selectControl.activate(); <br> //map.zoomToMaxExtent();<br><br> <br> var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());<br>
map.setCenter (lonLat, zoom);<br> <br> <br> }<br><br> function onPopupClose(evt) {<br> selectControl.unselect(selectedFeature);<br> }<br><br><br><br>// script per la visualizzazione degli attributi del file GML su un Ballon<br>
<br> function onFeatureSelect(feature) {<br> selectedFeature = feature;<br> <br> for(var key in feature.attributes)<br> <br> popup = new OpenLayers.Popup.FramedCloud("chicken", <br>
feature.geometry.getBounds().getCenterLonLat(),<br> 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);<br>
feature.popup = popup;<br> map.addPopup(popup);<br> }<br><br><br><br> function onFeatureUnselect(feature) {<br> map.removePopup(feature.popup);<br> feature.popup.destroy();<br>
feature.popup = null;<br> }<br><br> <br><br> </script><br> <br></head><br><body onload="init()"><br> <h1 id="title">Esempio di Layer GML</h1><br>
<br> <div id="tags"></div><br><br> <p id="shortdesc"><br> Caricamento e visualizzazione di un file GML su base OSM.<br> </p><br><br> <div id="map" align="right"></div><br>
<br> <br> <!--aggiunta del navtoolbar --><br> <div id="paneldiv" class="olControlNavToolbar"></div><br> <!--fine aggiunta del navtoolbar --><br> <div id="docs"></div><br>
</body><br></html><br><br clear="all">------------------------------------------------------------<br><br>hope this help<br>flavio<br><br>-- <br>io uso Debian GNU/Linux<br>user #413018 <a href="http://counter.li.org">counter.li.org</a><br>
<br><<usiamo formati aperti!>> <br><a href="http://it.wikipedia.org/wiki/Formato_aperto">http://it.wikipedia.org/wiki/Formato_aperto</a><br>