CODEWITHSUNDEEP
leafletmapquestopenweathermap
Ahsan
Ahsan

Reputation: 33

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>

Upvotes: 1

Views: 1562

Answers (1)

MQBrian
MQBrian

Reputation: 472

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"));

Upvotes: 1

Related Questions