### Core Commands for Project Release

Source: https://github.com/airbnb/airmapview/blob/master/RELEASING.md

Essential shell commands executed during the project release workflow. These include Git operations for committing changes and tagging versions, as well as Gradle commands for cleaning and uploading artifacts. Remember to replace placeholder version numbers (X.Y.Z) with actual release details.

```Shell
git commit -am "Prepare for release X.Y.Z."
```

```Shell
git tag -a X.Y.X -m "Version X.Y.Z"
```

```Shell
./gradlew clean uploadArchives
```

```Shell
git commit -am "Prepare next development version."
```

```Shell
git push && git push --tags
```

--------------------------------

### Start and Stop User Location Tracking

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

Functions to enable and disable the display of the user's current location on the map using the GeolocationMarker, providing visual feedback of the user's position.

```JavaScript
function startTrackingUserLocation() { GeoMarker.setMap(map); }

function stopTrackingUserLocation() { GeoMarker.setMap(null); }
```

--------------------------------

### Get Map Center Coordinates (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Retrieves the current padded center coordinates of the map. The coordinates are converted and then passed to the native `AirMapView.mapCenterCallback` method.

```javascript
function getCenter() {
  var latLng = getPaddedCenter();
  if (latLng != null) {
    var convertedLatLng = reverseConvertLatLng([ latLng.lat, latLng.lng ]);
    AirMapView.mapCenterCallback(convertedLatLng[0], convertedLatLng[1]);
  }
}
```

--------------------------------

### Get Screen Location from LatLng (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Converts geographical coordinates (latitude, longitude) to screen pixel coordinates relative to the map view. The resulting screen location is then scaled by `window.devicePixelRatio` and passed to the native `AirMapView.getLatLngScreenLocationCallback` method.

```javascript
function getScreenLocation(lat, lng) {
  var latLng = convertLatLng([lat, lng]);
  var latLngObject = L.latLng(latLng[0], latLng[1]);
  var screenLocation = map.latLngToContainerPoint(latLngObject);
  AirMapView.getLatLngScreenLocationCallback(screenLocation.x * window.devicePixelRatio, screenLocation.y * window.devicePixelRatio);
}
```

--------------------------------

### Get Map View Bounds (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Retrieves the current geographical bounds (northeast and southwest corners) of the map view. The coordinates are converted and then passed to the native `AirMapView.getBoundsCallback` method.

```javascript
function getBounds() {
  bounds = map.getBounds();
  ne = bounds.getNorthEast();
  sw = bounds.getSouthWest();
  var convertedNe = reverseConvertLatLng([ ne.lat, ne.lng ]);
  var convertedSw = reverseConvertLatLng([ sw.lat, sw.lng ]);
  AirMapView.getBoundsCallback(convertedNe[0], convertedNe[1], convertedSw[0], convertedSw[1]);
}
```

--------------------------------

### Get Google Maps Viewport Bounds

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

This function calculates the geographical bounds (northeast and southwest corners) of the current map viewport. It then sends these coordinates to the native `AirMapView.getBoundsCallback`.

```javascript
function getBounds() {
  bounds = map.getBounds();
  ne = bounds.getNorthEast();
  sw = bounds.getSouthWest();
  AirMapView.getBoundsCallback(ne.lat(), ne.lng(), sw.lat(), sw.lng());
}
```

--------------------------------

### Get Marker Icon URL Based on Region

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

Determines the appropriate Google Maps marker icon URL based on whether 'China Mode' is active, ensuring correct icon paths for different regions (e.g., Google.cn vs. Google.com).

```JavaScript
function getMarkerIcon(iconFile) { if (markerIconPrefix === undefined) { markerIconPrefix = AirMapView.isChinaMode() ? 'http://ditu.google.cn/mapfiles/ms/icons/' : 'http://maps.google.com/mapfiles/ms/icons/'; } return markerIconPrefix + iconFile; }
```

--------------------------------

### Get Google Maps Center Coordinates

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

This function retrieves the current center latitude and longitude of the Google Map. It then passes these coordinates to the native `AirMapView.mapCenterCallback` for use in the native application.

```javascript
function getCenter() {
  var latLng = map.getCenter();
  if (latLng != null) {
    AirMapView.mapCenterCallback(latLng.lat(), latLng.lng());
  }
}
```

--------------------------------

### Initialize Google Map and Global Variables

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

Initializes the Google Map instance, sets default options, attaches event listeners, and sets up the GeolocationMarker for user location tracking. Includes necessary CSS and global variable declarations for map elements and state.

```CSS
html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px }
```

```JavaScript
var map; var infoWindow = null; var markers = {}; var infoWindowContent = {}; var polylines = {}; var polygons = {}; var moveTimeout; var GeoMarker = null; var markerIconPrefix; function initialize() { var mapOptions = { zoom: 10, disableDefaultUI: true, center: new google.maps.LatLng(0, 0) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); GeoMarker = new GeolocationMarker(); GeoMarker.setCircleOptions({fillColor: '#808080'}); // Access to an overlay allows us to easily find pixel location on the map overlay = new google.maps.OverlayView(); overlay.draw = function() {}; overlay.setMap(map); google.maps.event.addListener(map, 'click', mapClick); google.maps.event.addListener(map, 'center_changed', mapMove) AirMapView.onMapLoaded(); }
```

--------------------------------

### Initialize Google Map on Window Load

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

This snippet registers an event listener to initialize the Google Map when the browser window has finished loading. It ensures that the `initialize` function (not provided in this snippet) is called at the appropriate time to set up the map.

```javascript
google.maps.event.addDomListener(window, 'load', initialize);
```

--------------------------------

### Initialize Leaflet Map and Event Listeners

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

This snippet initializes the Leaflet map instance, sets up global variables for map elements (markers, polylines, polygons), configures initial map options, adds a default tile layer, and registers event handlers for map clicks, double-clicks, and move-end events. It also calls `AirMapView.onMapLoaded()` upon map readiness.

```JavaScript
var markers = {};
var polylines = {};
var polygons = {};
var moveTimeout;
var mapOption = { center: [23.16, 113.23], zoom: 12, zoomControl: false };
var paddingLeft = 0;
var paddingRight = 0;
var paddingTop = 0;
var paddingBottom = 0;
var newMarkerZIndexOffset = 1000;
var singleClick = false;
var tileLayer = L.tileLayer.provide('Normal');
if (CRS != null) {
  mapOption['crs'] = CRS;
};
var map = L.map('map', mapOption);
tileLayer.addTo(map);
AirMapView.onMapLoaded();
map.on('click', function(event) {
  singleClick = true;
  setTimeout(function() {
    if (singleClick) {
      mapClick(event);
      singleClick = false;
    }
  }, 200);
});
map.on('dblclick', function(event) {
  singleClick = false;
});
map.on('moveend', function(event) {
  mapMove();
});
```

--------------------------------

### Initialize AirMapView in Java Code

Source: https://github.com/airbnb/airmapview/blob/master/README.md

After defining `AirMapView` in your layout, initialize it in your Java code by finding the view by its ID. Call the `initialize()` method, passing your `FragmentManager` to set up the map's lifecycle and provider management.

```java
mapView = (AirMapView) findViewById(R.id.map_view);
mapView.initialize(getSupportFragmentManager());
```

--------------------------------

### Create Google Maps Circle Overlay

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

This snippet demonstrates how to create a circular overlay on a Google Map. It takes parameters for stroke, fill, weight, and position to define the circle's appearance and location, utilizing a helper function for color formatting.

```javascript
populationOptions = { strokeColor: formatColor(strokeColor), strokeOpacity: 0.50, strokeWeight: strokeWeight, fillColor: formatColor(fillColor), fillOpacity: 0.35, map: map, center: position, radius: radius };
cityCircle = new google.maps.Circle(populationOptions);
```

--------------------------------

### Add Markers to Google Map with ID and Info Window Content

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

Functions to add new markers to the map, supporting basic markers or markers with unique IDs, titles, snippets, and draggable properties. Includes event listeners for marker clicks and drag events, interacting with `AirMapView` callbacks.

```JavaScript
function addMarker(lat, lng) { var position = new google.maps.LatLng(lat, lng); var marker = new google.maps.Marker({ position: position, map: map, icon: getMarkerIcon('green-dot.png') }); }

function addMarkerWithId(lat, lng, id, title, snippet) { addMarkerWithId(lat, lng, id, title, snippet, false); }

function addMarkerWithId(lat, lng, id, title, snippet, draggable) { var position = new google.maps.LatLng(lat, lng); var marker = new google.maps.Marker({ position: position, map: map, icon: getMarkerIcon('red-dot.png'), draggable: draggable }); if(title != "null" || snippet != "null") { var content = document.createElement("div"); if(title != "null") { content.innerHTML += '<div id="title"><b>' + title + '</b></div>';
```

--------------------------------

### Show Default Info Window (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Placeholder function for showing a default info window. As per the comment, this functionality is currently not needed or implemented.

```javascript
function showDefaultInfoWindow(id){ 
  // Not needed 
}
```

--------------------------------

### Leaflet Tile Layer Providers Configuration

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Defines a comprehensive configuration object `L.tileLayer.providers` for integrating various map tile services (Baidu, Gaode, Google, Google China) with Leaflet.js. Each provider specifies map URLs for normal, satellite, and terrain layers, along with attribution, subdomains, and TMS settings. Baidu also includes references to its specific coordinate conversion functions and CRS.

```JavaScript
L.tileLayer.providers = { Baidu: { Normal: { map: 'http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler={scaler}&p=1', subdomains: '0123456789', tms: true }, Satellite: { map: 'http://shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46', subdomains: '0123456789', tms: true }, Information: { attribution: 'Map data &copy; Baidu' }, LatLngConvertor: GCJ02toBD09, LatLngReverseConvertor: BD09toGCJ02, CRS: L.CRS.Baidu }, Gaode: { Normal: { map: 'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&scl=1&size=1&scale=1&style=8&x={x}&y={y}&z={z}', subdomains: ["1", "2", "3", "4"], tms: false }, Satellite: { map: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', subdomains: ["1", "2", "3", "4"], tms: false }, Information: { attribution: 'Map data &copy; Gaode' } }, Google: { Normal: { map: 'https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i423123272!3m9!2sLANGTOKEN!3sREGIONTOKEN!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!5f2!23i1301875', subdomains: [], tms: false }, Satellite: { map: 'https://maps.googleapis.com/maps/vt?lyrs=s@189&gl=LANGTOKEN&x={x}&y={y}&z={z}', subdomains: [], tms: false }, Terrain: { map: 'https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e4!2st!3i427!2m3!1e0!2sr!3i427129704!3m12!2sLANGTOKEN!3sREGIONTOKEN!5e18!12m4!1e68!2m2!1sset!2sTerrain!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!5f2!23i1301875', subdomains: [], tms: false }, Information: { attribution: 'Map data &copy; Google' } }, GoogleChina: { Normal: { map: 'https://ditu.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i423123272!3m9!2sLANGTOKEN!3sREGIONTOKEN!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!5f2!23i1301875', subdomains: [], tms: false }, Satellite: { map: 'https://ditu.google.cn/maps/vt?lyrs=s@189&gl=LANGTOKEN&x={x}&y={y}&z={z}', subdomains: [], tms: false }, Terrain: { map: 'https://ditu.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e4!2st!3i427!2m3!1e0!2sr!3i427129704!3m12!2sLANGTOKEN!3sREGIONTOKEN!5e18!12m4!1e68!2m2!1sset!2sTerrain!12m3!1e37!2m1!1ssmartmaps!4e0!5m1!5f2!23i1301875', subdomains: [], tms: false }, Information: { attribution: 'Map data &copy; Google' } } };
```

--------------------------------

### Manage and Customize Map Markers

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

This set of functions handles the creation, customization, and management of markers on the map. It includes utilities for generating default and image-based icons, highlighting/unhighlighting markers, and adding markers with various properties such as ID, title, snippet, draggability, and custom image HTML.

```JavaScript
function icon(highlight) {
  var size = window.devicePixelRatio;
  if (highlight) size = size * 2 / 3;
  return L.icon({
    iconUrl: 'file:///android_asset/images/marker-icon.png',
    iconSize: [50 / size, 82 / size],
    iconAnchor: [25 / size, 82 / size],
    popupAnchor: [0, -82 / size],
    shadowUrl: 'file:///android_asset/images/marker-shadow.png',
    shadowSize: [40 / size, 40 / size],
    shadowAnchor: [25 / size, 82 / size]
  });
}

function iconWithImage(imgHtml, width, height) {
  return L.divIcon({
    className: 'leaflet-div-ico',
    html: imgHtml,
    popupAnchor: [0, -height],
    iconAnchor: [width / 2, height]
  });
}

function highlightMarker(markerId) {
  var marker = markers[markerId];
  if (marker != null) {
    marker.setIcon(icon(true));
  }
}

function unhighlightMarker(markerId) {
  var marker = markers[markerId];
  if (marker != null) {
    marker.setIcon(icon(false));
  }
}

function addMarker(lat, lng) {
  var marker = L.marker(convertLatLng([lat, lng]), { icon: icon(false), zIndexOffset: newMarkerZIndexOffset });
  newMarkerZIndexOffset += 1000;
  marker.addTo(map);
  markers.push(marker);
}

function addMarkerWithId(lat, lng, id, title, snippet) {
  addMarkerWithId(lat, lng, id, title, snippet, false);
}

function addMarkerWithId(lat, lng, id, title, snippet, draggable) {
  addMarkerWithId(lat, lng, id, title, snippet, draggable, null, 0, 0);
}

function addMarkerWithId(lat, lng, id, title, snippet, draggable, imgHtml, imgWidth, imgHeight) {
  var markerIcon;
  if (imgHtml != null) {
    markerIcon = iconWithImage(imgHtml, imgWidth, imgHeight);
  } else {
    markerIcon = icon(false);
  }
  var marker = L.marker(convertLatLng([lat, lng]), { icon: markerIcon, draggable: draggable, zIndexOffset: newMarkerZIndexOffset });
  newMarkerZIndexOffset += 1000;
  marker.addTo(map);
  if(title != "null" || snippet != "null") {
    var content = document.createElement("div");
    if(title != "null") {
      content.innerHTML += '<div id="title"><b>' + title + '</b></div>';
    }
    if(snippet != "null") {
      content.innerHTML += '<div id="snippet">' + snippet + '</div>';
    }
    marker.bindPopup(content);
  }
  markers[id] = marker;
  marker.on("click", function(ev) {
    AirMapView.markerClick(id);
  });
  marker.on("dragstart", function(ev) {
    var latLng = reverseConvertLatLng([ev.target.getLatLng().lat, ev.target.getLatLng().lng]);
    AirMapView.markerDragStart(id, latLng[0], latLng[1]);
  });
}
```

--------------------------------

### Add AirMapView Gradle Dependency

Source: https://github.com/airbnb/airmapview/blob/master/README.md

To integrate AirMapView into your Android project, add the specified `compile` dependency to your `build.gradle` file. This makes the AirMapView library available for use in your application.

```groovy
compile 'com.airbnb.android:airmapview:1.8.0'
```

--------------------------------

### JavaScript LatLng Conversion Wrapper Functions

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Defines wrapper functions (`latLngConvertor`, `latLngReverseConvertor`, `convertLatLng`, `reverseConvertLatLng`, `convertLatLngs`) to abstract and apply coordinate transformations. These functions allow for dynamic assignment of conversion logic and can process single coordinates or arrays of coordinates.

```JavaScript
var latLngConvertor = function(latLng) { return latLng; }; var latLngReverseConvertor = function(latLng) { return latLng; }; var CRS = null; function convertLatLng(latLng) { return latLngConvertor(latLng); } function reverseConvertLatLng(latLng) { return latLngReverseConvertor(latLng); } function convertLatLngs(latLngs) { len = latLngs.length; var convertedLatLngs = new Array(len); for (var i = 0; i < len; i++) { convertedLatLngs[i] = convertLatLng(latLngs[i]); } return convertedLatLngs; }
```

--------------------------------

### Configure Mapbox Access in AndroidManifest XML

Source: https://github.com/airbnb/airmapview/blob/master/README.md

To enable Mapbox Web maps, embed your Mapbox `ACCESS_TOKEN` and `MAP_ID` as `meta-data` tags within the `<application>` element of your `AndroidManifest.xml`. These credentials are required for AirMapView to authenticate and load Mapbox tiles.

```xml
<meta-data
    android:name="com.mapbox.ACCESS_TOKEN"
    android:value=ACCESS_TOKEN/>
<meta-data
    android:name="com.mapbox.MAP_ID"
    android:value=MAP_ID/>
```

--------------------------------

### Add a Polyline to the Map (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Adds a polyline to the map using a list of points, a unique ID, stroke weight, and color. The color is formatted, points are converted, and the polyline is added to the map and stored in the `polylines` collection.

```javascript
function addPolyline(points, id, strokeWeight, color) {
  color = formatColor(color);
  var polyLine = L.polyline(convertLatLngs(points), {color: color, weight: strokeWeight / window.devicePixelRatio}).addTo(map);
  polylines[id] = polyLine;
}
```

--------------------------------

### Add Markers to AirMapView in Java

Source: https://github.com/airbnb/airmapview/blob/master/README.md

Add interactive markers to your AirMapView using the `addMarker()` method. Create an `AirMapMarker` instance with a `LatLng` and a unique `markerId`, then optionally set a title and an icon resource ID for custom appearance.

```java
map.addMarker(new AirMapMarker(latLng, markerId)
            .setTitle("Airbnb HQ")
            .setIconId(R.drawable.icon_location_pin));
```

--------------------------------

### Highlight and Unhighlight Specific Markers

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

Changes the icon of a specific marker to visually indicate its highlighted or unhighlighted state, typically used for user interaction feedback.

```JavaScript
function highlightMarker(markerId) { var marker = markers[markerId]; if (marker != null) { marker.setIcon(getMarkerIcon('purple-dot.png')); } }

function unhighlightMarker(markerId) { var marker = markers[markerId]; if (marker != null) { marker.setIcon(getMarkerIcon('red-dot.png')); } }
```

--------------------------------

### Basic CSS Styling for Map Container

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Provides essential CSS rules to ensure the map container (`#map`) occupies the full width and height of the viewport, removing default body padding and margin.

```CSS
body { padding: 0; margin: 0; } html, body, #map { width: 100%; height: 100%; }
```

--------------------------------

### Leaflet Utility Function to Provide Tile Layers

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

A helper function `L.tileLayer.provide` that dynamically creates and returns a Leaflet tile layer based on a specified `mapType` from the `L.tileLayer.providers` configuration. It also ensures that the correct coordinate conversion functions (`latLngConvertor`, `latLngReverseConvertor`) and Coordinate Reference System (`CRS`) are set if defined for the chosen map provider. Note: The provided code snippet is incomplete.

```JavaScript
L.tileLayer.provide = function(mapType) { var type = 'MAPURL'; var layerProvider = L.tileLayer.providers[type][mapType]; if (layerProvider == null) { return null; } if (L.tileLayer.providers[type]['LatLngConvertor']) { latLngConvertor = L.tileLayer.providers[type].LatLngConvertor; } if (L.tileLayer.providers[type]['LatLngReverseConvertor']) { latLngReverseConvertor = L.tileLayer.providers[type].LatLngReverseConvertor; } CRS = L.tileLayer.providers[type]['CRS']; var layer = L.tileLayer(layerProvider.map, { attribution: L.tileLayer.providers[type].Information.attribution, subdomains: layerP
```

--------------------------------

### Handle Map Move Event with Debounce (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Registers a handler for map move events, debounced to prevent excessive calls to the native bridge. After a 200ms delay, the map's padded center and zoom level are retrieved, converted, and passed to the native `AirMapView.mapMove` method.

```javascript
function mapMove() {
  if (moveTimeout != null) {
    clearTimeout(moveTimeout);
  }
  // javascript bridge not fast enough to handle events immediately.
  moveTimeout = setTimeout(function() {
    var latLng = getPaddedCenter();
    if (latLng != null) {
      var convertedLatLng = reverseConvertLatLng([ latLng.lat, latLng.lng ]);
      AirMapView.mapMove(convertedLatLng[0], convertedLatLng[1], map.getZoom());
    }
  }, 200);
}
```

--------------------------------

### Control Map Bounds, Center, and Zoom Level

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

Provides functions to programmatically adjust the map's visible area by fitting it to specific geographic bounds, centering it on given coordinates, or changing its zoom level.

```JavaScript
function setBounds(neLat, neLng, swLat, swLng) { var sw = new google.maps.LatLng(swLat, swLng); var ne = new google.maps.LatLng(neLat, neLng); var center = new google.maps.LatLngBounds(sw, ne); map.fitBounds(center) }

function centerMap(lat, lng) { var latLng = new google.maps.LatLng(lat, lng); map.setCenter(latLng); }

function setZoom(zoom) { map.setZoom(zoom); }
```

--------------------------------

### Define AirMapView in Android Layout XML

Source: https://github.com/airbnb/airmapview/blob/master/README.md

Declare the `AirMapView` component in your Android layout XML file. This sets up the view container for the map, allowing it to occupy the specified `layout_width` and `layout_height` within your activity or fragment.

```xml
<com.airbnb.android.airmapview.AirMapView
        android:id="@+id/map_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
```

--------------------------------

### Add a Polygon to the Map (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Adds a polygon to the map using a list of points, a unique ID, stroke weight, stroke color, and fill color. Colors are formatted, points are converted, and the polygon is added to the map and stored in the `polygons` collection.

```javascript
function addPolygon(points, id, strokeWeight, strokeColor, fillColor) {
  strokeColor = formatColor(strokeColor);
  fillColor = formatColor(fillColor);
  var polygon = L.polygon(convertLatLngs(points), {color: strokeColor, fillColor: fillColor, weight: strokeWeight / window.devicePixelRatio}).addTo(map);
  polygons[id] = polygon;
}
```

--------------------------------

### Control Map View, Bounds, and Zoom

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Provides functions to programmatically control the map's view, including clearing all existing markers, setting the visible bounds, adjusting coordinates for padding, centering the map at a specific latitude/longitude (with or without animation), and setting the zoom level. It also allows changing the base map tile type.

```JavaScript
function clearMarkers() {
  for (var key in markers) {
    map.removeLayer(markers[key]);
  }
  markers = {};
}

function setBounds(neLat, neLng, swLat, swLng) {
  var neLatLng = convertLatLng([ neLat, neLng ]);
  var swLatLng = convertLatLng([ swLat, swLng ]);
  var southWest = L.latLng(neLatLng[0], neLatLng[1]);
  var northEast = L.latLng(swLatLng[0], swLatLng[1]);
  var bounds = L.latLngBounds(southWest, northEast);
  map.fitBounds(bounds);
}

function paddingLatLngFromLatLng(latlng, zoom) {
  var point = map.project(latlng, zoom);
  point.x = point.x - (paddingLeft - paddingRight) / 2;
  point.y = point.y - (paddingTop - paddingBottom) / 2;
  return map.unproject(point, zoom);
}

function latLngFromPaddingLatLng(latlng, zoom) {
  var point = map.project(latlng, zoom);
  point.x = point.x + (paddingLeft - paddingRight) / 2;
  point.y = point.y + (paddingTop - paddingBottom) / 2;
  return map.unproject(point, zoom);
}

function centerMap(lat, lng) {
  centerZoomMap(lat, lng, map.getZoom());
}

function centerZoomMap(lat, lng, zoom) {
  var latLng = convertLatLng([lat, lng]);
  map.setView(paddingLatLngFromLatLng(L.latLng(latLng[0], latLng[1]), zoom), zoom, {animate:false});
}

function animateCenterMap(lat, lng) {
  animateCenterZoomMap(lat, lng, map.getZoom());
}

function animateCenterZoomMap(lat, lng, zoom) {
  var latLng = convertLatLng([lat, lng]);
  map.flyTo(paddingLatLngFromLatLng(L.latLng(latLng[0], latLng[1]), zoom), zoom, {duration:0.5});
}

function setZoom(zoom) {
  map.setZoomAround(getPaddedCenter(), zoom);
}

function setMapTypeId(mapType) {
  var newTileLayer = L.tileLayer.provide(mapType);
  if (newTileLayer != null) {
    map.removeLayer(tileLayer);
    tileLayer = newTileLayer;
    tileLayer.addTo(map);
  }
}
```

--------------------------------

### JavaScript Coordinate Conversion Functions (GCJ02 to BD09 and vice versa)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Implements functions to convert geographical coordinates between the GCJ-02 (Chinese national standard) and BD-09 (Baidu Map) coordinate systems. These functions handle both array `[lat, lng]` and object `{lat, lng}` input/output formats.

```JavaScript
var x_PI = Math.PI * 3000.0 / 180.0; function GCJ02toBD09(latLng) { var lat, lng; if (Array.isArray(latLng)) { lat = latLng[0], lng = latLng[1]; } else { lat = latLng.lat, lng = latLng.lng; } var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI); var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI); var bd_lng = z * Math.cos(theta) + 0.0065; var bd_lat = z * Math.sin(theta) + 0.006; if (Array.isArray(latLng)) { return [bd_lat, bd_lng]; } else { return {'lat': bd_lat, 'lng': bd_lng}; } } function BD09toGCJ02(latLng) { var lat, lng; if (Array.isArray(latLng)) { lat = latLng[0], lng = latLng[1]; } else { lat = latLng.lat, lng = latLng.lng; } var x = lng - 0.0065; var y = lat - 0.006; var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_PI); var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_PI); var gg_lng = z * Math.cos(theta); var gg_lat = z * Math.sin(theta); if (Array.isArray(latLng)) { return [gg_lat, gg_lng]; } else { return {'lat': gg_lat, 'lng': gg_lng}; } }
```

--------------------------------

### Set Map View Padding (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Sets the padding for the map view. The provided padding values (left, top, right, bottom) are adjusted by `window.devicePixelRatio` before being stored internally, likely affecting how the map's center and bounds are calculated.

```javascript
function setPadding(left, top, right, bottom) {
  paddingLeft = left / window.devicePixelRatio;
  paddingTop = top / window.devicePixelRatio;
  paddingRight = right / window.devicePixelRatio;
  paddingBottom = bottom / window.devicePixelRatio;
}
```

--------------------------------

### Convert LatLng to Screen Pixels

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

This function converts a given geographical latitude and longitude into screen pixel coordinates relative to the map container. The resulting X and Y coordinates are then sent to `AirMapView.getLatLngScreenLocationCallback`.

```javascript
function getScreenLocation(lat, lng) {
  latLng = new google.maps.LatLng(lat, lng)
  screenLocation = overlay.getProjection().fromLatLngToContainerPixel(latLng);
  AirMapView.getLatLngScreenLocationCallback(screenLocation.x, screenLocation.y)
}
```

--------------------------------

### Handle Map Click Event (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Registers a handler for map click events. When the map is clicked, the event's latitude and longitude are converted and passed to the native `AirMapView.mapClick` method.

```javascript
function mapClick(event) {
  var latLng = reverseConvertLatLng([ event.latlng.lat, event.latlng.lng ]);
  AirMapView.mapClick(latLng[0], latLng[1]);
}
```

--------------------------------

### Handle Google Maps Move Event with Debounce

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

This function handles map movement events, debouncing them to prevent excessive calls to the native bridge. After a 200ms delay, it sends the map's current center coordinates and zoom level to `AirMapView.mapMove`.

```javascript
function mapMove() {
  if (moveTimeout != null) {
    clearTimeout(moveTimeout);
  }
  // javascript bridge not fast enough to handle events immediately.
  moveTimeout = setTimeout(function() {
    var latLng = map.getCenter();
    if (latLng != null) {
      AirMapView.mapMove(latLng.lat(), latLng.lng(), map.getZoom());
    }
  }, 200);
}
```

--------------------------------

### Calculate Padded Map Center (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Internal helper function that returns the center `LatLng` of the map view, adjusted for any applied padding. It uses `latLngFromPaddingLatLng` and the current map center and zoom.

```javascript
function getPaddedCenter() {
  return latLngFromPaddingLatLng(map.getCenter(), map.getZoom());
}
```

--------------------------------

### Handle Google Maps Click Event and Bridge to Native

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

This function captures map click events, extracts the latitude and longitude, and then passes these coordinates to the native `AirMapView.mapClick` method. It also closes any open info windows upon a new click.

```javascript
function mapClick(event) {
  AirMapView.mapClick(event.latLng.lat(), event.latLng.lng());
  if(infoWindow){
    infoWindow.close();
  }
}
```

--------------------------------

### Format Android Integer Color to Web Hex

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

This utility function converts an Android integer color value into a web-compatible hexadecimal color string. It ensures the output is always a 6-digit hex code prefixed with '#', suitable for CSS or canvas drawing.

```javascript
function formatColor(color) {
  return '#' + ('000000' + (0xFFFFFF & color).toString(16)).slice(-6);
}
```

--------------------------------

### Handle Marker Drag Events (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Registers event listeners for marker drag and drag-end events. When a marker is dragged, its new latitude and longitude are converted and passed to the native `AirMapView.markerDrag` method. Upon drag completion, `AirMapView.markerDragEnd` is called with the final coordinates.

```javascript
marker.on("drag", function(ev) {
  var latLng = reverseConvertLatLng([ev.target.getLatLng().lat, ev.target.getLatLng().lng]);
  AirMapView.markerDrag(id, latLng[0], latLng[1]);
});
marker.on("dragend", function(ev) {
  var latLng = reverseConvertLatLng([ev.target.getLatLng().lat, ev.target.getLatLng().lng]);
  AirMapView.markerDragEnd(id, latLng[0], latLng[1]);
});
```

--------------------------------

### Add a Circle to the Map (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Adds a circle to the map at a specified latitude and longitude with a given radius, stroke color, stroke weight, and fill color. Colors are formatted, coordinates are converted, and the circle is added to the map.

```javascript
function addCircle(lat, lng, radius, strokeColor, strokeWeight, fillColor) {
  strokeColor = formatColor(strokeColor);
  fillColor = formatColor(fillColor);
  L.circle(convertLatLng([lat, lng]), radius, {color: strokeColor, weight: strokeWeight / window.devicePixelRatio, fillColor: fillColor}).addTo(map);
}
```

--------------------------------

### Format Android Integer Color to Web Hex (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Converts an Android integer color value into a web-standard hexadecimal color string (e.g., '#RRGGBB'). It masks the integer to 24 bits and converts it to a zero-padded hexadecimal string.

```javascript
function formatColor(color) {
  return '#' + ('000000' + (0xFFFFFF & color).toString(16)).slice(-6);
}
```

--------------------------------

### Move an Existing Map Marker (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Moves an existing marker on the map to a new latitude and longitude. It retrieves the marker by its ID, converts the provided coordinates, and updates the marker's position using `marker.setLatLng`.

```javascript
function moveMarker(lat, long, id) {
  var marker = markers[id];
  if (marker != null) {
    var latLng = convertLatLng([lat, long]);
    marker.setLatLng(L.latLng(latLng[0], latLng[1]));
  }
}
```

--------------------------------

### Leaflet Custom CRS Definition for Baidu Maps

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Configures a custom Coordinate Reference System (CRS) for Baidu Maps within the Leaflet.js framework. This `L.CRS.Baidu` object uses a Mercator projection with specific parameters, resolutions, origin, and bounds to ensure accurate rendering of Baidu map tiles.

```JavaScript
L.CRS.Baidu = new L.Proj.CRS('EPSG:900913', '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs', { resolutions: function () { var level = 19 var res = []; res[0] = Math.pow(2, 18); for (var i = 1; i < level; i++) { res[i] = Math.pow(2, (18 - i)) } return res; }(), origin: [0, 0], bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244]) });
```

--------------------------------

### Clear All Markers from Map

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

Removes all existing markers from the map by setting their map property to null and then clears the internal `markers` object, effectively resetting the marker layer.

```JavaScript
function clearMarkers() { for (var key in markers) { markers[key].setMap(null); } markers = {}; }
```

--------------------------------

### Add GeoJSON Data Layer to Google Map

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

This function adds GeoJSON data to the Google Map's data layer, allowing for display of geographical features. It applies specified stroke width, stroke color, and fill color to the GeoJSON features before adding them.

```javascript
/**
 * Add GeoJson info to this web map's data layer
 * @param {string} geojson - valid json with geo info
 * @param {float} strokeWidth - width of stroke
 * @param {int} strokeColor - color of border
 * @param {int} fillWidth - color filled inside border
 */
function addGeoJsonLayer(jsonString, strokeWidth, strokeColor, fillColor) {
  var strokeWebColor = formatColor(strokeColor);
  var fillWebColor = formatColor(fillColor);
  map.data.setStyle({
    fillColor: strokeWebColor,
    strokeColor: fillWebColor,
    strokeWeight: strokeWidth
  });
  map.data.addGeoJson(jsonString);
}
```

--------------------------------

### Remove All Polylines from the Map (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Removes all polylines currently displayed on the map by iterating through the `polylines` collection and calling `removePolyline` for each, then clears the collection.

```javascript
function removeAllPolylines() {
  for (var key in polylines) {
    removePolyline(key);
  }
  polylines = {};
}
```

--------------------------------

### Set Google Maps Type ID

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

This function allows setting the visual style or type of the Google Map, such as 'roadmap', 'satellite', 'hybrid', or 'terrain'. It directly calls the `map.setMapTypeId` method.

```javascript
function setMapTypeId(mapType) {
  map.setMapTypeId(mapType);
}
```

--------------------------------

### Remove a Polyline from the Map (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Removes a specified polyline from the map. It checks if the polyline exists, removes it from the map layer, and then deletes its reference from the `polylines` collection.

```javascript
function removePolyline(id) {
  var polyline = polylines[id];
  if (polyline != null) {
    map.removeLayer(polyline);
    polylines.delete(id);
  }
}
```

--------------------------------

### Remove a Map Marker (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Removes a specified marker from the map. It checks if the marker exists, removes it from the map layer, and then deletes its reference from the `markers` collection.

```javascript
function removeMarker(id) {
  var marker = markers[id];
  if (marker != null) {
    map.removeLayer(marker);
    markers.delete(id);
  }
}
```

--------------------------------

### Remove a Polygon from the Map (JavaScript)

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/leaflet_map.html

Removes a specified polygon from the map. It checks if the polygon exists, removes it from the map layer, and then deletes its reference from the `polygons` collection.

```javascript
function removePolygon(id) {
  var polygon = polygons[id];
  if (polygon != null) {
    map.removeLayer(polygon);
    polygons.delete(id);
  }
}
```

--------------------------------

### Remove GeoJSON Data Layer from Google Map

Source: https://github.com/airbnb/airmapview/blob/master/library/src/main/assets/google_map.html

This function iterates through all features currently present in the Google Map's data layer and removes them. This effectively clears any previously added GeoJSON data from the map, providing a way to reset the data layer.

```javascript
function removeGeoJsonLayer() {
  map.data.forEach(function(feature) {
    map.data.remove(feature);
  });
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.