Skip to content

Instantly share code, notes, and snippets.

@tmcw
Created February 28, 2014 20:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tmcw/9279305 to your computer and use it in GitHub Desktop.
Save tmcw/9279305 to your computer and use it in GitHub Desktop.
<html>
<head>
<link href='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.css' rel='stylesheet' />
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />
<script src='//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox.js'></script>
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
</head>
<body>
<br />
<br />
<a href="http://www.joursferies.fr/mapbox.html">Many markers Map >></a>
<br />
<br />
<div id='map' style="width: 720px; height: 600px;"></div>
<script>
var map = L.mapbox.map('map', 'ideesport.gcp489m3');
var markers = L.markerClusterGroup( { maxClusterRadius:20, disableClusteringAtZoom: 14, spiderfyDistanceMultiplier: 2} );
var marker;
map.scrollWheelZoom.disable();
var oldZoom = map.zoomControl;
oldZoom.removeFrom(map);
new L.Control.Zoom({ position: 'bottomright' }).addTo(map);
map.addLayer(markers);
marker = new L.Marker(new L.LatLng(46.1778270,-1.1944600));
marker.bindPopup("<table><tr><td width='40%'><img src=\"http://www.ideesport.fr/media/catalog/product/cache/2/thumbnail/144x100/9df78eab33525d08d6e5fb8d27136e95/i/m/image_4043_3_Large_JetSystems.gif\"/></td><td width='60%'><strong>Vol helicoptere - Amboise Le Mans ou La Rochelle</strong><br />Lieu: Charente-Maritime (Poitou-Charentes) - La Rochelle<br /><br />Vol en hélicoptère à Amboise, au Mans ou La Rochelle.</td></tr></table>", {
keepInView: false,
minWidth: 400,
maxHeight: 500
});
markers.addLayer(marker);
marker = new L.Marker(new L.LatLng(47.4133260,0.9844070));
marker.bindPopup("<table><tr><td width='40%'><img src=\"http://www.ideesport.fr/media/catalog/product/cache/2/thumbnail/144x100/9df78eab33525d08d6e5fb8d27136e95/i/m/image_4043_3_Large_JetSystems.gif\"/></td><td width='60%'><strong>Vol helicoptere - Amboise Le Mans ou La Rochelle</strong><br />Lieu: Indre-et-Loire (Centre) - Amboise<br /><br />Vol en hélicoptère à Amboise, au Mans ou La Rochelle.</td></tr></table>", {
keepInView: false,
minWidth: 400,
maxHeight: 500
});
markers.addLayer(marker);
marker = new L.Marker(new L.LatLng(48.0157803,0.1609266));
marker.bindPopup("<table><tr><td width='40%'><img src=\"http://www.ideesport.fr/media/catalog/product/cache/2/thumbnail/144x100/9df78eab33525d08d6e5fb8d27136e95/i/m/image_4043_3_Large_JetSystems.gif\"/></td><td width='60%'><strong>Vol helicoptere - Amboise Le Mans ou La Rochelle</strong><br />Lieu: Sarthe (Pays de la Loire) - Le Mans<br /><br />Vol en hélicoptère à Amboise, au Mans ou La Rochelle.</td></tr></table>", {
keepInView: false,
minWidth: 400,
maxHeight: 500
});
markers.addLayer(marker);
map.fitBounds(markers.getBounds());
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment