|  Login

Adding image overlays

   Minimize

When you add an image overlay you undoubtedly would want it to be in the right projection.  As we discussed we are using a base map wms from osgeo.  This wms is in epsg projection 4326 - wgs 84.  For more information about this projection you can go to http://spatialreference.org/ref/epsg/4326/.  Included in the information is a .PRJ File to help you reproject an overlay.  Once you get your image in the correct projection you can add it to your map with a few short lines of code as follows.

var graphic = new OpenLayers.Layer.Image(
                'Huntsville City',
                'images/testproj.png',
                new OpenLayers.Bounds(
					-86.623954, 
					34.697622, 
					-86.516847, 
					34.747184),
                new OpenLayers.Size(50, 23),
                {isBaseLayer: false}
            );
map.addLayer(graphic);

These lines of code you will add in the initialize function.  You might want to reorder how you add the layers so that your image doesn't cover your other features.  My code now looks like:

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

var popup;

  


// 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.addLayer( mapbase);
    
var graphic = new OpenLayers.Layer.Image(
                'Huntsville City',
                'images/testproj.png',
                new OpenLayers.Bounds(
-86.623954, 34.697622, -86.516847, 
34.747184),
                new OpenLayers.Size(50, 23),
                {isBaseLayer: false}
            );
     map.addLayer(graphic);
map.addLayer(nexrad);
     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);

     select = new OpenLayers.Control.SelectFeature([bluelayer], 
                                              {
                                                onSelect: onFeatureSelect, 
                                                onUnselect: onFeatureUnselect
                                               }
                                              );
     map.addControl(select);
     select.activate();

    

     map.setCenter(new OpenLayers.LonLat(-86.57, 34.65), 12); 
 }
 function onFeatureSelect(evt) 
 {
     var feature; 
     if(evt.feature)
     {
          feature = evt.feature;
     }
     else
     {
          feature = evt;
     }
     var point;
     try
     {
          point = feature.geometry.getBounds().getCenterLonLat();
     }
     catch(e)
     {
          try
          {
               point = evt.geometry.getBounds().getCenterLonLat();
          }
          catch(e2) {}
     }
     popup = new OpenLayers.Popup.FramedCloud("featurePopup",
                                    point,
                                    new OpenLayers.Size(100,100),
                                    "<h2>"+feature.attributes.name + "</h2>" +
                                    feature.attributes.description,
                                    null, true, onPopupClose);
     popup.maxSize = new OpenLayers.Size(400, 3000);
     feature.popup = popup;
     popup.feature = feature;
     map.addPopup(popup);
 }

 function onFeatureUnselect(evt) 
{
     var feature; 
     if(evt.feature)
     {
          feature = evt.feature;
     }
     else
     {
          feature = evt;
     }
     if (feature.popup) 
     {
          popup.feature = null;
          map.removePopup(feature.popup);
          feature.popup.destroy();
          feature.popup = null;
          try{
               map.removePopup(markers.popup);
          }
          catch(e){}
     }    

 }

 function onPopupClose(evt) 
 {
     select.unselectAll();
 }

</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

 Save your file as webmap6.html and upload it along with the image overlay.  It should look like mine.  Now that you have checked your work let's move on to Publishing to your blog