Clustered Modis WFS

by spydmobile

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css">
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css">
<script src="http://leafletjs.com/dist/leaflet.js"></script>
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<p>
    <div id="map"></div>
</p>

CSS

#map {
    height: 480px;
}

JavaScript

// MODIS Hits
mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png';
fireIconUrl = 'http://www.sparcsonline.com/tng/sites/all/modules/sparcs/sparcsmap/images/icons/fire_icon.svg';
var markers = L.markerClusterGroup();

//var fmdlayers = 



var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>';

var grayscale = L.tileLayer(mbUrl, {
    id: 'examples.map-20v6611k',
    attribution: mbAttr
}),
    streets = L.tileLayer(mbUrl, {
        id: 'examples.map-i86knfo3',
        attribution: mbAttr
    });




var owsrootUrl = 'http://gs.vm.sparcsonline.com/geoserver/sparcs/ows';



var modisParameters = {
    service: 'WFS',
    version: '2.0',
    request: 'GetFeature',
    typeName: 'modis_points_canada',
    outputFormat: 'text/javascript',
    maxFeatures: '20',
    format_options: 'callback:getJson',
    SrsName: 'EPSG:4608'
};

var map = L.map('map', {
    center: [65, -115],
    zoom: 4,
    layers: [streets, ]
});


var modislayer = new L.geoJson(null, {
    pointToLayer: function (feature, latlng) {

        return L.circleMarker(latlng, {
            radius: 3,
            fillColor: "#FFFF00",
            color: "#FFFF00",
            weight: 1,
            opacity: 1,
            fillOpacity: 1
        });

    },
    onEachFeature: function (feature, layer) {

        popupOptions = {
            maxWidth: 200
        };
        layer.bindPopup("MODIS " + feature.properties.age_in_hours, popupOptions);
    }
});

function getModisJson(data) {
    console.log(data)
    modislayer.addData(data);
    markers.addLayer(modislayer); // add it to the cluster group
}

$.ajax({
    url: owsrootUrl + L.Util.getParamString(L.Util.extend(modisParameters)),
    dataType: 'jsonp',
    jsonpCallback: 'getJson',
    success: getModisJson
});


	
	

var overlayMaps = {
    'modis':...