You are here:   GIS Web Map Tutorial > Adding Markers
  |  Login

Adding Markers

   Minimize

The markers have a little overhead to go along with them in OpenLayers.  This overhead is good in the long run because it gives us more control over them than in some other APIs that limit control.  Our first step is to create a layer for the markers which we will have to add a style to.  Then we will create the point that the marker will be located at and then the marker.  Once we have that we will add a few attributes to the marker which we will use later when we create the popup for the marker.  The last two things we need to do will be adding the marker to the layer then adding the layer to the map.  Let's start with the style and layer as follows adding it directly under where you added the kmlLayer to the map before you se

     var styleMapBlue = new OpenLayers.StyleMap(
		{pointRadius: 15,
                 externalGraphic: 'images/blue-circle.png'
                });                                                    

     var bluelayer = new OpenLayers.Layer.Vector('blue', 
                {
                 styleMap: styleMapBlue 
                });

 Now the point and the marker with the point 

     var point = new OpenLayers.Geometry.Point(-86.57, 34.65);
     var marker = new OpenLayers.Feature.Vector(point);

 We will add the attributes 

     marker.attributes.name = "Center of our map";
     marker.attributes.description = "This is the center of our map!";

 And finally add the marker to the layer then the layer to the map.

     bluelayer.addFeatures([marker]);
     map.addLayer(bluelayer);

Save this as webmap4.html your code should look like the following

<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;

// Avoid pink error tiles
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
OpenLayers.Util.onImageLoadErrorColor = "transparent";

  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'});

     var nexrad = new OpenLayers.Layer.WMS("Nexrad",
       "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?",
       {   layers:"nexrad-n0r-wmst",Time: '2011-12-25T09:45:00Z', 
           transparent:true
        }, {isBaseLayer: false, opacity:.5});

     var kmlLayer = new OpenLayers.Layer.Vector("KML", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "monte-sano-state-park.kml",
                format: new OpenLayers.Format.KML({
                    extractStyles: true, 
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
        })

     map.addLayers([nexrad, mapbase]);
     map.addLayer(kmlLayer);



     var styleMapBlue = new OpenLayers.StyleMap(
		{pointRadius: 15,

                 externalGraphic: 'images/blue-circle.png'

            	});                                                    

     var bluelayer = new OpenLayers.Layer.Vector('blue', 

             	{

               	  styleMap: styleMapBlue 

           	});
     var point = new OpenLayers.Geometry.Point(-86.57, 34.65);
     var marker = new OpenLayers.Feature.Vector(point);

     marker.attributes.name = "Center of our map";

     marker.attributes.description = "This is the center of our map!";
     bluelayer.addFeatures([marker]);
     map.addLayer(bluelayer);

     map.setCenter(new OpenLayers.LonLat(-86.57, 34.65), 12); 
 }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

You may have notice that you are referencing an image that you don't have so let's fix that.  In your webmap directory on your desktop create a new folder named images.  Down load this file and save it in the new directory.  Now go back to your web server file manager click the New dir button and create the images directory.  After you created the directory and you click the arrow to go back to the manager you will see the new folder.  Click the new folder to go inside of it.  Click Upload then navigate to your image directory you just created that contains the image you just downloaded.  Select it and upload.  After uploading click the arrow to go back.  Click the Up... link by the folder to navigate up a level. Click Upload then navigate to the webmap4.html file and upload that.

You can now navigate a browser to that which will be the same address as before except you will change the 3 to a 4 as you did in the file name.  It should look exactly like mine.

Now let's tell people why we put a marker there by adding a popup.