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

Revisions

  1. mikedamoiseau revised this gist Dec 8, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Leaflet with Google, Bing and Openstreet Maps
    View file
    Original file line number Diff line number Diff line change
    @@ -74,4 +74,4 @@ https://github.com/shramov/leaflet-plugins
    </script>
    </body>
    </html>
    ```
    ```
  2. mikedamoiseau revised this gist Dec 8, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Leaflet with Google, Bing and Openstreet Maps
    View file
    Original file line number Diff line number Diff line change
    @@ -74,4 +74,4 @@ https://github.com/shramov/leaflet-plugins
    </script>
    </body>
    </html>
    ```
    ```
  3. mikedamoiseau renamed this gist Dec 8, 2014. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.md → ...let with Google, Bing and Openstreet Maps
    View file
    File renamed without changes.
  4. mikedamoiseau revised this gist Dec 8, 2014. 1 changed file with 9 additions and 1 deletion.
    10 changes: 9 additions & 1 deletion gistfile1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,10 @@
    **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>
    @@ -66,4 +73,5 @@
    </script>
    </body>
    </html>
    </html>
    ```
  5. mikedamoiseau revised this gist Dec 8, 2014. 1 changed file with 42 additions and 13 deletions.
    55 changes: 42 additions & 13 deletions gistfile1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,3 @@
    **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>
    @@ -14,27 +7,63 @@ https://github.com/shramov/leaflet-plugins
    <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:500px; height:500px" id="map"></div>
    <div style="width:100%; height:100%" id="map"></div>



    <script type='text/javascript'>

    var map = new L.map('map', {center: new L.LatLng(51.51, -0.11), zoom: 9});
    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: 'AerialWithLabels'});
    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([51.5, -0.09]).addTo(map)
    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>
    ```
    </html>
  6. mikedamoiseau created this gist Dec 8, 2014.
    40 changes: 40 additions & 0 deletions gistfile1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    **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>
    </head>
    <body>
    <div style="width:500px; height:500px" id="map"></div>



    <script type='text/javascript'>
    var map = new L.map('map', {center: new L.LatLng(51.51, -0.11), zoom: 9});
    var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
    var bingLayer = new L.BingLayer('AhOyyDefYeE8cCO6nOUC0yJjIn9eqrIgEs7jyVJ3nFetHrzOGfS0UfkVpDapLxJ3', {type: 'AerialWithLabels'});
    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([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
    .openPopup();
    </script>
    </body>
    </html>
    ```