<p>GeoJSON is becoming a very popular data format among many GIS technologies and services — it's simple, lightweight, straightforward, and Leaflet is quite good at handling it. In this example, you'll learn how to create and interact with map vectors created from <ahref="https://tools.ietf.org/html/rfc7946">GeoJSON</a> objects.</p>
<blockquote>GeoJSON is a format for encoding a variety of geographic data structures […]. A GeoJSON object may represent a region of space (a Geometry), a spatially bounded entity (a Feature), or a list of Features (a FeatureCollection). GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. Features in GeoJSON contain a Geometry object and additional properties, and a FeatureCollection contains a list of Features.</blockquote>
<p>Leaflet supports all of the GeoJSON types above, but <ahref="https://tools.ietf.org/html/rfc7946#section-3.2">Features</a> and <ahref="https://tools.ietf.org/html/rfc7946#section-3.3">FeatureCollections</a> work best as they allow you to describe features with a set of properties. We can even use these properties to style our Leaflet vectors. Here's an example of a simple GeoJSON feature:</p>
<p>GeoJSON objects are added to the map through a <ahref="/reference.html#geojson">GeoJSON layer</a>. To create it and add it to a map, we can use the following code:</p>
<p>The <code>style</code> option can be used to style features two different ways. First, we can pass a simple object that styles all paths (polylines and polygons) the same way:</p>
<p>Alternatively, we can pass a function that styles individual features based on their properties. In the example below we check the "party" property and style our polygons accordingly:</p>
<p>Points are handled differently than polylines and polygons. By default simple markers are drawn for GeoJSON Points. We can alter this by passing a <code>pointToLayer</code> function in a <ahref="/reference.html#geojson">GeoJSON options</a> object when creating the GeoJSON layer. This function is passed a <ahref="/reference.html#latlng">LatLng</a> and should return an instance of ILayer, in this case likely a <ahref="/reference.html#marker">Marker</a> or <ahref="/reference.html#circlemarker">CircleMarker</a>.</p>
<p>We could also set the <code>style</code> property in this example — Leaflet is smart enough to apply styles to GeoJSON points if you create a vector layer like circle inside the <code>pointToLayer</code> function.</p>
<p>The <code>onEachFeature</code> option is a function that gets called on each feature before adding it to a GeoJSON layer. A common reason to use this option is to attach a popup to features when they are clicked.</p>
<p>The <code>filter</code> option can be used to control the visibility of GeoJSON features. To accomplish this we pass a function as the <code>filter</code> option. This function gets called for each feature in your GeoJSON layer, and gets passed the <code>feature</code> and the <code>layer</code>. You can then utilise the values in the feature's properties to control the visibility by returning <code>true</code> or <code>false</code>.</p>
<p>In the example below "Busch Field" will not be shown on the map.</p>