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
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)