Leaflet, point very closer don't appear

Question

I have been working with Leaflet and Tabletop.js. The main idea is put all the data in Google Spreadsheet and use Tabletop for reading that data and then show on Leaflet. Almost works fine, except for one issue: If the points are very closer (like 2 meters) I can't see two points, only the last one. There is some configuration for that?

When I created the map, i use this code:

    // Set view of Leaflet map based on screen size
    var layer = new L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
    if ($(window).width() < 626) {
    var map = new L.Map('map').setView([-35,-71],20);
    } else {
    var map = new L.Map('map').setView([-35,-71],20);

Also, for reading the Google Spreadsheet I use

          // Group we will append our markers to
          if (window.location.hash === "#cluster") {
            // Set up cluster group
            var markers = new L.MarkerClusterGroup();
          } else {
            // Otherwise set up normal groupx`
            var markers = new L.LayerGroup();
          }

          // Google Docs spreadsheet key
          var spreadsheet_key = '1RBXvfL8A5OWKVShefgjkAlbikwnakpBzytz9fccuPzI';

          // Name of lat, long columns in Google spreadsheet
          var lat_column = 'latitude';
          var long_column = 'longitude';

          // Marker options
          var radius = 3;
          // Regular fill
          var fill_color = "#023858";
          var border_color = "#FFF";
          // Hover
          var fill_color_hover = "#FFF";
          var border_color_hover = "#333"

          var global_markers_data;

          // Function that creates our popup
          function generatePopup(content){
              // Generate header
            var popup_header = "<h4>" + toTitleCase(content['brewery']) + "</h4>"

            // Generate content
            var popup_content = '<table class="popup_table table">';
            popup_content += '<tr><td><strong>Address:</strong></td>';
            popup_content += '<td>' + content['address'] + '</td>';
            popup_content += '<tr><td><strong>City:</strong></td>';
            popup_content += '<td>' + content['city'] + '</td>';
            popup_content += '<tr><td><strong>Phone:</strong></td>';
            popup_content += '<td>' + content['phone'] + '</td>';
                popup_content += '<tr><td colspan="2"><strong><a href="http://' + content['website'] + '" target="_blank">Learn more</a></strong></td>';
            popup_content += '</tr></table>'

            return popup_header + popup_content;
          }

          // This goes through our JSON file and puts markers on map
          function loadMarkersToMap(markers_data) {
            // If we haven't captured the Tabletop data yet
            // We'll set the Tabletop data to global_markers_data
            if (global_markers_data !== undefined) {
                markers_data = global_markers_data;
            // If we have, we'll load global_markers_data instead of loading Tabletop again
            } else {
                global_markers_data = markers_data;
            }

            for (var num = 0; num < markers_data.length; num++) {
                // Capture current iteration through JSON file
                current = markers_data[num];

                // Add lat, long to marker
                var marker_location = new L.LatLng(current[lat_column], current[long_column]);

                // Determine radius of the circle by the value in total
                // radius_actual = Math.sqrt(current['total'] / 3.14) * 2.8;

                // Options for our circle marker
                var layer_marker = L.circleMarker(marker_location, {
                    radius: radius,
                    fillColor: fill_color,
                    color: border_color,
                    weight: 1,
                    opacity: 1,
                    fillOpacity: 0.8
                });

                // Generate popup
                layer_marker.bindPopup( generatePopup(current) );

                // Add events to marker
                (function (num){
                    // Must call separate popup(e) function to make sure right data is shown
                    function mouseOver(e) {
                        var layer_marker = e.target;
                        layer_marker.setStyle({
                            radius: radius + 1,
                            fillColor: fill_color_hover,
                            color: border_color_hover,
                            weight: 2,
                            opacity: 1,
                            fillOpacity: 1
                        });
                        // layer_marker.openPopup();
                    }

                    // What happens when mouse leaves the marker
                    function mouseOut(e) {
                        var layer_marker = e.target;
                        layer_marker.setStyle({
                            radius: radius + 1,
                            fillColor: fill_color,
                            color: border_color,
                            weight: 1,
                            opacity: 1,
                            fillOpacity: 0.8
                        });
                        // layer_marker.closePopup();
                    }

                    // Call mouseover, mouseout functions
                    layer_marker.on({
                        mouseover: mouseOver,
                        mouseout: mouseOut
                    });

                })(num)

                // Add to feature group
                markers.addLayer(layer_marker);
            }

            // Add feature group to map
            map.addLayer(markers);

            // Clear load text
            // $('.sidebar_text_intro').html('');
          };

          // Pull data from Google spreadsheet via Tabletop
          function initializeTabletopObjectMarkers(){
            Tabletop.init({
                key: spreadsheet_key,
                callback: loadMarkersToMap,
                simpleSheet: true,
                debug: false
              });
          }

          // Add JSON data to map
          // If not done with map-tabletop-geojson.js
          initializeTabletopObjectMarkers();

Thanks from Chile

Answer 1

The 2 coordinate pairs that you provided are about 3.6 meters apart.

var latLng1 = [-35.40665432600, -71.66499569600];
var latLng2 = [-35.4066848373, -71.66500860470];

L.latLng(latLng1).distanceTo(latLng2);

At their latitude, they are represented just a dozen pixels apart at zoom 20.

In this configuration, there is no issue in seeing them separately, even though they are still quite close and you have to zoom to level 20.

Demo: https://jsfiddle.net/3v7hd2vx/234/

If you use Leaflet.markercluster plugin, please note that the default clustering radius is 80px, so your 2 points will be merged in a common cluster even at zoom 20. You can use the "spiderfy" functionality of that plugin to see them separately, but not at their real position. Or simply decrease the clustering radius, at least from that zoom level. Or disable entirely clustering from that zoom level (see disableClusteringAtZoom option)