3

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.

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?

Improve this question
1
  • 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, 2012 at 15:59

1 Answer 1

Reset to default
7

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

Improve this answer
6
  • Ok, thanks, and how to put that roads layer on top of KMLs?
    – againstflow
    Aug 23, 2012 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, 2012 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, 2012 at 17:14
  • I added coding in my question so please check it. Thanks.
    – againstflow
    Aug 23, 2012 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, 2012 at 20:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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