Old school D3 from simpler times

All examples By author By category About

aaizemberg

Full window Github gist

ciudades con mas de 50,000 habitantes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ciudades con mas de 50,000 habitantes</title>

<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7/leaflet.min.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/example/screen.css" />

<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
	<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
	<script src="https://leaflet.github.io/leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
	<script src="loca50k.js" charset="utf-8"></script>
</head>
<body>
  <div id="map"></div>
  <script type="text/javascript">

var tiles = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
				maxZoom: 18,
				attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a>'
			}),
			latlng = L.latLng(-39, -57);

var map = L.map('map', {center: latlng, zoom: 4, layers: [tiles]});

var markers = L.markerClusterGroup({ chunkedLoading: true });
		
		for (var i = 0; i < addressPoints.length; i++) {
			var a = addressPoints[i];
			var title = a[2];
			var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
			marker.bindPopup(title);
			markers.addLayer(marker);
		}

map.addLayer(markers);

</script>
</body>
</html>

Modified http://cdn.leafletjs.com/leaflet-0.7/leaflet.js to a secure url

Modified http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js to a secure url

https://cdn.leafletjs.com/leaflet-0.7/leaflet.js

https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js