JSFiddle - React, Tailwind, and code Playground

by Thomas B.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>
<script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<script src="http://epsg.io/3006.js"></script>

<div id="maps"></div>

CSS

.ol-zoomslider, .ol-zoom {
            background-color: white;
            right:20px;
            border-radius:0;
            left:auto;
            top:20px;
            font-size:30px;
        }

        .ol-zoom:hover{
            background: #fff;
        }

        .ol-control button {
            background-color:#000;
        }
        .ol-full-screen {
            visibility: hidden;
        }
        .ol-attribution {
            visibility: hidden;
            display:none;
        }
        .ol-control button:hover,.ol-control button:focus{
            background-color:#fff;
        }
        #maps {
            border: solid 5px #aaaaaa;
        }
        .ol-zoom .ol-zoom-in {
        //border-radius:0;
            color:black;
            background:white;
            border-top: 2px #8abc00;

        }
        .ol-zoom .ol-zoom-out {
            border-radius:0;
            color:black;
            background:white;
        }

        .ol-control button{

            border-top:2px;
            border-color: #8abc00
        }

        .ol-has-tooltip [role=tooltip]{
            display:none !important;
        }
        .ol-control button:hover,.ol-control button:focus{
            background-color: #f2f2f2;
        }

        .ol-has-tooltip [role=tooltip] {
            display:none;
        }

        .ol-compass, .ol-rotate{
            display:none;
        }

JavaScript

var oLayers = "ST:background";

    var oURL = "http://gis.skanetrafiken.se/wmspublic/service/wms?";

    var oProjection = "EPSG:3006";

    var oScales = [4000,8000,15000,30000,90000, 120000, 180000, 250000, 500000];

    var screenDPI = 95;
    var IPM = 39.37;

    var resolutions = [];
    for (var i = oScales.length-1; i >= 0;--i) {
        resolutions.push(oScales[i] / (screenDPI * IPM));
    }

    var extent=[181896.33,6101648.07,864582.51,7688373.92];

    var projection = new ol.proj.Projection({
        code: oProjection,
        units: "m",
        extent: extent
    });

    //ol.proj.addProjection(projection);

    var layers = [
        new ol.layer.Tile({
            extent: extent,
            source: new ol.source.TileWMS({
                url: oURL,
                params: {'LAYERS':oLayers,
                'SRS' : "EPSG:3006"}
            })
        })
    ];


    var view = new ol.View({
        projection: projection,
        center: ol.proj.transform([13.0, 55.6], 'EPSG:4326', oProjection),
        resolutions: resolutions,
        extent: extent,
        zoom: 0
    });

    var map = new ol.Map({
        layers: layers,
        target: 'maps',
        view: view
    });