OpenLayers: two GeoJSON Layers, one transparent on both

Question

I have a GPX Track (Startpoint == Endpoint) converted to GeoJSON.
I now want to display this track on a map where only by the trac enclosed map shown. The rest should be white.

So far I have the following:

<script type="text/javascript">
  function init() {
    map = new OpenLayers.Map("basicMap");
    var mapnik         = new OpenLayers.Layer.OSM();

    var fromProjection = new OpenLayers.Projection("EPSG:4326");
    var toProjection   = new OpenLayers.Projection("EPSG:900913");
    var position       = new OpenLayers.LonLat(13.41,52.52).transform( fromProjection, toProjection);
    var zoom           = 7; 

    map.addLayer(mapnik);
    map.setCenter(position, zoom );

    geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", {
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: "tracks.json",
            format: new OpenLayers.Format.GeoJSON()
        })
    });

    map.addLayer(geojson_layer);
  }
</script>

tracks.json is the GeoJSON file with the trac.

Basicly now I want a rectangle around the trac. The space between trac and rectangle should be filled white.

Thank you for your help!

Show in the picture that you want. – winsent Oct 08 '12 at 13:04 — winsent, Oct 08 '12 at 13:04

score 0 · Accepted Answer · answered Dec 05 '12 at 11:12

Actually it was as simple as declaring a Polygon with two coordinate objects. One for the rectangle and one for the track:

var border = { 
"type": "Feature", 
"properties": { }, 
"geometry": { 
    "type": "Polygon", 
    "coordinates": [ 

        [
            [    
                Coordinates of Rectangle
            ]
        ],
        [
            [
                Coordinates of the track
            ]
        ]
    ]
  }
}

I includes this in my javascript:

 <script type="text/javascript" src="border.js"></script>
 .
 .
 var geojson_format  = new OpenLayers.Format.GeoJSON({
            'internalProjection': toProjection,
            'externalProjection': fromProjection
 });

 map.addLayer(vectorLayer);
 vectorLayer.addFeatures(geojson_format.read(border));

OpenLayers: two GeoJSON Layers, one transparent on both

1 Answers1