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.


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">
    <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",
    { 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);


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


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

  • 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

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:


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

  • 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
  • I added coding in my question so please check it. Thanks. – againstflow Aug 23 '12 at 20:15
  • Few thoughts: you should set the google layer as NOT baselayer flag; also the gmap style should be set AFTER you add it to the map gmap.mapObject.mapTypes.set('styled', styledMapType); gmap.mapObject.setMapTypeId('styled'); – Vadim Aug 23 '12 at 20:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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