JSFiddle - React, Tailwind, and code Playground

by oterral

HTML

<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css">
    <script src="http://openlayers.org/dev/lib/OpenLayers.js"></script>
   
    <div id="map" class="smallmap olMap"></div>

JavaScript

var lon = 5;
        var lat = 40;
        var zoom = 5;
        var map, layer;

            map = new OpenLayers.Map( 'map', {
               projection: new OpenLayers.Projection("EPSG:21781"),
               units: "m",
               allOverlays: true,                   
               maxExtent: new OpenLayers.Bounds(420000, 30000, 900000, 350000),
               resolutions: [650.0, 500.0, 250.0, 100.0, 50.0, 20.0, 10.0, 5.0 ,2.5, 2.0, 1.0, 0.5, 0.25, 0.1]
               });
            
var wms = new OpenLayers.Layer.WMS("vd",
               "http://wms.geo.admin.ch/",
        {
            srs: 'EPSG:21781',
            layers:  'ch.bafu.bundesinventare-jagdbanngebiete',
            format: 'image/png'
        }, {
            singleTile: true,
            ratio: 1,
            opacity: 0.7,
            isBaseLayer: false
        });


            map.addLayer(wms);
            map.addControl( new OpenLayers.Control.LayerSwitcher() );
map.zoomToMaxExtent();