@jmaciasm: OpenLayers: Crear un mapa simple

martes, mayo 18, 2010

Más abajo podéis ver el código fuente de como crear un mapa simple con OpenLayers tirando de un servicio WMS. 

Recordad que tenéis que cargar la librería:  lib/OpenLayers.js

   1:  <html xmlns="http://www.w3.org/1999/xhtml">

   2:      <head>

   3:          <title>OpenLayers: Mapa Simple</title>

   4:          <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />

   5:          <link rel="stylesheet" href="style.css" type="text/css" />

   6:          <style type="text/css">

   7:              body {

   8:                  margin: 0;

   9:              }

  10:              #map {

  11:                  width: 100%;

  12:                  height: 100%;

  13:              }

14:

  15:              #text {

  16:                  position: absolute;

  17:                  bottom: 1em;

  18:                  left: 1em;

  19:                  width: 512px;

  20:              }

  21:          </style>

  22:          <script src="../lib/OpenLayers.js"></script>

  23:          <script type="text/javascript">

  24:              var map;

  25:              function init(){

  26:                  map = new OpenLayers.Map('map');

27:

  28:              var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",

  29:                      "http://labs.metacarta.com/wms/vmap0",

  30:                      {layers: 'basic'} );

31:

  32:                      map.addLayers([ol_wms]);

33:

  34:                      map.addControl(new OpenLayers.Control.LayerSwitcher());

  35:                  map.zoomToMaxExtent();

  36:              }

37:

  38:          </script>

  39:      </head>

  40:      <body onload="init()">

  41:          <div id="map"></div>

  42:      </body>

  43:  </html>

@jmaciasm