Re: [OSM-talk-fr] Inclure une carte OSM sur un site

Mon, 16 Jul 2007 05:28:08 -0700 

> C'est théoriquement possible avec OpenLayers. J'ai essayé à de
> nombreuses reprises sans parvenir à un résultat correct donc si tu y
> parviens, je suis preneur.

Il suffit de télécharger openlayers et de créer un page qui ressemble à ce
qui suit (cette carte est centrée sur dijon, il reste plus qu'à
personnaliser notamment le serveur de cache, ...) :

<html xmlns="http://www.w3.org/1999/xhtml";>
  <head>
    <style type="text/css">
        #map {
            width: 800px;
            height: 475px;
            border: 1px solid black;
        }
    </style>
<script type="text/javascript">
        var lon = "5.04";
        var lat = "47.30";
        var zoom = "11";
</script>
    <script src="lib/OpenLayers.js"></script>
  </head>
<script type="text/javascript">
<!--
        var PI = 3.14159265358979323846;
        lon = parseFloat(lon) * 20037508.34 / 180;
        lat = Math.log (Math.tan ((90 + parseFloat(lat)) * PI / 360)) /
(PI / 180);
        lat = lat * 20037508.34 / 180;
        var map;
    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 path = z + "/" + x + "/" + y + "." + this.type;
        var url = this.url;
        if (url instanceof Array) {
            url = this.selectUrl(path, url);
        }
        return url + path;
    }


        function init() {

                map = new OpenLayers.Map ("map", {
                        controls:[
                                new OpenLayers.Control.Permalink(),
                                new OpenLayers.Control.MouseDefaults(),
                                new OpenLayers.Control.LayerSwitcher(),
                                new OpenLayers.Control.MousePosition(),
                                new OpenLayers.Control.PanZoomBar()],
                        maxExtent: new OpenLayers.Bounds(
                                -20037508.34,
                                -20037508.34,
                                20037508.34,
                                20037508.34),
                        numZoomLevels:19, maxResolution:156543,
units:'meters', projection: "EPSG:41001"
                });



        map.addLayer(new OpenLayers.Layer.TMS("OpenStreetMap",
                ["http://osm-tah-cache.firefishy.com/~ojw/Tiles/tile.php/";],
                {type:'png', getURL: get_osm_url} ));
        var res = this.map.getResolution();
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.setCenter (new OpenLayers.LonLat(lon, lat), zoom);

        }

//-->
</script>

  <body onload="init()">
    <div id="map"></div>
  </body>
</html>



_______________________________________________
Talk-fr mailing list
[email protected]
http://lists.openstreetmap.org/cgi-bin/mailman/listinfo/talk-fr

Répondre à