google-mapsgoogle-maps-api-3google-maps-markerscap

CAP alerts on Google Maps


In need of an example of how to show CAP (Common Alerting Protocol) location tags and areas from a feed (or file) on Google Maps. Currently I can show GeoRSS tags on Google Maps with this javascript code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="./jquery/jquery.zrssfeed.min.js" type="text/javascript"></script>
<script src="./jquery/jquery.vticker.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
function initialize() {
            var myLatlng = new google.maps.LatLng(49.496675, -102.65625);
            var mapOptions = {
                zoom: 4,
                center: myLatlng
            };
            var map = new google.maps.Map(document.getElementById('publicgeorss'), mapOptions);
            var georssLayer = new google.maps.KmlLayer({
                url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
            });
            georssLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize1);

And somewhere in the body:

<div id="publicgeorss" style="height:410px; width:400px"></div>

Thanks in advance.


Solution

  • It is straight forward. I dont know how you receive those CAP's, but if the format always is a you describe above you can use the following code :

    (Have placed the CAP in a string variable, it would be the same from feed, ajax or file)

    document.getElementById('show-cap').onclick = function() {
        //parse CAP
        var parser = new DOMParser(),
            dom = parser.parseFromString(CAP, "text/xml"),
            alert = dom.querySelector('alert');
    
        //extract some data     
        var info = alert.querySelector('info'),
            event = info.querySelector('event').textContent,
            headline = info.querySelector('headline').textContent,
            instruction = alert.querySelector('instruction').textContent,
            latLngs = alert.querySelector('area').querySelector('polygon').textContent.split(',');
    
        //create polygon
        //CAP seems to have the polygon [1..length-1] and startpoint at [0,length]
        var i, latLng, 
            start = new google.maps.LatLng(parseFloat(latLngs[0]), parseFloat(latLngs[latLngs.length-1])),
            path = [start];
    
        for (i=1;i<latLngs.length-1;i++) {
            latLng = latLngs[i].split(' ');
            path.push(new google.maps.LatLng(parseFloat(latLng[1]), parseFloat(latLng[0])));
        }
        new google.maps.Polygon({
            paths: path,
            fillColor: '#FF0000',
            fillOpacity: 0.35,        
            strokeWeight: 0,       
            map: map
        });
    
        //find and set map center
        var bounds = new google.maps.LatLngBounds();
        for (i=0;i<path.length;i++) {
            bounds.extend(path[i]);
        }
        map.setCenter(bounds.getCenter());    
    
        //create a marker
        var marker = new google.maps.Marker({
            position: bounds.getCenter(),
            map: map
        });
    
        //create an infowindow with the headline and instructions
        var info = new google.maps.InfoWindow({
            content: '<h3>'+headline+'</h3>'+'<p>'+instruction+'</p>',
        });
        info.open(map, marker);
    };    
    

    The result : enter image description here

    demo -> http://jsfiddle.net/wm5fsgas/