<!DOCTYPE html>
<html>
<head>
<title>Génération du lien vers topographic-map.com</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
<link rel="stylesheet" href="http://tile.openstreetmap.fr/~cquest/leaflet/libs/leaflet-control-osm-geocoder/Control.OSMGeocoder.css">
<link rel="stylesheet" href="http://tile.openstreetmap.fr/~cquest/leaflet/libs/leaflet-locatecontrol/src/L.Control.Locate.css">
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<script src="http://leafletjs.com/dist/leaflet.js"></script>
<script src="http://tile.openstreetmap.fr/~cquest/leaflet/js/leaflet-hash.js"></script>
<script src="http://tile.openstreetmap.fr/~cquest/leaflet/libs/leaflet-locatecontrol/src/L.Control.Locate.js"></script>
<script src="http://tile.openstreetmap.fr/~cquest/leaflet/libs/leaflet-control-osm-geocoder/Control.OSMGeocoder.js"></script>
<script>
var mbAttr = 'Données cartographiques © contributeurs <a href="http://openstreetmap.org">OpenStreetMap</a>, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Carte © <a href="http://openstreetmap.se">openstreetmap<b>sverige</b></a>',
mbUrl = 'http://{s}.tile.openstreetmap.se/{id}/{z}/{x}/{y}.png';
var base = L.tileLayer(mbUrl, {id: 'hydda/base', attribution: mbAttr}),
full = L.tileLayer(mbUrl, {id: 'hydda/full', attribution: mbAttr});
var map = L.map('map', {
center: [47.000,2.000],
zoom: 6,
layers: [full]
});
var baseLayers = {
"Sans noms": base,
"Avec noms": full
};
L.control.layers(baseLayers).addTo(map);
// ajout du géocodeur
var osmGeocoder = new L.Control.OSMGeocoder( { position: 'topleft', text: 'Chercher' } );
map.addControl(osmGeocoder);
// ajout de la gestion des URL
var hash = new L.Hash(map);
// ajout de l'échelle
L.control.scale().addTo(map);
// ajout de la géolocalisation
// map.locate({setView: true, watch: true});
var popup = L.popup();
function onMapClick(e) {
var B = map.getBounds();
var url = "http://fr-fr.topographic-map.com/maps/"
+ B.getSouth() + ","
+ B.getWest() + ","
+ B.getNorth() + ","
+ B.getEast()
+ "/?Name=Ma carte";
popup
.setLatLng(e.latlng)
.setContent("Lien vers <a href='"+url+"'>topographic-map.</a>")
.openOn(map);
}
map.on('click', onMapClick);
</script>
</body>
</html>