0

I am making a page with a slick slider that can slide between maps from Mapbox. The code works but after I add the 17th map, the first one doesn't show anymore (if 18th added the 1st-2nd don't show...). I can't seem to find a limit on their website for the free account. Is there a limit or does anyone know a fix? I cant add a loop in JavaScript because "container:" still adds a 17th and doesn't show the 1st.

    mapboxgl.accessToken = '...';

    var mapAustria = new mapboxgl.Map({
        container: 'mapAustria', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [14.763850, 47.222536], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapAustria2 = new mapboxgl.Map({
        container: 'mapAustria2', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [14.763850, 47.222536], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapHungary = new mapboxgl.Map({
        container: 'mapHungary', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [19.251680, 47.581940], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapEngland = new mapboxgl.Map({
        container: 'mapEngland', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [-1.010697, 52.071675], // starting position [lng, lat]
        zoom: 13.3 // starting zoom
    });

    var mapEngland2 = new mapboxgl.Map({
        container: 'mapEngland2', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [-1.010697, 52.071675], // starting position [lng, lat]
        zoom: 13.3 // starting zoom
    });

    var mapSpain = new mapboxgl.Map({
        container: 'mapSpain', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [2.257649, 41.568925], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapBelgium = new mapboxgl.Map({
        container: 'mapBelgium', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [5.970996, 50.440195], // starting position [lng, lat]
        zoom: 13.3 // starting zoom
    });

    var mapMonza = new mapboxgl.Map({
        container: 'mapMonza', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [9.289711, 45.621617], // starting position [lng, lat]
        zoom: 13 // starting zoom
    });

    var mapMugello = new mapboxgl.Map({
        container: 'mapMugello', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [11.371805, 43.997830], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var MapRussia = new mapboxgl.Map({
        container: 'MapRussia', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [39.967059, 43.408882], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var MapGermany = new mapboxgl.Map({
        container: 'MapGermany', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [6.940758, 50.333245], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapPortugal = new mapboxgl.Map({
        container: 'mapPortugal', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [-8.627975, 37.231833], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapImola = new mapboxgl.Map({
        container: 'mapImola', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [11.710237, 44.340919], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapTurkey = new mapboxgl.Map({
        container: 'mapTurkey', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [29.410273, 40.956887], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapBahrain = new mapboxgl.Map({
        container: 'mapBahrain', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [50.513280, 26.029234], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });

    var mapBahrain2 = new mapboxgl.Map({
        container: 'mapBahrain2', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [50.513280, 26.029234], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });
    /* if added doesn't work 
    var mapAbuDhabi = new mapboxgl.Map({
        container: 'mapAbuDhabi', // container id
        style: 'mapbox://styles/kili02/ckjroahc26vps19paqhy0e1tl', // style URL
        center: [54.611141, 24.471118], // starting position [lng, lat]
        zoom: 14.3 // starting zoom
    });
    */
Ed Lucas
  • 5,955
  • 4
  • 30
  • 42
Kilian_h
  • 1
  • 1

0 Answers0