clhenrick/geojsonCircleMarkerHTML

## geojsonCircleMarkerHTML
<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
        <!--[if lte IE 8]>
             <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
        <![endif]-->
        <link rel="stylesheet" href="css/main.css">

        <script src="js/modernizr-2.6.2.min.js"></script>
        <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
        <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>
    </head>
    <body>

         <div id="map"></div>
         <div id="attribution">
            Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.
         </div>


        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>
        <script src="js/AnimatedMarker.min.js"></script>
        <script>

// create a variable to load Stamen 'toner' tiles
var layer = new L.StamenTileLayer("toner");

// initialize and set map center and zoom
var map = L.map('map', {
	center: new L.LatLng(40.67, -73.94),
	zoom: 11
});

// create the map
map.addLayer(layer);

// on each feature use feature data to create a pop-up
function onEachFeature(feature, layer) {

    var popupContent;
    popupContent = feature.properties.t;

    // create a new variable to store Date in
    var time = new Date(0);
    // create a date by passing it the Unix UTC epoch
    time.setUTCSeconds(popupContent);

    popupContent = time;

    console.log(popupContent);
    //return time;

    layer.bindPopup(popupContent);
}

// grab original GeoJSON
var geojsonOriginal = (function() {
    var json = null;
    $.ajax({
        'url': "/data/test_output.json",
        'dataType': "json",
        'jsonpCallback': 'getJson',
        'success': function (data) {
            json = data;
        }
    });
    return json;
})();


// grab the processed & scrambled GeoJSON through an ajax call
var geojsonFeature = (function() {
        var json = null;
        $.ajax({
            'async': false,
            'global': false,
            'url': "/data/test_random.json",
            'dataType': "json",
            'success': function (data) {
                json = data;
            }
        });
        return json;
    })();

// create an object to store marker style properties
var geojsonMarkerOptions = {
    radius: 10,
    fillColor: "rgb(255,0,195)",
    color: "#fff",
    weight: 2,
    opacity: 1,
    fillOpacity: 1
};


// load the geojson to the map with marker styling
L.geoJson(geojsonFeature, {

    style: function (feature) {
        return feature.properties && feature.properties.style;
    },

    onEachFeature: onEachFeature,

}).addTo(map);


        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html class="no-js">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">

	<link rel="stylesheet" href="css/normalize.min.css">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	<![endif]-->
	<link rel="stylesheet" href="css/main.css">

	<script src="js/modernizr-2.6.2.min.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
	<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.2.3"></script>
	</head>
	<body>

	<div id="map"></div>
	<div id="attribution">
	Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.
	</div>


	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>
	<script src="js/AnimatedMarker.min.js"></script>
	<script>

	// create a variable to load Stamen 'toner' tiles
	var layer = new L.StamenTileLayer("toner");

	// initialize and set map center and zoom
	var map = L.map('map', {
	center: new L.LatLng(40.67, -73.94),
	zoom: 11
	});

	// create the map
	map.addLayer(layer);

	// on each feature use feature data to create a pop-up
	function onEachFeature(feature, layer) {

	var popupContent;
	popupContent = feature.properties.t;

	// create a new variable to store Date in
	var time = new Date(0);
	// create a date by passing it the Unix UTC epoch
	time.setUTCSeconds(popupContent);

	popupContent = time;

	console.log(popupContent);
	//return time;

	layer.bindPopup(popupContent);
	}

	// grab original GeoJSON
	var geojsonOriginal = (function() {
	var json = null;
	$.ajax({
	'url': "/data/test_output.json",
	'dataType': "json",
	'jsonpCallback': 'getJson',
	'success': function (data) {
	json = data;
	}
	});
	return json;
	})();


	// grab the processed & scrambled GeoJSON through an ajax call
	var geojsonFeature = (function() {
	var json = null;
	$.ajax({
	'async': false,
	'global': false,
	'url': "/data/test_random.json",
	'dataType': "json",
	'success': function (data) {
	json = data;
	}
	});
	return json;
	})();

	// create an object to store marker style properties
	var geojsonMarkerOptions = {
	radius: 10,
	fillColor: "rgb(255,0,195)",
	color: "#fff",
	weight: 2,
	opacity: 1,
	fillOpacity: 1
	};


	// load the geojson to the map with marker styling
	L.geoJson(geojsonFeature, {

	style: function (feature) {
	return feature.properties && feature.properties.style;
	},

	onEachFeature: onEachFeature,

	}).addTo(map);


	</script>
	</body>
	</html>