cjdd3b/columbiacrime.html

## columbiacrime.html
<!DOCTYPE html>
<html>

<head>
    <title>Leaflet Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Import Leaflet assets -->
    <link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
    <script src="http://leafletjs.com/dist/leaflet.js"></script>

    <!-- Import jQuery -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

</head>

<body>

    <!-- Create container for map -->
    <div id="map" style="width: 800px; height: 800px;"></div>


    <script>

        // Initialize map
        var map = L.map('map').setView([38.9483, -92.333], 12);


        // Load tiles
        var mapquestLayer = new L.TileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>,<a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors.',
            subdomains: ['otile1','otile2','otile3','otile4']
        });
        map.addLayer(mapquestLayer);

        // Add a single point
        // L.marker([38.9483, -92.333])
        //     .addTo(map)
        //     .bindPopup('This is a point in Columbia!');

        // Add a bunch of points via JSON
        $.ajax({
            url: 'incidents.json',
            success: function (incidents) {
                for (var i in incidents) {
                    var incident = incidents[i];
                    L.marker([incident.YCoord, incident.XCoord]).addTo(map)
                }
            },
            error: function(xhr, error) {
              console.log(error);
            }
        });

    </script>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Leaflet Example</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- Import Leaflet assets -->
	<link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" />
	<script src="http://leafletjs.com/dist/leaflet.js"></script>

	<!-- Import jQuery -->
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

	</head>

	<body>

	<!-- Create container for map -->
	<div id="map" style="width: 800px; height: 800px;"></div>


	<script>

	// Initialize map
	var map = L.map('map').setView([38.9483, -92.333], 12);


	// Load tiles
	var mapquestLayer = new L.TileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>,<a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors.',
	subdomains: ['otile1','otile2','otile3','otile4']
	});
	map.addLayer(mapquestLayer);

	// Add a single point
	// L.marker([38.9483, -92.333])
	// .addTo(map)
	// .bindPopup('This is a point in Columbia!');

	// Add a bunch of points via JSON
	$.ajax({
	url: 'incidents.json',
	success: function (incidents) {
	for (var i in incidents) {
	var incident = incidents[i];
	L.marker([incident.YCoord, incident.XCoord]).addTo(map)
	}
	},
	error: function(xhr, error) {
	console.log(error);
	}
	});

	</script>

	</body>

	</html>