index.html
<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<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" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
var nonregWash = $.getJSON("NonRegulatoryWashes.geojson", function (data) {
console.log(data);
L.geoJson(data, {
style: function (feature) {
switch (true) {
case feature.properties.Name.includes('Non-Regulatory'):
return {
color: "Red", weight: 1
};
case feature.properties.Name.includes('Regulatory'):
return {
color: "Green", weight: 1
};
default:
return {
color: "Black", weight: 1
};
}
}
})
.bindPopup(function (layer) {
return layer.feature.properties.description;
}).addTo(map);
});
</script>
</body>
</html>
NonRegulatoryWashes.geojson
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {"Name": "Non-Regulatory", "description": "First one"},
"geometry": {
"type": "LineString",
"coordinates": [
[
-0.127716064453125,
51.514511519376946
],
[
-0.11638641357421874,
51.52092072985822
],
[
-0.1091766357421875,
51.51622073035779
],
[
-0.10128021240234374,
51.51643437722083
]
]
}
},
{
"type": "Feature",
"properties": {"Name": "Other", "description": "Second one"},
"geometry": {
"type": "LineString",
"coordinates": [
[
-0.08995056152343749,
51.50660558430045
],
[
-0.083770751953125,
51.514084206610455
],
[
-0.07656097412109375,
51.51173391474148
],
[
-0.0693511962890625,
51.5100245354003
]
]
}
},
{
"type": "Feature",
"properties": {"Name": "Regulatory", "description": "Third one"},
"geometry": {
"type": "LineString",
"coordinates": [
[
-0.09063720703125,
51.492499698989036
],
[
-0.09613037109375,
51.50062180251775
],
[
-0.1036834716796875,
51.4965609316647
],
[
-0.11089324951171875,
51.4978433510224
]
]
}
}
]
}