JSFiddle - React, Tailwind, and code Playground

by Anders Finn Jørgensen

HTML

<link rel="stylesheet" href="http://openlayers.org/en/v3.0.0/css/ol.css">
<script src="http://openlayers.org/en/v3.0.0/build/ol.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.3/proj4.js"></script>
<body>hello world
    <div id="map"></div>
</body>

CSS

#map {
    height: 400px;
    width: 400px;
    background-color:'#333';
}

JavaScript

var myProjectionName = "EPSG:25832";
proj4.defs(myProjectionName,
    "+proj=utm +zone=32 +ellps=GRS80 +units=m +no_defs");

var centerPosition = [714844, 6178000];

// Version 1.

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(

    function (pos) {
        centerPosition = ol.proj.transform(
        [position.coords.longitude,
        position.coords.latitude],
            'EPSG:4326',
        myProjectionName);
    },

    function (err) {
        centerPosition = [724844, 6178000];
    }, {
        enableHighAccuracy: false,
        timeout: 5000,
        maximumAge: 1000
    });
}
/* */
// END version 1

// Version 2
/*
var proj1 = ol.proj.get(myProjectionName);
 var geolocation = new ol.Geolocation({
                             projection: proj1
                       });
 var centerPosition= geolocation.getPosition();
/* */
// END version 2



var tileGridAvalon = new ol.tilegrid.WMTS({
    origin: [430000, 6000000],
    resolutions: [1524, 128, 8, 0.5, 0.05],
    matrixIds: [1, 2, 3, 4, 5]
});

var Skaermkort = new ol.layer.Tile({
    opacity: 1,
    extent: [430000, 6000000, 893000, 6405000],
    minResolution: 0.05,
    maxResolution: 1525,
    source: new ol.source.TileWMS({
        tileGrid: tileGridAvalon,
        style: 'default',
        urls: ["http://a.kortforsyningen.kms.dk/topo_skaermkort"],
        params: {
            layers: 'dtk_skaermkort',
            styles: "default",
            format: "image/png",
            TRANSPARENT: 'FALSE',
            login: 'andersfinnts',
            password: 'telia1234'
        }
    })
});

var map = new ol.Map({
    target: 'map',
    layers: [Skaermkort],
    view: new ol.View({
        projection: myProjectionName,
        center: centerPosition,
        resolutions: [1524, 128, 8, 0.5, 0.05],
        resolution: 8
    })
});