JSFiddle - React, Tailwind, and code Playground

by mapmyindia_map

HTML

<script src="https://apis.mapmyindia.com/advancedmaps/v1/your_map_key_here/map_load?v=1.3&plugin=cluster"></script>
<link rel="stylesheet" href="https://www.mapmyindia.com/api/MarkerCluster.css" />
<link rel="stylesheet" href="https://www.mapmyindia.com/api/MarkerCluster.Default.css" />

<div style="border-bottom: 1px solid #e9e9e9;padding:10px 12px;"><span style="font-size: 20px">MapmyIndia Maps API:</span><span style="font-size:16px;color:#777">Cluster Example</span></div>
<div id="result">
  <div style="padding: 16px 12px 6px 38px"><button class="mapmyindia_redraw_cluster">Redraw Cluster</button></div>

  <div style="padding: 6px 12px 6px 38px"><button class="mapmyindia_add_marker" id="marker">Add marker</button></div>
  <div style="padding: 6px 12px 6px 38px"><button class="mapmyindia_add_markers" id="markers">Add markers</button></div>
  <div style="padding: 6px 12px 6px 38px"><button class="mapmyindia_clear_cluster">Clear Cluster</button></div>
  <div style="padding:14px 12px 6px 38px;color: #333;">Event Logs</div>
  <div style="padding:6px 12px 6px 38px;color: #777; font-size: 12px; line-height: 22px;" id="event-log"></div>
</div>
<div id="map-container"></div>

CSS

html {
   height: 100%;
 }

 body {
   height: 100%;
   font-family: Verdana, sans-serif, Arial;
   color: #000;
   margin: 0;
   font-size: 14px;
   padding: 0;
 }

 #map-container {
   position: absolute;
   left: 312px;
   top: 46px;
   right: 2px;
   bottom: 2px;
   border: 1px solid #cccccc;
 }

 #result {
   position: absolute;
   left: 2px;
   top: 46px;
   width: 306px;
   bottom: 2px;
   border: 1px solid #cccccc;
   background-color: #FAFAFA;
   overflow: auto;
   font-family: Verdana, sans-serif, Arial;
 }

 button {
   width: 220px;
   font-family: Verdana, sans-serif, Arial;
   font-size: 12px;
   padding: 2px 0;
   color: #333
 }

JavaScript

var map = null;
        var latitudeArr = [28.549948, 28.552232, 28.551748, 28.551738, 28.548602, 28.554603, 28.545639, 28.544339, 28.553196, 28.545842];
        var longitudeArr = [77.268241, 77.268941, 77.269022, 77.270164, 77.271546, 77.268305, 77.26480, 77.26424, 77.265407, 77.264195];
        var mark = [];
        var singlemarker = null;
        var markers = null;
        var marker_remove = true;
        var markers_remove = true;
        var markerClusters;
        window.onload = function() {
          var test_num_markers = 100;

          map = new MapmyIndia.Map('map-container', {
            zoomControl: true,
            hybrid: true,
            zoom: 10
          }); /*map initialized*/
          /*1.create a MapmyIndia Map by simply calling new MapmyIndia.Map() and passsing it at the minimum div object, all others are optional...
           2.all leaflet mapping functions can be called simply on the L object
           3.MapmyIndia may extend and in future modify the customised/forked Leaflet object to enhance mapping functionality for developers, which will be clearly documented in the MapmyIndia API documentation section.*/
          var test_num_markers = 100;
          //function to generate random markers//
          var generate_markers = function(num_markers) {
            var bounds = map.getBounds();
            var map_sw = bounds.getSouthWest();
            var map_ne = bounds.getNorthEast();
            var lng_span = map_ne.lng - map_sw.lng;
            var lat_span = map_ne.lat - map_sw.lat;
            var markers = [];
            markerClusters = L.markerClusterGroup({
              chunkedLoading: true,
              maxClusterRadius: 100,
              disableClusteringAtZoom: 26,
              singleMarkerMode: false,
              addRegionToolTips: false
            });
            /* by default the Cluster group some defaults:
            showCoverageOnHover: When you mouse over a cluster it shows the bounds of its...