JSFiddle - React, Tailwind, and code Playground

by shiv_veerashetty

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/src/easy-button.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://rawgit.com/tombatossals/angular-leaflet-directive/gh-pages/dist/angular-leaflet-directive.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/src/easy-button.js"></script>
<script>
var app = angular.module("myApp", ['leaflet-directive'])
.controller('myCtrl',myCtrl);
myCtrl.$inject = ['$scope', 'leafletData'];

  function myCtrl($scope, leafletData) {
 var location = {lat: 90, lng: 180};

 var mainMarker = {
                lat: location.lat,
                lng: location.lng,
                focus: true,
                draggable: false,
                myCustomProperty: 'myMainMarker',
                minZoom: 2,
        maxZoom: 16
        };

      var vm = angular.extend(this, {
            center: {
                lat: location.lat,
                lng: location.lng,
                zoom: 15,
                minZoom: 2,
        maxZoom: 16
            },
            markers: {
                mainMarker: angular.copy(mainMarker)
            },
            defaults: {
                zoomControl: false,
                minZoom: 2,
        maxZoom: 16
            },
            tiles: {
                url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
            }
        });
        
              function onLocationFound(e) {
            var radius = e.accuracy / 2;

            leafletData.getMap().then(function (map) {
            
            map.eachLayer(function(layer) {
            	
            	if (!(layer instanceof L.TileLayer) &&...

CSS

/* Styles go here */

.show-map {
  height: 400px;
}
.icon-text {
  position: absolute;
  top: 2px;
  right: 2px;
  color: #FFF;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  background-color: #1DE1E9;
  height: 21px;
  width: 21px;
  text-align: center;
}

#msg-box {
  height: 400px;
  overflow-y: auto;
}

.leaflet-bar button {
 border: 2px solid transparent !important;
 border-radius: 25px !important;

	height: 40px !important;
	width: 40px  !important;
}

.easy-button-button .button-state{

top: 5px;
}