1

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/' +
                'rest/services/World_Topo_Map/MapServer">ArcGIS</a>'
            })
        ],
        url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
        'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
    }),
    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">
    <ul>
        <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>
    </ul>
</nav>

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 ? – Hicham Zouarhi Aug 31 '16 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 '16 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 '16 at 16:47
  • i added this code : – drissrais Aug 31 '16 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 '16 at 19:54
2

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); 
    }); 
    //yourVectorLayer.setVisible(true);
 });

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 – Hicham Zouarhi Sep 1 '16 at 11:06
  • Thank u Mr Hicham, but which check mark? – drissrais Sep 1 '16 at 11:28
  • @drissrais at the left of the answer under the upvote and downvote arrows – Hicham Zouarhi Sep 1 '16 at 11:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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