You are here

Put Your Map Anywhere with Openlayers III--Use Multi-Maps&Layers

Openlyaers allow you combining several Map servers in onemap viewer.
In part I, I have introduced how to use Google, Yahoo,or Virtual Earth map. If you are the fans of them all, you will never miss such appilcation.

<html>
<head>
    <!-- this gmaps key generated for /sites/default/files/File/blog/gis/webgis/openlayers/-->
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAtJ5qpMrqIer...
6NbhTXEBOkwC6P1IWT8u71DO215oZilA'></script>
    <!-- Localhost key -->
    <!--<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem...
NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'></script>-->
    <script src="http://openlayers.org/dev/lib/OpenLayers.js"></script>
    <script type="text/javascript" src="http://clients.multimap.com/API/maps/1.1/metacarta_04"></script>
    <script src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid=euzuro-openlayers"></script>
    <script src='http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js'></script>

</head>
<body>
  <div style="width:500; height:400" id="map"></div>
  <script defer="defer" type="text/javascript">
    OpenLayers.ProxyHost="/proxy/?url=";
    var map = new OpenLayers.Map('map', {controls: [new OpenLayers.Control.PanZoomBar()]});
    map.addControl(new OpenLayers.Control.MouseToolbar());
    var ls = new OpenLayers.Control.LayerSwitcher();
    map.addControl(ls);
    ls.maximizeControl();
           //add multimap layer
            var mmlayer = new OpenLayers.Layer.MultiMap( "MultiMap", {minZoomLevel: 1});
           
//add it as basic map layer
            map.addLayer(mmlayer);
          
          
//add openlayers WMS
            var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                     "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
          
//add openplans WMS layer
            var     wmss = new OpenLayers.Layer.WMS( "OpenPlans WMS",
                "http://sigma.openplans.org:3128/geoserver/wms",
                            {layers: "topp:poly_landmarks,topp:water_polygon,topp:water_shorelines,topp:roads,topp:major_roads,topp:states,
                                          topp:countries,topp:gnis_pop",
                                         transparent: "false", format: "image/png", styles: "freemap_open_space,freemap_water,water_line,freemap_roads,freemap_major_roads,states_ol_sat,
world_countries,gnis_pop_ol"});
  
//add Nasa WMS
    var jpl_wms = new OpenLayers.Layer.KaMap( "Satellite (NASA)",
         "/world/index.php", {g: "satellite", map: "world"});
   
//add googlemap, VE, yahoo maps
    var google = new OpenLayers.Layer.Google("Google");
    var googles = new OpenLayers.Layer.Google("Google Satellite", { 'type': G_SATELLITE_MAP });
    var googleh = new OpenLayers.Layer.Google("Google Hybrid", { 'type': G_HYBRID_MAP });
    var ve = new OpenLayers.Layer.VirtualEarth("VirtualEarth", {'minZoomLevel': 0});
    var yahoo = new OpenLayers.Layer.Yahoo("Yahoo");

    map.addLayers([wms,wmss,jpl_wms, google,googles, googleh, ve,yahoo]);
    map.setCenter(new OpenLayers.LonLat(9.182057,48.832420), 6);
 
  </script>
</body>
</html>

<iframe
src="/sites/default/files/File/blog/gis/webgis/openlayers/multimaps.html"
width="500" height="400"
scrolling="no"
marginwidth="0" marginheight="0"
frameborder="0">
</iframe>

In this application, mapservers are used as basic map(layer), and one lay can be used as overlay to cover the basic map layer. There two preconditions, one is that the SRS(projection) of layers should be the same. For example Googlemap use EPSF:4326(WGS:84) as its Spatial Reference System, the covered map layer(as overlay) should have the same SRS. Sure, you can use different SRS, but your multi-map will look strange. The other is that the overlay could support tranparent, so that the covered layer can still be displayed through the overlay.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
        #map {
            width: 500px;
            height: 400px;
            border: 0px solid black;
        }
    </style>
    <script src="http://openlayers.org/dev/lib/OpenLayers.js"></script>
    <script type="text/javascript">
        <!--
        function init(){
            var map = new OpenLayers.Map('map', { controls: [] });

            map.addControl(new OpenLayers.Control.PanZoomBar());
            map.addControl(new OpenLayers.Control.MouseToolbar());
            map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
            map.addControl(new OpenLayers.Control.MousePosition());
            map.addControl(new OpenLayers.Control.OverviewMap());
           
            //set basic layer
            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://labs.metacarta.com/wms/vmap0",
                {layers: 'basic'} );

            //set overlay
            var dm_wms = new OpenLayers.Layer.WMS( "DM Solutions Demo",
                "http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
                {layers: "bathymetry,land_fn,park,drain_fn,drainage," +
                         "prov_bound,fedlimit,rail,road,popplace",
                 transparent: "true", format: "image/png" });

            dm_wms.setVisibility(false);

            map.addLayers([ol_wms, dm_wms]);
            if (!map.getCenter()) map.zoomToMaxExtent();
        }
        // -->
    </script>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>

<iframe
src="/sites/default/files/File/blog/gis/webgis/openlayers/multimapsOverlay.html"
width="500" height="400"
scrolling="no"
marginwidth="0" marginheight="0"
frameborder="0">
</iframe>

Now you can combine your WMS with Googlemap, VE or other map servers.

Blog: 

Comments

Hi,

this is indeed a very helpful thing that you have shown. I am using Mapserver and along with that i am using p.mapper as its interface. I am able to view all my shape files and i would like to have google maps as one of the base layer for my data. Can you help me in achieving that ?

i mean how do i embed your piece of code to achieve that.

thank you

samee

Hi,

Just in this article, the second example is what you need!


//set basic layer,you could use google map as your basic layer here,
the google map code example can be found in other example that has googlemap layer

var google = new OpenLayers.Layer.Google("Google");

//set overlay,replace the red font as your own parameters
var your_wms = new OpenLayers.Layer.WMS( "Your Map Server Name",
"your mapserver wms url",
{layers: "Your map layers," +
"Your map layers,",
transparent: "true", format: "image/png" });

dm_wms.setVisibility(false);

map.addLayers([google, your_wms]);
if (!map.getCenter()) map.zoomToMaxExtent();
}

Clear?

leelight

Thanks for the reply,

But specifically how do i use it with p.mapper ??? will it work with shape files overlayed ???

in which file of p.mapper do we need to append that code inorder to get the result as desired.

sorry for the trouble.

regards

samee

I have not used p.mapper, but I went to read its online document, it seems not use WMS as its interface to load the map. Openlayers is one WMS client, it relys on one WMS server.
I suggest that you could use UMN MapServer(did you use?) to build one WMS, and then use Openlayers as WMS client.

Thanks leelight,

Thanks for the attention u have given to this conversation. p.mapper as u know is just an interface built over UMN MapServer. so it retains all the functionality of Mapserver and above it giving a better UI and handling. and it supports wms capabilities as well. but can we have shape files overlayed over WMS output like we have KML files overlayed over Google Maps / Earth.???

Regards,

Samee

yes, you could use the shapefile as layers of WMS--I am not clear how to do that with UMN mapserver, but I am sure UMN can perform that well! And then you can overlay those layers on the Google map. If you have problem with UMN, you could try our SUAS Mapserver. Here is the tutorial.

how to openlayers display overviewmap using option

[quote=Anonymous]how to openlayers display overviewmap using option[/quote]
map.addControl(new OpenLayers.Control.OverviewMap());

This info is very applicable with Mapserver and along with p.mapper as its interface which I've been utilizing for quite sometime now. Just what we need for our project - - kratom leaves.

This piece of code, I seem to not get itto function as needed on my autoblog samurai

//set overlay,replace the red font as your own parameters
var your_wms = new OpenLayers.Layer.WMS( "Your Map Server Name",
"your mapserver wms url",
{layers: "Your map layers," +
"Your map layers,",

Can anybody see what i'm doing wrong?

What an awesome way to explain this-now I know eevyrthnig!