CODEWITHSUNDEEP
openlayers
Orsi
Orsi

Reputation: 575

Open layers how to add map markers on Tile layer

I need to show a map marker in an OpenLayer map. I have more layers. This is how one layer looks like in code: 

 cite:geo_borneFiltered":
            var userId = $("#loggedInUserId").val();

            layers.push(
                new ol.layer.Tile({
                    title: overlays[i].Item2,
                    type: 'overlay',
                    preload: Infinity,
                    visible: false,
                    layer: overlays[i].Item1,
                    source: new ol.source.TileWMS({
                        crossOrigin: 'anonymous',
                        url: GeoServer + "/geoserver/gwc/service/",
                        params: { 'LAYERS': overlays[i].Item1, 'VERSION': '1.1.1', 'service': 'wms', 'tiled': true, viewparams: 'UserId:' + userId },
                        serverType: 'geoserver'
                    })
                })
            );
            break;
        case

Every solution that I found was for ol.layer.Vector, for example: https://jsfiddle.net/jonataswalker/ckfd9d1L/ I have Tile layers. Can you please advise if I can use the same solution as it is for Vector layers?

Upvotes: 0

Views: 1222

Answers (1)

sifriday
sifriday

Reputation: 4482

The approach is to use a Vector layer for your icons, and a Tile layer for your maps. Add the Tile layer first, then the Vector layer. This will put the Vector layer on top and it is transparent so it will look like the icons are on the map tiles. OpenLayers will take care of ensuring both layers pan and zoom together.

For an example showing a really similar approach to the fiddle you link, but working with a Tile layer underneath, have a look at this SO question that I answered a while ago:

OpenLayers onmousedown load image

For more precise control of layer ordering, have a look at z-index:

https://openlayers.org/en/latest/examples/layer-z-index.html

Upvotes: 0

Related Questions