I'm working on a small application with OpenLayers 3. In my file.js, I have added these four base maps as shown below:

var mapquest = new ol.layer.Tile({
        source: new ol.source.MapQuest({layer: 'osm'}),
        visible: false,
        name: 'mapquest'
var bingmaps = new ol.layer.Tile({
    preload: Infinity,
    source: new ol.source.BingMaps({
      key: 'dY07ihXoIp15X3uz2p7u~XhaOOszGD1yRh0iA2siECg~ApUkGF8SU2HBMsmFOMX6wuknO-ehbjd919j8pD6Jg-fWqeJL97x3K3KtdApb7xTH',
      imagerySet: 'AerialWithLabels',
    visible: true,
    name: 'bingmaps'
var esri = new ol.layer.Tile({
    source: new ol.source.XYZ({
        attributions: [
            new ol.Attribution({
                html: 'Tiles &copy; <a href="http://services.arcgisonline.com/ArcGIS/' +
        url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
    visible: false,
    name: 'esri'
var stamen = new ol.layer.Group({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.Stamen({ 
                layer: 'watercolor' 
        new ol.layer.Tile({
            source: new ol.source.Stamen({ 
                layer: 'terrain-labels' 
    visible: false,
    name: 'stamen'

I've made visible: true for bingmaps as you can see. Then, in my file.html, I have made a list of these base maps so that the user can move from one to any other base map like he wants, as shown below:

<nav id="layers">
        <li><input type="radio" name="layer" value="bingmaps" checked>Bing Maps</li>
        <li><input type="radio" name="layer" value="mapquest">Mapquest OSM</li>
        <li><input type="radio" name="layer" value="esri">ESRI Maps</li>
        <li><input type="radio" name="layer" value="stamen">Stamen</li>

The Base map bingmaps is checked. After that, I converted four shapefiles to GeoJSON files, as shown:

var vectorSourceCentre = new ol.source.Vector({
    url: 'mysql_geojson/CENTRES.geojson',
    format: new ol.format.GeoJSON(),
    projection: 'EPSG:4261'

var vectorLayerCentre = new ol.layer.Vector({
    source: vectorSourceCentre,
    style: centreStyle

It's the same thing for the other shapefiles. I added them to the map:

var map = new ol.Map({
    target: 'map',
    controls: ol.control.defaults().extend([
        new ol.control.ScaleLine(),
        new ol.control.ZoomSlider()
    renderer: 'canvas',
    layers: [mapquest, bingmaps, esri, stamen, vectorLayerCentre, vectorLayerPba, vectorLayerHectometre, vectorLayerChambre],
    view: view

When I open the browser, I see my added layers on the base map bingmaps with no problem (bingmaps is what I've chosen as visible), but the problem is when I check any other base map such as ESRI maps or Stamen I don't see my GeoJSON layers any more.

How could I fix this?

  • I think it must be some related to the order of your layers, can you add the code where you change the base layer ? Aug 31, 2016 at 16:22
  • I think the problem is the ordering of your layers? The basemap should be added behind the vector layer. This could help: gis.stackexchange.com/questions/124760/…
    – Lars
    Aug 31, 2016 at 16:46
  • Should i have a code for changing basemaps? normally before i added the geojson layers, i was changing from a basemap to another one and it's working! Even after adding layers, changing basemaps is working but the added layers are shown only on bingmaps. Thks for replying.
    – drissrais
    Aug 31, 2016 at 16:47
  • i added this code :
    – drissrais
    Aug 31, 2016 at 18:46
  • var layers = map.getLayers(); layers.insertAt(0,bingmaps); layers.insertAt(1,mapquest); layers.insertAt(2,esri); layers.insertAt(3,stamen); layers.insertAt(4,vectorLayerCentre); layers.insertAt(5,vectorLayerPba); layers.insertAt(6,vectorLayerHectometre); layers.insertAt(7,vectorLayerChambre);
    – drissrais
    Aug 31, 2016 at 19:54

1 Answer 1


From your comment in the question, you use this function to change the base layer :

$('#layers input[type=radio]').change(function() { 
    var layer = $(this).val(); 
    map.getLayers().getArray().forEach(function(e) {
        var name = e.get('name'); 
        e.setVisible(name == layer); 

which does display the desired base layer but hides all the others to display your vector layer you'll have to add the commented line to it

  • @drissrais you're welcome :) don't forget to accept it with the little check mark Sep 1, 2016 at 11:06
  • Thank u Mr Hicham, but which check mark?
    – drissrais
    Sep 1, 2016 at 11:28
  • @drissrais at the left of the answer under the upvote and downvote arrows Sep 1, 2016 at 11:30

Your Answer

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

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