Search code examples
leafletmapquestopenweathermap

leaflet integration with openweathermap api

Kindly check my output here Can anybody here help me out with some good tutorial or ways to integrate openweathermap api with leaflet mapquest api. I read on owm website that both are compatible and can work together. Any help will be appreciated. Thanks !

<html>
<head>
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.0.0/mapquest.js"></script>
    <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.0.0/mapquest.css"/>

    <script type="text/javascript">
    window.onload = function() {
        L.mapquest.key = 'mapquestkeyhere';

        var map = L.mapquest.map('map', {
          center: [40.7128, -74.0059],
          layers: L.mapquest.tileLayer('map'),
          zoom: 11,

        });
        var latlong = [
                        [40.783060, -73.971249],
                        [40.7128, -74.0059],
                        [40.678178, -73.944158]
                       ];
        var infowindow = ["Manhattan","NY","Brooklyn"];

        for(var i = 0; i < latlong.length ; i++){
        var marker = L.marker(latlong[i]).addTo(map);
        marker.bindPopup(infowindow[i]).openPopup();

        }
        var polyline = L.polyline(latlong,{color:'red'}).addTo(map);
        <!-- map.addLayer(L.mapquest.trafficLayer());
         <!-- map.addLayer(L.mapquest.incidentsLayer());

         map.addLayer(new L.TileLayer("http://tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=owmkeyhere"));
    }
        </script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
</body>
</html>
Solution

  • I added the following line to the basic MapQuest.js sample in the MapQuest Developer Network.

    map.addLayer(new L.TileLayer("http://tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=YOUR_KEY"));