Skip to content

Instantly share code, notes, and snippets.

@mikedamoiseau

mikedamoiseau/Leaflet with Google, Bing and Openstreet Maps

Last active December 10, 2021 06:26
Show Gist options
  • Save mikedamoiseau/06341734eeddedb5fb2e to your computer and use it in GitHub Desktop.
Save mikedamoiseau/06341734eeddedb5fb2e to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet with Google, Bing and Openstreet Maps
Raw
Leaflet with Google, Bing and Openstreet Maps
**Create a Bing API key**
https://www.bingmapsportal.com/application/create/1354301
**Download the plugins**
https://github.com/shramov/leaflet-plugins
```html
<!DOCTYPE html>
<html>
<head>
<title>Leaflet</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
<script src="js/leaflet/layer/tile/google.js"></script>
<script src="js/leaflet/layer/tile/bing.js"></script>
<style>
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script type='text/javascript'>
var map = new L.map('map', {center: new L.LatLng(48.110208, 11.527282), zoom: 13});
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var bingLayer = new L.BingLayer('AhOyyDefYeE8cCO6nOUC0yJjIn9eqrIgEs7jyVJ3nFetHrzOGfS0UfkVpDapLxJ3', {type: 'Road'});
var googleLayer = new L.Google('ROADMAP');
map.addLayer(bingLayer);
map.addControl(new L.Control.Layers({'OSM':osm, "Bing":bingLayer, 'Google':googleLayer}, {}));
// add a marker in the given location, attach some popup content to it and open the popup
L.marker([48.110208, 11.527282]).addTo(map)
.bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
.openPopup();
// draw the lines
var pointList = [
new L.LatLng(48.109893, 11.519256),
new L.LatLng(48.109793, 11.522303),
new L.LatLng(48.109864, 11.524642),
new L.LatLng(48.109979, 11.530135),
new L.LatLng(48.110495, 11.536701)
];
var firstpolyline = new L.Polyline(pointList, {
color: 'red',
weight: 3,
opacity: 1.0,
smoothFactor: 1
});
firstpolyline.addTo(map);
var pointList = [
new L.LatLng(48.110495, 11.536701),
new L.LatLng(48.110524, 11.537538),
new L.LatLng(48.110925, 11.541744),
];
var firstpolyline = new L.Polyline(pointList, {
color: 'blue',
weight: 3,
opacity: 1.0,
smoothFactor: 1
});
firstpolyline.addTo(map);
</script>
</body>
</html>
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment