JSFiddle - React, Tailwind, and code Playground

JavaScript

<script type="text/javascript">
//this is my map code thus far

var changeLayerStatus;
$(document).ready(function() {
				var mapx = 5120;
				var mapy = 4096;
				w_offset = 0;
				h_offset = 0;
				var extent = [0, 0, mapx, mapy];
				var projection = new ol.proj.Projection({
				  code: 'xkcd-image',
				  units: 'pixels',
				  extent: extent
				});
				
				var source = new ol.source.ImageStatic({

						url: 'assets/map/map.jpg',
						projection: projection,
						imageExtent: extent
					  });


				source.on('imageloadstart', function(event) {
				     $("#progress").show();
					});
				source.on('imageloadend', function(event) {
					$("#progress").hide();		
				});
				source.on('imageloaderror', function(event) {
					$("#progress").hide();			
				});
				
					// ***following 4 vars are temp, test point for town 1
					var npctowns = [
						[ 533, mapy-966 ],
						[ 833, mapy-1766 ],
						[ 2000, mapy-500 ],
						[ 1500, mapy-1700 ]
					
					];
					for (var i = 0; i < npctowns.length; i++) {
						
						var lon = npctowns[i][0];
						var lat = npctowns[i][0];
							
						var npcTownIcons = new ol.Feature({
							geometry: new ol.geom.Point([lon,lat])
						});
						var iconStyle = new ol.style.Style({
							image: new ol.style.Icon ({
							anchor: [0, 0],
							anchorXUnits: 'pixels',
							anchorYUnits: 'pixels',
							opacity: 1,
							src: 'assets/img/icons/Town.gif'
							})
						});
						var vectorSource = new ol.source.Vector({
							features: [npcTownIcons]
							});
						var vectorLayer = new ol.layer.Vector({
							source: vectorSource
							});
							
					};

						
				//map
				var map = new ol.Map({
				  interactions: ol.interaction.defaults({mouseWheelZoom:true}),
				  allOverlays: true,
				  controls:[],
				  layers: [
					new ol.layer.Image({
					  source: source
					}),
					vectorLayer
				  ],
				  target: 'map',
				  view: new ol.View({
					projection: projection,
					center:...