Create Weather Map using Google Map API and MVC Core

 Author: Shengtao Zhou       Created: 2/12/2019 8:40:10 PM       Modified: 2/14/2019 12:26:56 AM   More...
Here demonstrates how to create a weather map looks like the image at the bottom.

You can get weather RSS feed data from many different resources. For example, here's the weather information page and RSS feed page for Edmonton, Alberta Canada,

You can view the above HTML and RSS XML in your browser, but you can't get the data from your javascript. This is caused by security limitation. To get data from javascript ajax call, the URL you're calling needs to be either hosted in the same domain from your web page or be enabled for CORS access by the remote web site hosting the URL. CORS stands for Cross-Origin Resource Sharing.

To share a WebApi action to a remote request, you can create a policy inside ConfigureServices method inside Startup.cs
            services.AddCors(o => o.AddPolicy("XXX", builder =>
            {
                builder.AllowAnyOrigin()
                       .AllowAnyMethod()
                       .AllowAnyHeader();
            }));
Then add EnableCors attribute to the action you want to share,
        [EnableCors("XXX")]
        public JsonResult WeatherFeed(int id)
        {
                ...
        }

Next, we're going to create a weather map like this,

1. Register and get Google Map API


2. Add map div tag and include Google Map API in your page

    <div id="map" style="height:100%;width:100%"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=<You_API_Key>&callback=initMap"></script>

3. Get Lat/Lon location information and add markers for each city you're interested

        var marker = new google.maps.Marker({
            position: latLng,
            draggable: true,
            map: map,
            title: cities[i].city + ": " + cities[i].currentCondition,
            label: {
                text: cities[i].currentCondition,
                color: 'red',
                size: new google.maps.Size(32, 32),
                scaledSize: new google.maps.Size(32, 32),
                fontSize: "16px",
                fontWeight: "bold"
            },
            icon: {
                url: cities[i].icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(0, 1),
                scaledSize: new google.maps.Size(50, 50),
                labelOrigin: new google.maps.Point(90, 0)
            }
        });

4. Set map bounder to display all markers

Call this line in a loop for each marker,
        bounds.extend(latLng);
Call this line after the loop,
        map.fitBounds(bounds);

5. Request data for all cities using jquery

var requests = [
    $.get(<url 1>),
    $.get(<url 2>),
    $.get(<url 3>),
    ...
];
$.when.apply($, requests).done(function () {
    /*save data to javascript variables*/
}

6. Show/hide weather data in infoWindow when user Mouse-over or Mouse-off the marker

function bindInfoWindow(marker, map, infowindow, html, url) {
    marker.addListener('mouseover', function () {
        infowindow.setContent(html);
        infowindow.open(map, this);
    });
    marker.addListener('mouseout', function () {
        infowindow.close();
    });
}

7. Demo of the Weather Map


8. Improve page performance

To improve to prototype to production level, we need to create a service to get data regularly and save into database tables. It's quite slow to get weather data on the fly. That's why you see some delay in the demo page. 

More...          Back to List          

(Please enter you comments between 100 to 2000 characters. Thanks for your contribution.) 

         Created:       Modified: 

Editing a comment

       (Please enter you comments between 100 to 2000 characters. Please login before edit comment.) 

div class="col-md-2">