I'm trying to load a GeoJSON file in to my Leaflet map and can't see what's going wrong. From looking at other questions I've used jQuery Ajax to call the geojson. The GeoJSON is in the same directory as the HTML.
This is the Ajax query i'm using
var geojsonLayer = new L.GeoJSON.AJAX("gtd.geojson");
These are the error messages I'm getting from Google Chrome:
Uncaught ReferenceError: polygon is not defined
leaflet.ajax.min.js:1 XMLHttpRequest cannot load file:///E:/Pure%20Test/gtd. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ leaflet.ajax.min.js:
This is my code:
<!DOCTYPE html>
<html>
<head>
<title>Global Terrorism Attacks </title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/own_style.css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="leaflet.ajax.min.js"></script>
<script src ="geojson.js"></script>
</head>
<body>
<div id ="container">
<div id="header">
<br><b>This is the first map I've made with Leaflet</b><br><br>
</div>
</div>
<div id="map">
<script>
var map = L.map('map', {
zoomControl:true, maxZoom:19
}).fitBounds([[30,-30.0],[40,80]]);
var CartoDB_All = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a>',
subdomains: 'abcd',
maxZoom: 19
});
CartoDB_All.addTo(map);
var geojsonLayer = new L.GeoJSON.AJAX("gtd.geojson");
geojsonLayer.addTo(map);
var marker = L.marker([52.3760, -1.345]).addTo(map);
var circle = L.circle([51.390, -1.352], 70, {
color: 'blue',
fillColor: 'blue',
fillOpacity: 0.5
}).addTo(map);
marker.bindPopup("<b>Home</b><br>").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
boxZoom = true
</script>
</div>