[OpenLayers-Users] How to use OpenLayers with tiles generated by mapnik

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