4

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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <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>

Improve this question
4
  • 3
    Welcome to GIS Stack Exchange! Unfortunately Chrome prevents AJAX calls when you run your page from local file system. You could try Firefox (I think it should still work) or set-up a local server. For the purpose of testing, you could also copy your file contents to an online editing tool, like Plunker – ghybs Dec 3 '15 at 9:29
  • tried chrome and it's worked straight away! Thanks ever so much for the help and the fast response! I'll definitely give plunker a go. Have a great day :) – Jamie Dec 3 '15 at 9:46
  • I am glad you could make it work! I guess you meant "tried Firefox"? – ghybs Dec 3 '15 at 9:47
  • Yes, chrome sorry. Plunker seems great but doesn't work when trying to visualise files over a few megabyte unfortunately. – Jamie Dec 3 '15 at 17:34
1

python has a built-in web server with a one-liner, you can run it if you have python on your system and then have it in all browsers. Just navigate to the directory and 

python -m SimpleHTTPServer
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.