DEV - Display address pins outside of NC boundaries

### Releases
- [ ] https://github.com/hackforla/311-data/issues/1960

### Overview

We need to modify our address search capability to notify the user when the searched address is not within one of the Neighborhood Councils so they don't get confused why their address selection does not select a Neighborhood Council.

### Action Items

- [ ] in MapSearch.jsx, L120, modify this inline function to do the following
- [ ] loop through all Neighborhood Council geometry objects
- [ ] use Turf's `booleanContains` to determine if ONE NC "contains" the position in the result
- [ ] if yes, proceed with address pin as normal
- [ ] if not, display the error that is mocked up by design.
- [ ] Use copy: "Please enter an address in Los Angeles"
- [ ] entered address should remain in the address bar (see [comment w/ reasoning](https://github.com/hackforla/311-data/issues/1896#issuecomment-2646090339))
- [ ] once PR has been merged, release [#1960](https://github.com/hackforla/311-data/issues/1960):
- [ ] Move [#1960](https://github.com/hackforla/311-data/issues/1960) from Icebox (on hold) (https://github.com/orgs/hackforla/projects/63/views/1?filterQuery=status%3A%22Icebox+%28on+hold%29%22) to New Issue Approval (https://github.com/orgs/hackforla/projects/63/views/1?filterQuery=status%3A%22New+Issue+Approval%22)
- [ ] remove label: https://github.com/hackforla/311-data/labels/Dependency
- [ ] add label: https://github.com/hackforla/311-data/labels/ready%20for%20dev%20lead

### Resources/Instructions

#### Design Hand Off Material

- Figma design file link: [Display address pins outside of NC boundaries #1847]( https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=15781-7303&m=dev)
- Related previous ticket: https://github.com/hackforla/311-data/issues/1847

Before Screenshot

Example: Far from Los Angeles - Miami

Example: Next to Los Angeles - West Hollywood

Example: Outside Los Angeles but nearby - Thousand Oaks

Finalized Proposed changes

Full Screen

Zoomed

Screenshot of localhost

[insert screenshot here]

#### Developer Resources: RFC7946 (referenced in Turf.js docs)

Section 1.4: Definitions

Link: [Section 1.4: Definitions](https://datatracker.ietf.org/doc/html/rfc7946#section-1.4)

Geometries
```
o Inside this document, the term "geometry type" refers to seven
case-sensitive strings: "Point", "MultiPoint", "LineString",
"MultiLineString", "Polygon", "MultiPolygon", and
"GeometryCollection".

```

GeoJSON Types (includes Geometries)
```
o As another shorthand notation, the term "GeoJSON types" refers to
nine case-sensitive strings: "Feature", "FeatureCollection", and
the geometry types listed above.
```

Collections are just arrays
```
o The word "Collection" in "FeatureCollection" and
"GeometryCollection" does not have any significance for the
semantics of array members. The "features" and "geometries"
members, respectively, of these objects are standard ordered JSON
arrays, not unordered sets.
```

Section 3.1: Geometry Objects

[Section 3.1: Geometry Objects](https://datatracker.ietf.org/doc/html/rfc7946#section-3.1)

Geometry object vs GeoJSON object
```
A Geometry object represents points, curves, and surfaces in
coordinate space. Every Geometry object is a GeoJSON object no
matter where it occurs in a GeoJSON text.
```

Geometries are not debatable!
```
o The value of a Geometry object's "type" member MUST be one of the
seven geometry types (see Section 1.4).
```

All Geometries have coordinates
```
o A GeoJSON Geometry object of any type other than
"GeometryCollection" has a member with the name "coordinates".
The value of the "coordinates" member is an array. The structure
of the elements in this array is determined by the type of
geometry. GeoJSON processors MAY interpret Geometry objects with
empty "coordinates" arrays as null objects.
```

Section 3.1.1: Position

Link: [Section 3.1.1: Position](https://datatracker.ietf.org/doc/html/rfc7946#section-3.1.1)

Abridged definition of Position (as it pertains to geocoder results & NC boundaries)
```
A position is the fundamental geometry construct. The "coordinates"
member of a Geometry object is composed of either:
o one position in the case of a Point geometry,
...
o an array of LineString or linear ring (see [Section 3.1.6](https://datatracker.ietf.org/doc/html/rfc7946#section-3.1.6))
coordinates in the case of a Polygon or MultiLineString geometry,
...
```

Basic requirements for "position"
```
A position is an array of numbers. There MUST be two or more
elements. The first two elements are longitude and latitude, or
easting and northing, precisely in that order and using decimal
numbers. Altitude or elevation MAY be included as an optional third
element.
```

Section 3.2: Feature

Link: [Section 3.2: Feature](https://datatracker.ietf.org/doc/html/rfc7946#section-3.2)

Features are GeoJSON objects
```
A Feature object represents a spatially bounded thing. Every Feature
object is a GeoJSON object no matter where it occurs in a GeoJSON
text.
```

Properties are where we store information about the Feature
```
o A Feature object has a member with the name "properties". The
value of the properties member is an object (any JSON object or a
JSON null value).
```

#### Other Dev Resources

Notes on Turf.js::booleanContains()

- our current build already utilizes Turf.js as a dependency:
- From our [package.json](https://github.com/hackforla/311-data/blob/main/package.json) ... `"@turf/turf": "^6.5.0",`
- we can use `booleanContains` to determine if a Lat/Lng (Feature) are contained within an NC boundary (Geometry)
- doc page: https://turfjs.org/docs/api/booleanContains
- Geocoder "result" is the object we receive when selecting an address
- in MapSearch.jsx, L120: `this.geocoder.on('result', ({result}) => { ... }`
- see example of `result` object in dropdown
- I couldn't find Mapbox documentation for MapboxGeocoder's `on('result', ...)`, feel free to have a look at the [Geocoder API page](https://docs.mapbox.com/api/search/geocoding-v5/)

Example of MapSearch.jsx this.geocoder.on('result', ...) JSON Object

When searching "1938 S Bedford Street" and clicking on the dropdown menu item:

```
{
"id": "address.4043252588369924",
"type": "Feature",
"place_type": [
"address"
],
"relevance": 1,
"properties": {
"accuracy": "rooftop",
"mapbox_id": "dXJuOm1ieGFkcjowODY5YWU4OC0xYjQ3LTQ2NjAtYjhlYy0yNjg1ZTZjZDJhNjg"
},
"text_en-US": "South Bedford Street",
"place_name_en-US": "1938 South Bedford Street, Los Angeles, California 90034, United States",
"text": "South Bedford Street",
"place_name": "1938 South Bedford Street, Los Angeles, California 90034, United States",
"center": [
-118.383005,
34.042748
],
"geometry": {
"type": "Point",
"coordinates": [
-118.383005,
34.042748
]
},
"address": "1938",
"context": [
{
"id": "neighborhood.339086572",
"mapbox_id": "dXJuOm1ieHBsYzpGRFlNN0E",
"text_en-US": "La Cienega Heights",
"text": "La Cienega Heights"
},
{
"id": "postcode.300297964",
"mapbox_id": "dXJuOm1ieHBsYzpFZVl1N0E",
"text_en-US": "90034",
"text": "90034"
},
{
"id": "place.192407788",
"mapbox_id": "dXJuOm1ieHBsYzpDM2ZvN0E",
"wikidata": "Q65",
"text_en-US": "Los Angeles",
"language_en-US": "en",
"text": "Los Angeles",
"language": "en"
},
{
"id": "district.14051052",
"mapbox_id": "dXJuOm1ieHBsYzoxbWJz",
"wikidata": "Q104994",
"text_en-US": "Los Angeles County",
"language_en-US": "en",
"text": "Los Angeles County",
"language": "en"
},
{
"id": "region.419052",
"mapbox_id": "dXJuOm1ieHBsYzpCbVRz",
"wikidata": "Q99",
"short_code": "US-CA",
"text_en-US": "California",
"language_en-US": "en",
"text": "California",
"language": "en"
},
{
"id": "country.8940",
"mapbox_id": "dXJuOm1ieHBsYzpJdXc",
"wikidata": "Q30",
"short_code": "us",
"text_en-US": "United States",
"language_en-US": "en",
"text": "United States",
"language": "en"
}
]
}
```