Leaflet 1.0.0 flies!
var rb = 'RegionBound | ';
var cc = 'CC-BY-SA';
var attr1 = rb + 'Map data © OpenStreetMap contributors, ' + cc;
var tileLayer1Options = { attribution: attr1 };
var tileLayer1 = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', tileLayer1Options);
var attr2 = rb + 'Tiles © Esri';
var tileLayer2Options = { attribution: attr2 };
var tileLayer2 = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/world_topo_map/MapServer/tile/{z}/{y}/{x}.png', tileLayer2Options);
var flyMap;
function flyTo(lat, lon, name) {
flyMap.flyTo([lat, lon], 11);
L.marker([lat, lon]).addTo(flyMap).bindPopup(name + "International Airport[" + lat + ", " + lon + "]")
}
img {
max-width: none !important;
}
.main-container.container {
min-height: 550px;
margin-left: 0;
margin-right: 0 !important;
padding-left: 0;
padding-right: 0;
width: 100%;
}
h1 {
color: green;
font-family: courier, monospace;
position: absolute;
top: 37px;
text-align: center;
width: 100%;
z-index: 999;
}
h1.page-header {
border: none;
}
#map-with-flyto {
height: 560px;
position: absolute;
top: 27px;
width: 100%;
}
button {
background-color: limegreen;
border: 1px solid white;
border-radius: 5px;
color: white;
display: -webkit-flex; /* Safari */
display: flex;
font-family: courier, monospace;
font-size: 14px;
height: 30px;
margin: 0 0 7px 10px;
min-width: 35px;
padding: 0 5px;
position: relative;
text-align: center;
top: 125px;
z-index: 999;
}
button#top {
border: none;
background: transparent;
color: darkgreen;
font-size: 15px;
font-weight: bolder;
top: 114px;
}
Flyto:
LHR
JFK
SFO
GIG
CAI
CPT
DME
PVG
MEL
var mapOptions = { };
flyMap = L.map('map-with-flyto', mapOptions).locate({setView: true, maxZoom: 16});
tileLayer2.addTo(flyMap);
var layers = { 'OSM': tileLayer1, 'Esri Topo': tileLayer2 };
L.control.layers(layers, {}).addTo(flyMap);
flyMap.on('locationfound', function(e) {
var radius = (e.accuracy / 2).toFixed();
L.circle(e.latlng, radius).addTo(flyMap).bindPopup("You are within this circle");
L.marker(e.latlng).addTo(flyMap).bindPopup("You are within " + radius + " meters of this marker.");
});
flyMap.on('locationerror', function(e) {
alert(e.message);
});
File under:: Planet Drupal