0

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.

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
Yster
  • 3,147
  • 5
  • 32
  • 48
  • @The person who marked me down without a comment: I don't know what your problem is dude. Maybe you can explain. – Yster Apr 24 '15 at 12:24
  • Well, cannot say for sure why other people are downvoting - but perhaps there were downvoted because the question itself not is very descriptive? Basically it is only the addendum to the bounty text above that makes "sense" in order to show "Common Alerting Protocol"-items. – davidkonrad Apr 28 '15 at 15:59

1 Answers1

1

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/

davidkonrad
  • 83,997
  • 17
  • 205
  • 265