I'm trying to add my local GeoJSON files to my Leaflet web page
2
I'm quite new to JavaScript and I have been trying to add my GeoJSON files to a web page. I can't seem to figure out how to get the GeoJSON to actually load. I've checked it using GeoJson.io and it draws correctly there. I just can't get it to load on my page. The OSM portion works just fine no issues showing that.
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var StratStyle = {
"color": "#d3d3d3",
"weight": 5,
"opacity": 0.65
};
var geojson = new L.GeoJSON.AJAX("StratfordBoundary", {style:StratStyle});
geojson.addTo(map);
here is the entire code
leaflet javascript geojson html
asked 12 hours ago
PVarPVar
143
New contributor
PVar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
2
I'm quite new to JavaScript and I have been trying to add my GeoJSON files to a web page. I can't seem to figure out how to get the GeoJSON to actually load. I've checked it using GeoJson.io and it draws correctly there. I just can't get it to load on my page. The OSM portion works just fine no issues showing that.
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var StratStyle = {
"color": "#d3d3d3",
"weight": 5,
"opacity": 0.65
};
var geojson = new L.GeoJSON.AJAX("StratfordBoundary", {style:StratStyle});
geojson.addTo(map);
here is the entire code
leaflet javascript geojson html
asked 12 hours ago
PVarPVar
143
New contributor
PVar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Why isvar mymap = L.map('map1').setView([43.370917,-80.983042], 13);inside<style>? That shouldn't work at all.
– obrob
8 hours ago
Idk, when I take it out it still works. I think it's just residual from something I was trying. I don't think it's an issue right now though
– PVar
8 hours ago
var mymap = L.map('map1').setView([43.370917,-80.983042], 13);creates your map variable. It must be in the code so later you can actually add your geojson to this variable which contains your map. Put it right in front ofL.tileLayerinside your js-script.
– obrob
8 hours ago
add a comment |
2
2
2
I'm quite new to JavaScript and I have been trying to add my GeoJSON files to a web page. I can't seem to figure out how to get the GeoJSON to actually load. I've checked it using GeoJson.io and it draws correctly there. I just can't get it to load on my page. The OSM portion works just fine no issues showing that.
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var StratStyle = {
"color": "#d3d3d3",
"weight": 5,
"opacity": 0.65
};
var geojson = new L.GeoJSON.AJAX("StratfordBoundary", {style:StratStyle});
geojson.addTo(map);
here is the entire code
leaflet javascript geojson html
asked 12 hours ago
PVarPVar
143
New contributor
PVar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
I'm quite new to JavaScript and I have been trying to add my GeoJSON files to a web page. I can't seem to figure out how to get the GeoJSON to actually load. I've checked it using GeoJson.io and it draws correctly there. I just can't get it to load on my page. The OSM portion works just fine no issues showing that.
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var StratStyle = {
"color": "#d3d3d3",
"weight": 5,
"opacity": 0.65
};
var geojson = new L.GeoJSON.AJAX("StratfordBoundary", {style:StratStyle});
geojson.addTo(map);
here is the entire code
leaflet javascript geojson html
leaflet javascript geojson html
asked 12 hours ago
PVarPVar
143
New contributor
PVar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 12 hours ago
PVarPVar
143
New contributor
PVar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 4 hours ago
PVar
asked 12 hours ago
PVarPVar
143
New contributor
PVar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 12 hours ago
PVarPVar
143
asked 12 hours ago
PVarPVar
143
143
New contributor
PVar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
PVar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
PVar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Why isvar mymap = L.map('map1').setView([43.370917,-80.983042], 13);inside<style>? That shouldn't work at all.
– obrob
8 hours ago
Idk, when I take it out it still works. I think it's just residual from something I was trying. I don't think it's an issue right now though
– PVar
8 hours ago
var mymap = L.map('map1').setView([43.370917,-80.983042], 13);creates your map variable. It must be in the code so later you can actually add your geojson to this variable which contains your map. Put it right in front ofL.tileLayerinside your js-script.
– obrob
8 hours ago
add a comment |
Why isvar mymap = L.map('map1').setView([43.370917,-80.983042], 13);inside<style>? That shouldn't work at all.
– obrob
8 hours ago
Idk, when I take it out it still works. I think it's just residual from something I was trying. I don't think it's an issue right now though
– PVar
8 hours ago
var mymap = L.map('map1').setView([43.370917,-80.983042], 13);creates your map variable. It must be in the code so later you can actually add your geojson to this variable which contains your map. Put it right in front ofL.tileLayerinside your js-script.
– obrob
8 hours ago
Why is
var mymap = L.map('map1').setView([43.370917,-80.983042], 13); inside <style> ? That shouldn't work at all.– obrob
8 hours ago
Why is
var mymap = L.map('map1').setView([43.370917,-80.983042], 13); inside <style> ? That shouldn't work at all.– obrob
8 hours ago
Idk, when I take it out it still works. I think it's just residual from something I was trying. I don't think it's an issue right now though
– PVar
8 hours ago
Idk, when I take it out it still works. I think it's just residual from something I was trying. I don't think it's an issue right now though
– PVar
8 hours ago
var mymap = L.map('map1').setView([43.370917,-80.983042], 13); creates your map variable. It must be in the code so later you can actually add your geojson to this variable which contains your map. Put it right in front of L.tileLayer inside your js-script.– obrob
8 hours ago
var mymap = L.map('map1').setView([43.370917,-80.983042], 13); creates your map variable. It must be in the code so later you can actually add your geojson to this variable which contains your map. Put it right in front of L.tileLayer inside your js-script.– obrob
8 hours ago
add a comment |
2 Answers
2
active
oldest
votes
3
New answer:
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
<style>
#map1 { height: 500px; width: 550px }
</style>
</head>
<body>
<div id="map1">
</div>
<script>
var mymap = L.map('map1').setView([43.370917,-80.983042], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var geojson = new L.GeoJSON.AJAX("StratfordBoundary.geojson");
geojson.on('data:loaded', function(){
geojson.addTo(mymap);
});
</script>
</body>
</html>
The errors I could find:
L.GeoJson.ajaxneeds to beL.GeoJSON.AJAX
var mymap = L.map('map1').setView([43.370917,-80.983042], 13);needs to be in your script, not inside your style definition- The
div containerfor your map was missing
However, the .html file above now works fine for me with my own test .geojson. I just drew a simple polygon in QGIS and saved it as StratfordBoundary.geojson (EPSG:4326) in the same folder as the .html file.
Old answer:
Try without a style first until it works:
var geojson = new L.GeoJSON.AJAX("StratfordBoundary.geojson");
geojson.addTo(mymap);
Add the filetype and check if the path to your .geojson is correct. Also make sure to point to the correct map instance you are using. I assume it is mymap as you use this for OSM and this one is working. If its working you can try:
var geojson = new L.GeoJSON.AJAX("StratfordBoundary.geojson", {style:StratStyle});
geojson.addTo(mymap);
It also seems like you are pointing to a wrong path for the plugin. It should be without a / at the beginning:
<script src="js/leaflet-0.7.2/leaflet.ajax.min.js"></script>
Alternatively you can also use jQuery with $.getJSON. Here is an example:
$.getJSON("StratfordBoundary.geojson", function (data) {
var StratfordBoundary = L.geoJSON(data,
{
onEachFeature: function onEachFeature(feature, layer) {
layer.bindPopup('<strong>' + feature.properties.Title + '</strong><br><br>Description: ' + feature.properties.Descr);
}
}).addTo(mymap);
});
Also try the console of your webbrowser. This may help finding your issue. Firefox and Chrome
answered 10 hours ago
MrXsquaredMrXsquared
1,3981316
When I use the first option you gave the page loads with OSM but the data still does not load on the page and there are no errors in the browser console. If I were to use Jquery would I have to call it in the header like I do with ajax?
– PVar
10 hours ago
Did you check if the path to your file is correct? Yes, call jQuery in your header like you already do and add the snippet to your script. Another thing I just noted is that you usemymapfor osm andmapfor your geojson. Usemymapfor both then. Just edited my answer with this.
– MrXsquared
10 hours ago
The geojson file is in the same folder as the HTML file so I just put the filename. Also when i changed "map" to "mymap" it still doesnt load the polygon
– PVar
10 hours ago
can you post your entire html and javascript so we can try out? only the relevant parts of course.
– MrXsquared
9 hours ago
Just included it in the original post. Let me know what I'm doing wrong. I've been stuck on this for way too long
– PVar
9 hours ago
|
show 14 more comments
2
Most probably geoJSON layer does not show because data is not loaded yet when you add layer to the map. Try with this code:
var geojson = L.geoJson.ajax('StratfordBoundary', {style: StratStyle});
geojson.on('data:loaded', function() {
mymap.addLayer(this);
});
As PVar wrote, also make sure that geoJSON file named StratfordBoundary actually exists on home directory of your project on server.
EDIT1: If you run your code locally on file system, then you must add local: true option to ajax call:
var geojson = L.geoJson.ajax('StratfordBoundary', {style: StratStyle, local: true});
answered 9 hours ago
TomazicMTomazicM
835216
So I just added that in and my data still won't load
– PVar
9 hours ago
Do you have file namedStratfordBoundaryon home directory of your project on the server? Does your server allow loading files without file type?
– TomazicM
9 hours ago
I do have it in the same directory
– PVar
9 hours ago
What about the second question? Is the file displayed if you refer to it directly in the browser:http://server/path/StratfordBoundary?
– TomazicM
9 hours ago
The geojson file is just on my machine. Not hosted on a server or anything
– PVar
8 hours ago
|
show 1 more comment
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "79"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
PVar is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f311618%2fim-trying-to-add-my-local-geojson-files-to-my-leaflet-web-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
New answer:
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
<style>
#map1 { height: 500px; width: 550px }
</style>
</head>
<body>
<div id="map1">
</div>
<script>
var mymap = L.map('map1').setView([43.370917,-80.983042], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var geojson = new L.GeoJSON.AJAX("StratfordBoundary.geojson");
geojson.on('data:loaded', function(){
geojson.addTo(mymap);
});
</script>
</body>
</html>
The errors I could find:
L.GeoJson.ajaxneeds to beL.GeoJSON.AJAX
var mymap = L.map('map1').setView([43.370917,-80.983042], 13);needs to be in your script, not inside your style definition- The
div containerfor your map was missing
However, the .html file above now works fine for me with my own test .geojson. I just drew a simple polygon in QGIS and saved it as StratfordBoundary.geojson (EPSG:4326) in the same folder as the .html file.
Old answer:
Try without a style first until it works:
var geojson = new L.GeoJSON.AJAX("StratfordBoundary.geojson");
geojson.addTo(mymap);
Add the filetype and check if the path to your .geojson is correct. Also make sure to point to the correct map instance you are using. I assume it is mymap as you use this for OSM and this one is working. If its working you can try:
var geojson = new L.GeoJSON.AJAX("StratfordBoundary.geojson", {style:StratStyle});
geojson.addTo(mymap);
It also seems like you are pointing to a wrong path for the plugin. It should be without a / at the beginning:
<script src="js/leaflet-0.7.2/leaflet.ajax.min.js"></script>
Alternatively you can also use jQuery with $.getJSON. Here is an example:
$.getJSON("StratfordBoundary.geojson", function (data) {
var StratfordBoundary = L.geoJSON(data,
{
onEachFeature: function onEachFeature(feature, layer) {
layer.bindPopup('<strong>' + feature.properties.Title + '</strong><br><br>Description: ' + feature.properties.Descr);
}
}).addTo(mymap);
});
Also try the console of your webbrowser. This may help finding your issue. Firefox and Chrome
answered 10 hours ago
MrXsquaredMrXsquared
1,3981316
When I use the first option you gave the page loads with OSM but the data still does not load on the page and there are no errors in the browser console. If I were to use Jquery would I have to call it in the header like I do with ajax?
– PVar
10 hours ago
Did you check if the path to your file is correct? Yes, call jQuery in your header like you already do and add the snippet to your script. Another thing I just noted is that you usemymapfor osm andmapfor your geojson. Usemymapfor both then. Just edited my answer with this.
– MrXsquared
10 hours ago
The geojson file is in the same folder as the HTML file so I just put the filename. Also when i changed "map" to "mymap" it still doesnt load the polygon
– PVar
10 hours ago
can you post your entire html and javascript so we can try out? only the relevant parts of course.
– MrXsquared
9 hours ago
Just included it in the original post. Let me know what I'm doing wrong. I've been stuck on this for way too long
– PVar
9 hours ago
|
show 14 more comments
3
New answer:
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
<style>
#map1 { height: 500px; width: 550px }
</style>
</head>
<body>
<div id="map1">
</div>
<script>
var mymap = L.map('map1').setView([43.370917,-80.983042], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var geojson = new L.GeoJSON.AJAX("StratfordBoundary.geojson");
geojson.on('data:loaded', function(){
geojson.addTo(mymap);
});
</script>
</body>
</html>
The errors I could find:
L.GeoJson.ajaxneeds to beL.GeoJSON.AJAX
var mymap = L.map('map1').setView([43.370917,-80.983042], 13);needs to be in your script, not inside your style definition- The
div containerfor your map was missing
However, the .html file above now works fine for me with my own test .geojson. I just drew a simple polygon in QGIS and saved it as StratfordBoundary.geojson (EPSG:4326) in the same folder as the .html file.
Old answer:
Try without a style first until it works:
var geojson = new L.GeoJSON.AJAX("StratfordBoundary.geojson");
geojson.addTo(mymap);
Add the filetype and check if the path to your .geojson is correct. Also make sure to point to the correct map instance you are using. I assume it is mymap as you use this for OSM and this one is working. If its working you can try:
var geojson = new L.GeoJSON.AJAX("StratfordBoundary.geojson", {style:StratStyle});
geojson.addTo(mymap);
It also seems like you are pointing to a wrong path for the plugin. It should be without a / at the beginning:
<script src="js/leaflet-0.7.2/leaflet.ajax.min.js"></script>
Alternatively you can also use jQuery with $.getJSON. Here is an example:
$.getJSON("StratfordBoundary.geojson", function (data) {
var StratfordBoundary = L.geoJSON(data,
{
onEachFeature: function onEachFeature(feature, layer) {
layer.bindPopup('<strong>' + feature.properties.Title + '</strong><br><br>Description: ' + feature.properties.Descr);
}
}).addTo(mymap);
});
Also try the console of your webbrowser. This may help finding your issue. Firefox and Chrome
answered 10 hours ago
MrXsquaredMrXsquared
1,3981316
When I use the first option you gave the page loads with OSM but the data still does not load on the page and there are no errors in the browser console. If I were to use Jquery would I have to call it in the header like I do with ajax?
– PVar
10 hours ago
Did you check if the path to your file is correct? Yes, call jQuery in your header like you already do and add the snippet to your script. Another thing I just noted is that you usemymapfor osm andmapfor your geojson. Usemymapfor both then. Just edited my answer with this.
– MrXsquared
10 hours ago
The geojson file is in the same folder as the HTML file so I just put the filename. Also when i changed "map" to "mymap" it still doesnt load the polygon
– PVar
10 hours ago
can you post your entire html and javascript so we can try out? only the relevant parts of course.
– MrXsquared
9 hours ago
Just included it in the original post. Let me know what I'm doing wrong. I've been stuck on this for way too long
– PVar
9 hours ago
|
show 14 more comments
3
3
3
New answer:
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
<style>
#map1 { height: 500px; width: 550px }
</style>
</head>
<body>
<div id="map1">
</div>
<script>
var mymap = L.map('map1').setView([43.370917,-80.983042], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var geojson = new L.GeoJSON.AJAX("StratfordBoundary.geojson");
geojson.on('data:loaded', function(){
geojson.addTo(mymap);
});
</script>
</body>
</html>
The errors I could find:
L.GeoJson.ajaxneeds to beL.GeoJSON.AJAX
var mymap = L.map('map1').setView([43.370917,-80.983042], 13);needs to be in your script, not inside your style definition- The
div containerfor your map was missing
However, the .html file above now works fine for me with my own test .geojson. I just drew a simple polygon in QGIS and saved it as StratfordBoundary.geojson (EPSG:4326) in the same folder as the .html file.
Old answer:
Try without a style first until it works:
var geojson = new L.GeoJSON.AJAX("StratfordBoundary.geojson");
geojson.addTo(mymap);
Add the filetype and check if the path to your .geojson is correct. Also make sure to point to the correct map instance you are using. I assume it is mymap as you use this for OSM and this one is working. If its working you can try:
var geojson = new L.GeoJSON.AJAX("StratfordBoundary.geojson", {style:StratStyle});
geojson.addTo(mymap);
It also seems like you are pointing to a wrong path for the plugin. It should be without a / at the beginning:
<script src="js/leaflet-0.7.2/leaflet.ajax.min.js"></script>
Alternatively you can also use jQuery with $.getJSON. Here is an example:
$.getJSON("StratfordBoundary.geojson", function (data) {
var StratfordBoundary = L.geoJSON(data,
{
onEachFeature: function onEachFeature(feature, layer) {
layer.bindPopup('<strong>' + feature.properties.Title + '</strong><br><br>Description: ' + feature.properties.Descr);
}
}).addTo(mymap);
});
Also try the console of your webbrowser. This may help finding your issue. Firefox and Chrome
answered 10 hours ago
MrXsquaredMrXsquared
1,3981316
New answer:
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
<style>
#map1 { height: 500px; width: 550px }
</style>
</head>
<body>
<div id="map1">
</div>
<script>
var mymap = L.map('map1').setView([43.370917,-80.983042], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var geojson = new L.GeoJSON.AJAX("StratfordBoundary.geojson");
geojson.on('data:loaded', function(){
geojson.addTo(mymap);
});
</script>
</body>
</html>
The errors I could find:
L.GeoJson.ajaxneeds to beL.GeoJSON.AJAX
var mymap = L.map('map1').setView([43.370917,-80.983042], 13);needs to be in your script, not inside your style definition- The
div containerfor your map was missing
However, the .html file above now works fine for me with my own test .geojson. I just drew a simple polygon in QGIS and saved it as StratfordBoundary.geojson (EPSG:4326) in the same folder as the .html file.
Old answer:
Try without a style first until it works:
var geojson = new L.GeoJSON.AJAX("StratfordBoundary.geojson");
geojson.addTo(mymap);
Add the filetype and check if the path to your .geojson is correct. Also make sure to point to the correct map instance you are using. I assume it is mymap as you use this for OSM and this one is working. If its working you can try:
var geojson = new L.GeoJSON.AJAX("StratfordBoundary.geojson", {style:StratStyle});
geojson.addTo(mymap);
It also seems like you are pointing to a wrong path for the plugin. It should be without a / at the beginning:
<script src="js/leaflet-0.7.2/leaflet.ajax.min.js"></script>
Alternatively you can also use jQuery with $.getJSON. Here is an example:
$.getJSON("StratfordBoundary.geojson", function (data) {
var StratfordBoundary = L.geoJSON(data,
{
onEachFeature: function onEachFeature(feature, layer) {
layer.bindPopup('<strong>' + feature.properties.Title + '</strong><br><br>Description: ' + feature.properties.Descr);
}
}).addTo(mymap);
});
Also try the console of your webbrowser. This may help finding your issue. Firefox and Chrome
answered 10 hours ago
MrXsquaredMrXsquared
1,3981316
edited 4 hours ago
answered 10 hours ago
MrXsquaredMrXsquared
1,3981316
answered 10 hours ago
MrXsquaredMrXsquared
1,3981316
answered 10 hours ago
MrXsquaredMrXsquared
1,3981316
1,3981316
When I use the first option you gave the page loads with OSM but the data still does not load on the page and there are no errors in the browser console. If I were to use Jquery would I have to call it in the header like I do with ajax?
– PVar
10 hours ago
Did you check if the path to your file is correct? Yes, call jQuery in your header like you already do and add the snippet to your script. Another thing I just noted is that you usemymapfor osm andmapfor your geojson. Usemymapfor both then. Just edited my answer with this.
– MrXsquared
10 hours ago
The geojson file is in the same folder as the HTML file so I just put the filename. Also when i changed "map" to "mymap" it still doesnt load the polygon
– PVar
10 hours ago
can you post your entire html and javascript so we can try out? only the relevant parts of course.
– MrXsquared
9 hours ago
Just included it in the original post. Let me know what I'm doing wrong. I've been stuck on this for way too long
– PVar
9 hours ago
|
show 14 more comments
When I use the first option you gave the page loads with OSM but the data still does not load on the page and there are no errors in the browser console. If I were to use Jquery would I have to call it in the header like I do with ajax?
– PVar
10 hours ago
Did you check if the path to your file is correct? Yes, call jQuery in your header like you already do and add the snippet to your script. Another thing I just noted is that you usemymapfor osm andmapfor your geojson. Usemymapfor both then. Just edited my answer with this.
– MrXsquared
10 hours ago
The geojson file is in the same folder as the HTML file so I just put the filename. Also when i changed "map" to "mymap" it still doesnt load the polygon
– PVar
10 hours ago
can you post your entire html and javascript so we can try out? only the relevant parts of course.
– MrXsquared
9 hours ago
Just included it in the original post. Let me know what I'm doing wrong. I've been stuck on this for way too long
– PVar
9 hours ago
When I use the first option you gave the page loads with OSM but the data still does not load on the page and there are no errors in the browser console. If I were to use Jquery would I have to call it in the header like I do with ajax?
– PVar
10 hours ago
When I use the first option you gave the page loads with OSM but the data still does not load on the page and there are no errors in the browser console. If I were to use Jquery would I have to call it in the header like I do with ajax?
– PVar
10 hours ago
Did you check if the path to your file is correct? Yes, call jQuery in your header like you already do and add the snippet to your script. Another thing I just noted is that you use
mymap for osm and map for your geojson. Use mymap for both then. Just edited my answer with this.– MrXsquared
10 hours ago
Did you check if the path to your file is correct? Yes, call jQuery in your header like you already do and add the snippet to your script. Another thing I just noted is that you use
mymap for osm and map for your geojson. Use mymap for both then. Just edited my answer with this.– MrXsquared
10 hours ago
The geojson file is in the same folder as the HTML file so I just put the filename. Also when i changed "map" to "mymap" it still doesnt load the polygon
– PVar
10 hours ago
The geojson file is in the same folder as the HTML file so I just put the filename. Also when i changed "map" to "mymap" it still doesnt load the polygon
– PVar
10 hours ago
can you post your entire html and javascript so we can try out? only the relevant parts of course.
– MrXsquared
9 hours ago
can you post your entire html and javascript so we can try out? only the relevant parts of course.
– MrXsquared
9 hours ago
Just included it in the original post. Let me know what I'm doing wrong. I've been stuck on this for way too long
– PVar
9 hours ago
Just included it in the original post. Let me know what I'm doing wrong. I've been stuck on this for way too long
– PVar
9 hours ago
|
show 14 more comments
2
Most probably geoJSON layer does not show because data is not loaded yet when you add layer to the map. Try with this code:
var geojson = L.geoJson.ajax('StratfordBoundary', {style: StratStyle});
geojson.on('data:loaded', function() {
mymap.addLayer(this);
});
As PVar wrote, also make sure that geoJSON file named StratfordBoundary actually exists on home directory of your project on server.
EDIT1: If you run your code locally on file system, then you must add local: true option to ajax call:
var geojson = L.geoJson.ajax('StratfordBoundary', {style: StratStyle, local: true});
answered 9 hours ago
TomazicMTomazicM
835216
So I just added that in and my data still won't load
– PVar
9 hours ago
Do you have file namedStratfordBoundaryon home directory of your project on the server? Does your server allow loading files without file type?
– TomazicM
9 hours ago
I do have it in the same directory
– PVar
9 hours ago
What about the second question? Is the file displayed if you refer to it directly in the browser:http://server/path/StratfordBoundary?
– TomazicM
9 hours ago
The geojson file is just on my machine. Not hosted on a server or anything
– PVar
8 hours ago
|
show 1 more comment
2
Most probably geoJSON layer does not show because data is not loaded yet when you add layer to the map. Try with this code:
var geojson = L.geoJson.ajax('StratfordBoundary', {style: StratStyle});
geojson.on('data:loaded', function() {
mymap.addLayer(this);
});
As PVar wrote, also make sure that geoJSON file named StratfordBoundary actually exists on home directory of your project on server.
EDIT1: If you run your code locally on file system, then you must add local: true option to ajax call:
var geojson = L.geoJson.ajax('StratfordBoundary', {style: StratStyle, local: true});
answered 9 hours ago
TomazicMTomazicM
835216
So I just added that in and my data still won't load
– PVar
9 hours ago
Do you have file namedStratfordBoundaryon home directory of your project on the server? Does your server allow loading files without file type?
– TomazicM
9 hours ago
I do have it in the same directory
– PVar
9 hours ago
What about the second question? Is the file displayed if you refer to it directly in the browser:http://server/path/StratfordBoundary?
– TomazicM
9 hours ago
The geojson file is just on my machine. Not hosted on a server or anything
– PVar
8 hours ago
|
show 1 more comment
2
2
2
Most probably geoJSON layer does not show because data is not loaded yet when you add layer to the map. Try with this code:
var geojson = L.geoJson.ajax('StratfordBoundary', {style: StratStyle});
geojson.on('data:loaded', function() {
mymap.addLayer(this);
});
As PVar wrote, also make sure that geoJSON file named StratfordBoundary actually exists on home directory of your project on server.
EDIT1: If you run your code locally on file system, then you must add local: true option to ajax call:
var geojson = L.geoJson.ajax('StratfordBoundary', {style: StratStyle, local: true});
answered 9 hours ago
TomazicMTomazicM
835216
Most probably geoJSON layer does not show because data is not loaded yet when you add layer to the map. Try with this code:
var geojson = L.geoJson.ajax('StratfordBoundary', {style: StratStyle});
geojson.on('data:loaded', function() {
mymap.addLayer(this);
});
As PVar wrote, also make sure that geoJSON file named StratfordBoundary actually exists on home directory of your project on server.
EDIT1: If you run your code locally on file system, then you must add local: true option to ajax call:
var geojson = L.geoJson.ajax('StratfordBoundary', {style: StratStyle, local: true});
answered 9 hours ago
TomazicMTomazicM
835216
edited 6 hours ago
answered 9 hours ago
TomazicMTomazicM
835216
answered 9 hours ago
TomazicMTomazicM
835216
answered 9 hours ago
TomazicMTomazicM
835216
835216
So I just added that in and my data still won't load
– PVar
9 hours ago
Do you have file namedStratfordBoundaryon home directory of your project on the server? Does your server allow loading files without file type?
– TomazicM
9 hours ago
I do have it in the same directory
– PVar
9 hours ago
What about the second question? Is the file displayed if you refer to it directly in the browser:http://server/path/StratfordBoundary?
– TomazicM
9 hours ago
The geojson file is just on my machine. Not hosted on a server or anything
– PVar
8 hours ago
|
show 1 more comment
So I just added that in and my data still won't load
– PVar
9 hours ago
Do you have file namedStratfordBoundaryon home directory of your project on the server? Does your server allow loading files without file type?
– TomazicM
9 hours ago
I do have it in the same directory
– PVar
9 hours ago
What about the second question? Is the file displayed if you refer to it directly in the browser:http://server/path/StratfordBoundary?
– TomazicM
9 hours ago
The geojson file is just on my machine. Not hosted on a server or anything
– PVar
8 hours ago
So I just added that in and my data still won't load
– PVar
9 hours ago
So I just added that in and my data still won't load
– PVar
9 hours ago
Do you have file named
StratfordBoundary on home directory of your project on the server? Does your server allow loading files without file type?– TomazicM
9 hours ago
Do you have file named
StratfordBoundary on home directory of your project on the server? Does your server allow loading files without file type?– TomazicM
9 hours ago
I do have it in the same directory
– PVar
9 hours ago
I do have it in the same directory
– PVar
9 hours ago
What about the second question? Is the file displayed if you refer to it directly in the browser:
http://server/path/StratfordBoundary?– TomazicM
9 hours ago
What about the second question? Is the file displayed if you refer to it directly in the browser:
http://server/path/StratfordBoundary?– TomazicM
9 hours ago
The geojson file is just on my machine. Not hosted on a server or anything
– PVar
8 hours ago
The geojson file is just on my machine. Not hosted on a server or anything
– PVar
8 hours ago
|
show 1 more comment
PVar is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
PVar is a new contributor. Be nice, and check out our Code of Conduct.
PVar is a new contributor. Be nice, and check out our Code of Conduct.
PVar is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Geographic Information Systems Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f311618%2fim-trying-to-add-my-local-geojson-files-to-my-leaflet-web-page%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Why is
var mymap = L.map('map1').setView([43.370917,-80.983042], 13);inside<style>? That shouldn't work at all.– obrob
8 hours ago
Idk, when I take it out it still works. I think it's just residual from something I was trying. I don't think it's an issue right now though
– PVar
8 hours ago
var mymap = L.map('map1').setView([43.370917,-80.983042], 13);creates your map variable. It must be in the code so later you can actually add your geojson to this variable which contains your map. Put it right in front ofL.tileLayerinside your js-script.– obrob
8 hours ago