I am new to JavaScript, HTML, and Leaflet. I would like to add a polygon to my Leaflet map.
Here is where I store the file. I want to use this file and don't want to add thousands of coordinates to my HTML. This file is stored locally and I do not know if that is an issue. T:\EY\FP.geojson
Here is what the HTML code looks like.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="map" style="height: 500px; width: 100%;"></div>
<script>
// Initialize the map and set its view to Chicago
var map = L.map('map').setView([41.881832, -87.623177], 11);
var streetLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
streetLayer.addTo(map);
// add the GeoJSON file to the map (attempt 1# this part does not work)
var geojson = new L.GeoJSON.AJAX("T:\\EY\\FP.geojson", {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name);
}
}).addTo(map);
// add the GeoJSON file to the map (attempt 2# this part also does not work)
L.geoJSON("T:\\EY\\FP.geojson").addTo(map);
</script>
</body>
</html>
Here is a sample of what the GeoJSON file looks like.
{
"type" : "FeatureCollection",
"name" : "FP",
"features" : [
{
"type" : "Feature",
"geometry" : {
"type" : "Polygon",
"coordinates" : [
[
[ -88.2635070004, 41.4695240004 ],
[ -87.1111620005, 41.4695240004 ],
[ -87.1111620005, 42.1542919999 ],
[ -88.2635070004, 42.1542919999 ],
[ -88.2635070004, 41.4695240004 ]
]
]
},
"properties" : {
"COUNTY" : "Cook County, IL",
"OBJECTID" : 1
}
},
{
"type" : "Feature",
"geometry" : {
"type" : "Polygon",
"coordinates" : [
[
[ -88.2614680002, 41.2015459998 ],
[ -87.5255909999, 41.2015459998 ],
[ -87.5255909999, 41.72893 ],
[ -88.2614680002, 41.72893 ],
[ -88.2614680002, 41.2015459998 ]
]
]
},
"properties" : {
"COUNTY" : "Will County, IL",
"OBJECTID" : 2
}
}
]
}
