Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I will try to explain what I need to do. I have about thirty KML polygons. I need to put them on some satellite map. On the top of these layers (KMLs, satellite) there must go layer with roads. I don't have any "roads" source. I don't care in which format are roads, my primary goal that these roads are on the top of all layers.

My question is what is the best opensource web mapping solution for this kind of a project? What "roads" layer would you use? Is it possible maybe to put Google ROADS map on the top of satellite imagery and KMLs? If it's not, can I use some vector and where I can find it? And how to put it on the top of other layers?

Please give me also some coding instructions.

Thank you for any help.


EDIT


This is the coding I wrote combining OpenLayers and Google Maps styled maps:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>Google styled map &amp; Openlayers</title>
    <!-- 
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
    <link href="http://openlayers.org/dev/theme/default/google.css" rel="stylesheet" type="text/css" />
    -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&amp;sensor=false"></script>
    <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>

    <script type="text/javascript">

    var map;




    var roadStylez = [ { "featureType": "administrative", "stylers": [ { "visibility": "off" } ] },{ "featureType": "landscape", "stylers": [ { "visibility": "off" } ] },{ "featureType": "poi", "stylers": [ { "visibility": "off" } ] },{ "featureType": "road", "stylers": [ { "visibility": "on" } ] },{ "featureType": "transit", "stylers": [ { "visibility": "off" } ] },{ "featureType": "water", "stylers": [ { "visibility": "off" } ] },{ } ];

    ////////
    var gmap = new OpenLayers.Layer.Google("Google Streets", {type: 'styled'} );

    var styledMapOptions = {
        name: "Styled Map"
    };

    var styledMapType = new google.maps.StyledMapType(roadStylez, styledMapOptions);


    //////


    var kml1 = new OpenLayers.Layer.Vector("KML", {
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "kmls/AirCallMobileCoverage.kml",
                format: new OpenLayers.Format.KML({
                    extractStyles: true, 
                    extractAttributes: true,
                    maxDepth: 2
                })
            })
            });


    var wms = new OpenLayers.Layer.WMS(
    "OpenLayers WMS",
    "http://vmap0.tiles.osgeo.org/wms/vmap0",
    {'layers':'basic'},
    { isBaseLayer: false}
    );


    function init() {

    map = new OpenLayers.Map('map');
    map.addControl(new OpenLayers.Control.LayerSwitcher())
    map.addLayers([wms, kml1, gmap]);


    map.setCenter(new OpenLayers.LonLat(20.556090, 12.121484).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()), 2);


    }   

    </script>
  </head>
  <body onload="init()">
    <h1 id="title">Google styled map &amp; Openlayers</h1>
    <div id="map" class="smallmap" style="width:800px;height:400px;border: 1px solid black;"></div>

  </body>
</html>

I can see wms layer and KML, but I can't see roads layer. What am I doing wrong?

share|improve this question
3  
Google Maps API - Fusion TABLES (storing KML) use the css z-index to place your roads on top - Roads can come from OpenStreetMap - quality depends on your location/area of interest with OSM. w3schools.com/cssref/pr_pos_z-index.asp –  Mapperz Aug 23 '12 at 15:59
add comment

1 Answer

up vote 7 down vote accepted

How about this:

OpenLayers +

  • any base map you want (or blank)
  • & your data layers
  • & GOOGLE MAPS layer with Custom Styles [search here on SE] as a data layer, not basemap

=> google maps custom styles created here:

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

and here's one style that seems to work ok:

Google Maps API v3 Styled Maps JSON [ { "featureType": "administrative", "stylers": [ { "visibility": "off" } ] },{ "featureType": "landscape", "stylers": [ { "visibility": "off" } ] },{ "featureType": "poi", "stylers": [ { "visibility": "off" } ] },{ "featureType": "water", "stylers": [ { "visibility": "off" } ] },{ "featureType": "road", "stylers": [ { "visibility": "on" } ] },{ } ]

enter image description here

share|improve this answer
    
Ok, thanks, and how to put that roads layer on top of KMLs? –  againstflow Aug 23 '12 at 17:01
    
You just add it in as a datalayer. Set baselayer attribute to be false. Only thing I don't know [I haven't tried, you should] if the Tiles from google will come in as transparent gif/png or will have that grey background. Hopefully for you they come in as transparent. –  Vadim Aug 23 '12 at 17:11
    
I just checked in firebug and looks like the tiles are transparent PNGs. So that's good for you. e.g. mt0.googleapis.com/… –  Vadim Aug 23 '12 at 17:14
    
Thanks, I'll try it and I'll let you know how it goes. –  againstflow Aug 23 '12 at 18:18
    
I added coding in my question so please check it. Thanks. –  againstflow Aug 23 '12 at 20:15
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.