JSFiddle - React, Tailwind, and code Playground

by luenwarneke

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://raw.githubusercontent.com/heigeo/leaflet.wms/gh-pages/dist/leaflet.wms.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div id="map" style="width: 100%; height: 100%;"></div>
<script>

	var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' +
			'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

  var opentopo = L.tileLayer('https://a.tile.opentopomap.org/{z}/{x}/{y}.png', {maxNativeZoom: 18,attribution: 'OpenTopoMap'});

	var map = L.map('map', {
    center: [-17.2210067,146.0405271],
    zoom: 9,
		layers: [opentopo]
	});
  
  var wmsLayer = L.tileLayer.wms('http://ows.mundialis.de/services/service?', {
    layers: 'TOPO-OSM-WMS'
}).addTo(map);

</script>