JSFiddle - React, Tailwind, and code Playground

by Peter Johnson

JavaScript

var map = L.map( 'map' );

L.Map.prototype.panToOffset = function (latlng, offset, options) {
    var x = this.latLngToContainerPoint(latlng).x - offset[0]
    var y = this.latLngToContainerPoint(latlng).y - offset[1]
    var point = this.containerPointToLatLng([x, y])
    return this.setView(point, this._zoom, { pan: options })
}

function centerMap(){
    var contentWidth = $('main.content').width() / 2;
    map.panToOffset( currentCoords, [ contentWidth, 0 ] );
}

map.on( 'resize', centerMap );
var currentCoords = [ 7.746116, 98.778410 ];
var currentZoom = 14;

function mySetView( coOrds, zoom ){
    if( currentCoords ) currentCoords = coOrds;
    if( currentZoom ) currentZoom = zoom;
    map.setView( currentCoords, currentZoom );
    centerMap();
}

L.tileLayer.provider('OpenStreetMap').addTo(map);
mySetView( [ -41.278400, 174.776700 ], 14 );