JSFiddle - React, Tailwind, and code Playground

by Kyros Koh

HTML

<!DOCTYPE html>
  <html>
  <head>
    <meta charset=utf-8 />
    <title>Leaflet Esri (Dojo): New OneMap</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <!-- Load Leaflet from CDN-->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

    <script src="http://cdn.onemap.sg/leaflet/onemap-leaflet.js"></script>

    <!-- Load Esri Leaflet from source-->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.3/esri-leaflet.js"></script>

    <!--load dojo-->
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"></script>

    <style>
      body {
        margin:0;
        padding:0;
      }

      #map {
        position: absolute;
        top:0;
        bottom:0;
        right:0;left:0;
      }

    </style>
  </head>
  <body>
    <div id="map"></div>
  <script>
  	var center = L.bounds([1.56073, 104.11475], [1.16, 103.502]).getCenter();
		var map = L.map('mapdiv').setView([center.x, center.y], 12);
    var basemap = L.tileLayer('https://maps-{s}.onemap.sg/v3/Default/{z}/{x}/{y}.png', {
            detectRetina: true,
						attribution: 'New OneMap | Map data © contributors, <a href="http://SLA.gov.sg">Singapore Land Authority</a>',
						maxZoom: 18,
            minZoom: 11
					});

          map.setMaxBounds([[1.56073, 104.1147], [1.16, 103.502]]);

					basemap.addTo(map);
          
    require(["dijit/form/Button", "dojo/dom", "dojo/domReady!"], function(Button, dom) {
      // Create a button programmatically:
      var myButton = new Button({
        label: "Click me!",
        onClick: function() {
          // Do something:
        }
      }, "progButtonNode").startup();
    });

  </script>

  </body>
  </html>