You are here:   GIS Web Map Tutorial > Creating a map
  |  Login

Create Web Map

   Minimize

So far we have created an HTML template that can hold our GIS map.  We connected our web page to the OpenLayers API then initialized the HTML div to a map.  Assuming that you were able to follow the direction  you have just created your first web map!  Let's double check to make sure that your code matches mine.

<html> 
<head> 
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<style type="text/css">
	html { height: 100% }
 	body { height: 100%; margin: 0px; padding: 0px }
	#map_canvas { height: 100% }
</style>
<script>
var map;
  function initialize() {
     map = new OpenLayers.Map("map_canvas");
     var mapbase = new OpenLayers.Layer.WMS('OpenLayers WMS', 
       'http://vmap0.tiles.osgeo.org/wms/vmap0', 
       { layers: 'basic,coastline_01,depthcontour,priroad,secroad,clabel'});
     map.addLayer(mapbase);
     map.setCenter(new OpenLayers.LonLat(-86.57, 34.65), 12); 
} </script> </head> <body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

 If your page code matches mine you can move on to saving and viewing your work