JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<script src="https://openlayers.org/api/OpenLayers.js"></script>
<div id="mapdiv"></div>
<button onclick="alert(map.getCenter().transform(projmerc, proj4326).toString())">Show car position (map center)</button>

CSS

#mapdiv
    {
    width: 500px;
    height: 400px;
    }
.olControlPanel
    {
    display: block;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 90px;
    /* CAUTION: you will have to adjust the negative margins left and top to background image width and height */
    margin: -45px 0px 0px -25px;
    background-image:...

JavaScript

function init()
    {
    projmerc = new OpenLayers.Projection("EPSG:900913");
    proj4326 = new OpenLayers.Projection("EPSG:4326");
    map = new OpenLayers.Map("mapdiv",
        {
        //projection: projmerc,
        //displayProjection: proj4326,
        //controls:
        //    [
        //    new OpenLayers.Control.MousePosition(),
        //    new OpenLayers.Control.KeyboardDefaults(),
        //    new OpenLayers.Control.Navigation(),
        //    ],
        }
    );
    var maplayer = new OpenLayers.Layer.OSM("OpenStreetMap");
    map.addLayer(maplayer);
    var mapcenter = new OpenLayers.LonLat(51.338076, 35.699756);
    map.setCenter(mapcenter.transform(proj4326, projmerc), 14);
    map.setCenter(mapcenter, 14);
    var mappanel = new OpenLayers.Control.Panel();
    map.addControl(mappanel);
    }
window.onload = init;