JSFiddle - React, Tailwind, and code Playground

by Neeraj

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
<button onclick="getData();">Load MAP</button>
<div id="map" style="width: 500px; height: 400px"></div>

JavaScript

function getData() {
  var map = L.map('map').setView([55.4411764, 11.7928708], 12);
            L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
            }).addTo(map);
            map.doubleClickZoom.disable();
    
    var myMarker1 = L.circleMarker([55.4411764, 11.7928708], { title: 'unselected' });
    myMarker1.on('click', selectCircleMarker);
   myMarker1.addTo(map);
    var myMarker2 = L.circleMarker([55.4411764, 11.7928708], { title: 'unselected' });    
    myMarker2.on('click', selectCircleMarker);
                    myMarker2.addTo(map);
}

function selectCircleMarker(e) {
            var markerState = checkMarkerState(e.target);
             //    alert(markerState);
            if (markerState == true) {
                    //            alert("in false");
                    changeMarkerState(e.target, false);
            }
            else if (markerState == false) {
                changeMarkerState(e.target, true);
            }
        }

        function checkMarkerState(marker) {
            if (marker.options.title == 'unselected') {
                return false;
            }
            else if (marker.options.title == 'selected') {
                return true;
            }
        }

  function changeMarkerState(marker, select) {
                if (select) {
                    //        alert("in circle marker select");
                    marker.options.title = 'selected';
                    marker.setRadius(20);
                } else {
                    marker.options.title = 'unselected';
                    marker.setRadius(10);
                }

        }