1. Установка OpenLayers.

    Скачиваем библиотеку и распаковываем её в свой домашний каталог. Для нормальной работы достаточно скопировать файл OpenLayers.js и каталоги theme и img.

  2. Заготовка для карты.

    Создаём исходный файл, в который будет встроена карта. (OpenLayers поддерживает встраивание карт в любой блочный элемент html-кода с заданными размерами width и height ). Кроме этого нужно подключить скрипт из библиотеки OpenLayers: 
    				       <html>
					   <head>
					       <title>OpenLayers Example</title>
					       <script src = "OpenLayers/OpenLayers.js"></script>
					   </head>
					   <body>
					       <div style = "width:100%; height:100% id = "map"></div>	
					   </body>
					</html>

  3. Создание объекта, отображающего карту.

    Создаём объект, который будет отвечать за отображение карты: 
    					 map = new OpenLayers.Map('mapId'),
    В конструкторе объекта map использует аргумент – «mapId». Это ID блочного элемента html, в который будет отображаться карта. Устанавливаем координаты центра карты и начальный масштаб: 
    					lat = 54.915856,				
					lon = 37.99599,					
					zoom = 10,
    Преобразовываем координаты в нужную проекцию: 
    					lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),
    Задаём центр карты: 
    					 map.setCenter (lonLat, zoom);

  4. Создание переключателя слоёв.

    Создаём переключатель: 
    		  		  
					layerSwitcher = new OpenLayers.Control.LayerSwitcher(),
    Добавляем переключатель на карту: 
    					map.addControl(layerSwitcher);

  5. Добавление слоёв.

    Создаём слой WMS: 
    			  
					gasStation = new OpenLayers.Layer.WMS("RoadGasStation", "http://data1.geo.indorsoft.ru/geoserver/geoportal/wms?",
					    {transparent: 'true', layers: "geoportal:RoadGasStation", format: 'image/png'},
					    {isBaseLayer: false, visibility: false, projection: "EPSG:900913"}),
    Добавляем слой на карту: 
    					map.addLayers([osmMap,gasStation]);

  6. Готовый вариант.

    Смотреть >> 
    					<html>
					    <head>
                                                <meta charset="utf-8">
						<title>OpenLayers Example</title>						
						<script src="OpenLayers/OpenLayers.js"></script>
						<script type="text/javascript">
						    function init(){
						        var lat = 54.915856,
						            lon = 37.99599,
						            zoom = 10,
						            map = new OpenLayers.Map('map'),
						            osmMap = new OpenLayers.Layer.OSM("OpenStreetMap"),
						            lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),
						            layerSwitcher = new OpenLayers.Control.LayerSwitcher(),
						            gasStation = new OpenLayers.Layer.WMS("RoadGasStation",
						                "http://data1.geo.indorsoft.ru/geoserver/geoportal/wms?", {transparent: 'true', layers: "geoportal:RoadGasStation", format: 'image/png'},
						                {isBaseLayer: false, visibility: false, projection: "EPSG:900913"});
						            map.addLayers([osmMap,gasStation]);
						            map.setCenter (lonLat, zoom);
						            map.addControl(layerSwitcher);
						     }
						 </script>						 
					    </head>
					    <body onload="init()">
						<div style="width:100%; height:100%" id="map"></div>
					    </body>
					</html>