CODEWITHSUNDEEP
javascriptopenlayers-3
kboul
kboul

Reputation: 14600

Polygon drawing upon map tiles where a custom tile server is used using Openlayers 3

Has anyone tried drawing a polygon in an area where local server tiles are used in Openlayers3?

For a specific area on the map I am using local server tiles to visualize a building's plan while for the rest stamen tiles are used.

The issue is that once the polygon is drawn it "gets lost - disapears" under the tiles probably. If I try to draw a polygon on the area "outside" the one that custom tiles are rendered everything is ok.

I played a bit with the zIndex in the custom tiles but no luck. Any ideas?

Upvotes: 2

Views: 350

Answers (1)

kboul
kboul

Reputation: 14600

I was trying to set the zIndex on both local tiles (to be lower than the drawn feature) and the drawn feature to be bigger than the local tiles but in the end as the drawn feature gets inserted into a Vector Layer I added a vector Layer on the map, set the zIndex there and once the polygon was drawn removed it using clear().

Thus,

Construct the vector Layer

var stamenTiles = new ol.layer.Tile({
    source: new ol.source.Stamen({
       layer: 'toner'
    })
});

var source = new ol.source.Vector(); //DRAWING
var vector = new ol.layer.Vector({ //DRAWING
   source: source,
   zIndex: 100 // place the Polygon on top of the local tiles
});

Map object: 

var map = new ol.Map({
    target: 'map',
    layers: [stamenTiles, vector],
    view: new ol.View({
        center: ol.proj.fromLonLat([CoordinatesFactory.getLongitude(), CoordinatesFactory.getLatitude()]),
        zoom: 19,
        minZoom: 19,
        maxZoom: 22
    })
});

Remove drawn vector layer

vector.getSource().clear();

Upvotes: 1

Related Questions