Edit in JSFiddle


/************************* CARTE PRINCIPALE *************************/

var map = new ol.Map({
    layers: [],
    controls: ol.control.defaults({
        zoom: true,
        attribution: true,
        rotate: true
    }),
    target: 'map',
    view: new ol.View({
        center: [287963,5948655],
        zoom: 6
    })
});

/************************* ZONES CALCULÉES *************************/

var zonesStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'blue',
        lineDash: [4],
        width: 3
    }),
    fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 0.1)'
    })
});

var zonesLayer = new ol.layer.Vector({
    title: "Zones calculées",
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: 'https://vectortiles.ign.fr/demonstrateur/data/zones.geojson',
        projection: 'EPSG:3857'
    }),
    style: function(feature) {
        return zonesStyle;
    }
});

/************************* PLAN IGN VECTEUR *************************/

var layerPIGN = new ol.layer.VectorTile({
    title: "Plan IGN vecteur",
    source: new ol.source.VectorTile({
        tilePixelRatio: 1,
        tileGrid: ol.tilegrid.createXYZ({maxZoom: 21}),
        format: new ol.format.MVT(),
        projection: new ol.proj.Projection({code:"EPSG:3857"}),
        url: "https://vectortiles.ign.fr/rok4server/1.0.0/PLAN.IGN/{z}/{x}/{y}.pbf"
    }),
    minResolution : 0,
    maxResolution : 200000,
    declutter: true
});

var defaultUrl = "https://vectortiles.ign.fr/demonstrateur/styles/planign.json";
var styleName = defaultUrl.substring(defaultUrl.lastIndexOf('/') + 1);

fetch(defaultUrl).then(
    function(response) {

        if (response.ok) {
            response.json().then(
                function(style) {
                    olms.applyStyle(layerPIGN, style, "plan_ign").then(function () {
                        map.addLayer(layerPIGN);
                       // map.addLayer(zonesLayer);
                        document.getElementById('applied-style').innerHTML = styleName;
                    });
                }
            )
            .catch(function (error) {
                console.error(error);
                map.addLayer(layerPIGN);
              //  map.addLayer(zonesLayer);
                document.getElementById('applied-style').innerHTML = "No style";
            });
        }
    }
);

/************************* LAYER SWITCHER *************************/

// Sélectionneur de couche (bien mettre un title)
var layerSwitcher = new ol.control.LayerSwitcher({
    tipLabel: 'Couches' // Optional label for button
});
map.addControl(layerSwitcher);

/************************* AFFICHAGE NIVEAU *************************/

// Affichage du niveau en haut à gauche
map.on("moveend", function() {
    var zoom = map.getView().getZoom(); 
    var zoomInfo = zoom;
    document.getElementById('zoomlevel').innerHTML = zoomInfo;

    if (zoom >= 10) {
     //   zonesLayer.setVisible(false);
    } else {
     //   zonesLayer.setVisible(true);
    }
});

/************************* INFO BULLE *************************/

var popup = new ol.Overlay.Popup();
map.addOverlay(popup);
map.on("click", function(evt) {
    if (popup.isOpened()) {
        popup.hide();
    } else {
        popup.setOffset([0, 0]);

        // Attempt to find a feature in one of the visible vector layers
        var content = "";
        var first = true;
        map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {

            if (layer["values_"].title !== "Zones calculées") {
                if (first) {
                    first = false;
                } else {
                    content += "<hr>";
                }
                var props = feature.getProperties();
                content += "<div class=\"popupfeature\">";
                for (var key in props) {
                    if (props.hasOwnProperty(key)) {
                        content += "<b>" + key + "</b> : " + props[key];
                        content += "<br>";
                    }
                }
                content += "</div>";
            }
        });

        if (content !== "") {

            var coord = evt.coordinate;
            // Offset the popup so it points at the middle of the marker not the tip
            popup.setOffset([0, 0]);
            popup.show(coord, content);
        }
    }
});

/************************* CHANGEMENT STYLE *************************/

function renderStyleFile(fichierStyle){

    var ind = fichierStyle.name.lastIndexOf('/');
    if (ind === undefined) {ind = -1};
    var styleName = fichierStyle.name.substring(ind + 1);

    var reader = new FileReader();
    
    reader.onload = function(event) {
        var content = event.target.result;
        
        olms.applyStyle(layerPIGN, content, "plan_ign");
        document.getElementById('applied-style').innerHTML = styleName;
    }
    
    reader.readAsText(fichierStyle);
}

function renderStyleRemote(url){

    var ind = url.lastIndexOf('/');
    if (ind === undefined) {ind = -1};
    var styleName = url.substring(ind + 1);

    fetch(url).then(
        function(response) {

            if (response.ok) {
                response.json().then(
                    function(style) {
                        olms.applyStyle(layerPIGN, style, "plan_ign");
                        document.getElementById('applied-style').innerHTML = styleName;
                    }
                )
                .catch(function (error) {
                    console.error(error);
                });
            }
        }
    );
}

$("#browse-input").change(function() {
    renderStyleFile(this.files[0]);
});

$("#style-planign").on('click', function () {
    renderStyleRemote("https://vectortiles.ign.fr/demonstrateur/styles/planign.json");
});

$("#style-gris").on('click', function () {
    renderStyleRemote("https://vectortiles.ign.fr/demonstrateur/styles/gris.json");
});

$("#style-muet").on('click', function () {
    renderStyleRemote("https://vectortiles.ign.fr/demonstrateur/styles/muet.json");
});
<div id="map"></div>

<div id="zoomlevel"></div>

<div id="switchstyle">
  <label for="browse-input" id="browse-label">Choisir un style en local...</label><input type="file" accept="application/json" id="browse-input" size="30">
  <span title="Style plan IGN"><input class="predefined-styles" type="image" src="https://vectortiles.ign.fr/demonstrateur/images/style-planign.png" id="style-planign"/></span>
  <span title="Style niveaux de gris"><input class="predefined-styles" type="image" src="https://vectortiles.ign.fr/demonstrateur/images/style-gris.png" id="style-gris"/></span>
  <span title="Style muet"><input class="predefined-styles" type="image" src="https://vectortiles.ign.fr/demonstrateur/images/style-muet.png" id="style-muet"/></span>
  &#187;<span title="Style appliqué" id="applied-style"></span>
</div>
html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}

#map {
    width: 100%;
    height: 100%;
}

#zoomlevel {
    position: fixed;
    text-align: center;
    top: 30px;
    left: 50px;
    height: 100%;
    font-size: 20;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

#switchstyle {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(255,255,255,.4);
    border-radius: 4px;
    padding: 4px;
}

#browse-label {
    vertical-align: middle;
    cursor: pointer;
    color: white;
    background-color: rgba(0,60,136,.5);
    border: 3px solid rgba(255,255,255,.5);
    border-radius: 4px;
    padding: 4px;
}
#browse-label:hover {
    background-color: rgba(0,60,136,0.7);
}

#browse-input {
    display: none;
}

input.predefined-styles {
    vertical-align:middle;
}

div.popupfeature {
    padding: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
}


/* Openlayers controls buttons */
.ol-rotate {
    top: 4.5em;
    left: .5em;
    right: auto;
}

.ol-zoom {
    top: .5em;
    left: .5em;
}

.layer-switcher button {
    background-image: url("https://vectortiles.ign.fr/demonstrateur/css/layer-switcher.png");
    opacity:0.5;
}