CODEWITHSUNDEEP
javascriptjsonajaxleafletopenweathermap
Sanaz Baghban
Sanaz Baghban

Reputation: 155

openWeatherMap not displaying leaflet layers & geoJSON

i tried to display circles and polygons on my map using leaflet map & openWeatherAPI, the marker works but the others don't!! can you help me out to figure out the problem?

var circle = L.circle([51.508, -0.11], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 500 }).addTo(map);
        L.geoJSON(circle).addTo(map);

        //polygon on map
        var polygon = L.polygon([
            [51.509, -0.08],
            [51.503, -0.06],
            [51.51, -0.044]
        ]).addTo(map);
        L.geoJSON(polygon).addTo(map);

        var geojsonFeature = {
            "type": "Feature",
            "properties": {
                "name": "Coors Field",
                "amenity": "Baseball Stadium",
                "popupContent": "This is where the Rockies play!"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [-104.99404, 39.75621]
            }
        };
        L.geoJSON(geojsonFeature).addTo(map);

I also have this code and works:

var map = L.map('map').setView({ lon: 0, lat: 0 }, 2);

    // add the OpenStreetMap tiles
    L.tileLayer('http://mt0.google.com/vt/lyrs=p&hl=en&x={x}&y={y}&z={z}&s=Ga', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
    }).addTo(map);

    // show the scale bar on the lower left corner
    L.control.scale().addTo(map);
    map.on('dblclick', function(ev) {
        app.request.get('http://api.openweathermap.org/data/2.5/weather', { appid: '38e6ae7b7f30d96079f5e8a9df837472', lon:''+ev.latlng.lng ,lat:''+ev.latlng.lat }, function (data)
        {
          
            var JsonWeatherData=JSON.parse(data);
            alert(JsonWeatherData.weather[0].description);
        });
        L.marker({ lon: ev.latlng.lng, lat: ev.latlng.lat }).bindPopup('The center of the world').addTo(map);
    });

Upvotes: 0

Views: 312

Answers (1)

Falke Design
Falke Design

Reputation: 11348

Don't add layers like that to L.geoJSON group, if they are not geojson features.

var circle = L.circle([51.508, -0.11], {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 500 });
var circleGroup = L.geoJSON().addTo(map)
circleGroup.addLayer(circle);


//polygon on map
var polygon = L.polygon([
            [51.509, -0.08],
            [51.503, -0.06],
            [51.51, -0.044]
        ]);
var polyGroup = L.geoJSON().addTo(map)
polyGroup.addLayer(polygon);

But if you don't need this layers in geoJSON groups use L.featureGroup(circle).addTo(map)

Upvotes: 1

Related Questions