Was this example helpful?YesNo
---
# Address Confirmation | Mapbox Search JS | Mapbox
[Skip to main content](https://docs.mapbox.com/mapbox-search-js/example/confirm-address/#__docusaurus_skipToContent_fallback)
This example shows how to use the [confirmAddress](https://docs.mapbox.com/mapbox-search-js/api/web/autofill/#confirmaddress)
component to prompt a user to confirm that the address they've provided in a form is correct.
Fill out the address form and click "Confirm" to show the confirmation dialog. Check the browser console to see the returned result of the confirmation action.
JavaScript
Address Confirmation
Was this example helpful?YesNo
---
# Add Search Box for Japan | Mapbox Search JS | Mapbox
[Skip to main content](https://docs.mapbox.com/mapbox-search-js/example/japan-search-box/#__docusaurus_skipToContent_fallback)
This example adds a [MapboxSearchBox](https://docs.mapbox.com/mapbox-search-js/api/web/search/)
control to a web map, enabling users to search the map for a place. This example specifies Japanese results by adding the `language` and `country` [options](https://docs.mapbox.com/mapbox-search-js/api/core/search/#searchboxoptions)
to the `MapboxSearchBox` instance. If you would like to directly send search requests and receive results without automatically returning them as part of the search box control, see the [Search Box Core reference](https://docs.mapbox.com/mapbox-search-js/api/core/search/)
.
To explore how search SDK parameters affect search results, use the [Japan Search Playground](https://labs.mapbox.com/sbs-playground-japan)
.
JavaScript
Add Search Box for Japan
Was this example helpful?YesNo
---
# Use Address Autofill for Online Checkout (React) | Mapbox Search JS | Mapbox
[Skip to main content](https://docs.mapbox.com/mapbox-search-js/example/autofill-checkout-react/#__docusaurus_skipToContent_fallback)
This example combines several Mapbox Search JS elements together to simulate an online checkout experience. It includes form filling from [autofill](https://docs.mapbox.com/mapbox-search-js/api/react/autofill/)
, a visual reference [Minimap](https://docs.mapbox.com/mapbox-search-js/api/react/minimap/)
, and an [address confirmation](https://docs.mapbox.com/mapbox-search-js/api/react/autofill/#useconfirmaddress)
step.
Fill out the form below. Try one of the following user flows, or experiment on your own.
**Scenario 1: Search for Address and Autofill form**
1. Start typing an address into the address field
2. Choose a suggested address
3. Confirm the address' location on the minimap
4. Click the Continue button
5. Confirm the final address, or go back and change it
**Scenario 2: Manually fill form and confirm address**
1. Manually enter an incomplete or inaccurate address into the form fields
2. Click the Continue button
3. If the address is not an exact match for a known address, the address confirmation dialog will open
4. Choose whether to use the suggested address or to continue with the one you entered
5. Confirm the final address, or go back and change it
React
import React, { useState, useCallback } from 'react'import clsx from 'clsx'import { AddressAutofill, AddressMinimap, useConfirmAddress } from '@mapbox/search-js-react'// TO MAKE THE MAP APPEAR YOU MUST// ADD YOUR ACCESS TOKEN FROM// https://account.mapbox.comconst ACCESS_TOKEN = 'YOUR_MAPBOX_ACCESS_TOKEN'const MapboxExample = () => { // one of 'shipping', 'confirm', 'complete' const [activePage, setActivePage] = useState('shipping') const [formData, setFormData] = useState() const [minimapFeature, setMinimapFeature] = useState() const { formRef, showConfirm } = useConfirmAddress({ accessToken: ACCESS_TOKEN }); const handleAutofillRetrieve = (response) => { setMinimapFeature(response.features[0]) } const handleFormSubmit = useCallback(async (e) => { e.preventDefault() const result = await showConfirm() // if no change is suggested, the address is confirmed. continue to the confirmation page if (result.type === 'nochange') { setFormData(new FormData(e.target)) setActivePage('confirm') } }, [showConfirm]); const handleChangeAddress = () => { setActivePage('shipping') } const handleOrderSubmit = () => { setActivePage('complete') } const handleTryAgain = () => { formRef.current.reset() setMinimapFeature() setActivePage('shipping') } let displayAddress if (formData) { displayAddress = ( <> {formData.get('first-name')} {formData.get('last-name')} {formData.get('address-line1 address-search')} {formData.get('address-line2') && (<>{formData.get('address-line2')} < br />)} {formData.get('address-level2')} {formData.get('address-level1')} {formData.get('postal-code')} ) } return (
{/* shipping address page */}
Shipping Address
{/* address form with `autocomplete` attributes on each address input */} {/* end address form */}
{/* confirmation page */}
Confirm Order
Review your order and shipping details below. This is only an example, so we aren't going to ship anything to you.
Order Submitted!
Your order is on the way!
{/* order details */}
Order
1 - Mapbox Developer Tee Shirt
{/* shipping address */}
Ship To
{displayAddress}
)}export default MapboxExample
Was this example helpful?YesNo
---
# Mapbox Search JS
[Skip to main content](https://docs.mapbox.com/mapbox-search-js/examples/#__docusaurus_skipToContent_fallback)
---
# Mapbox Search JS
[Skip to main content](https://docs.mapbox.com/mapbox-search-js/overview/#__docusaurus_skipToContent_fallback)
---
# Mapbox Search JS
[Skip to main content](https://docs.mapbox.com/mapbox-search-js/#__docusaurus_skipToContent_fallback)
---
# Working with firewalls | Help | Mapbox
[メインコンテンツまでスキップ](https://docs.mapbox.com/help/ja/dive-deeper/firewalls/#__docusaurus_skipToContent_fallback)
If you're interacting with the Mapbox REST APIs behind a firewall and having trouble getting a response, you can try adding the domain `api.mapbox.com` to an allow list. Mapbox uses distributed and dynamically-allocated servers rather than a fixed set of IP addresses. Normally you can add `mapbox.com` to an allow list, but in some cases you may also need to add specific domains including:
* `mapbox.com`
* `www.mapbox.com`
* `api.mapbox.com`
* `api.tiles.mapbox.com`
* `a.tiles.mapbox.com`
* `b.tiles.mapbox.com`
* `c.tiles.mapbox.com`
* `d.tiles.mapbox.com`
* `events.mapbox.com`
このpageは役に立ちましたか？はいいいえ
---
# Maps APIs Caching | Help | Mapbox
[メインコンテンツまでスキップ](https://docs.mapbox.com/help/ja/dive-deeper/api-caching/#__docusaurus_skipToContent_fallback)
Caching[](https://docs.mapbox.com/help/ja/dive-deeper/api-caching/#caching "Caching への直接リンク")
-----------------------------------------------------------------------------------------------
Caching information specific to each of Mapbox's Maps APIs is in the "Restrictions and limits" section near the end of each individual Maps API page. But some tips on working with caching are common across Maps APIs.
### Glossary[](https://docs.mapbox.com/help/ja/dive-deeper/api-caching/#glossary "Glossary への直接リンク")
* **TTL** (Time To Live): The lifetime of an object before the CDN replaces it with a new version.
* **CDN** (Content Delivery Network): Globally distributed entry point for all HTTP requests at api.mapbox.com. Our CDN caches responses for defined time intervals to improve performance.
* **Cache-Control**: The standardized [HTTP header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control)
for directing cache instructions for requests and responses. Most Maps APIs set both a `max-age` (or device cache TTL) cache-control header and a `s-maxage` (or CDN cache TTL) cache-control header.
### How long does it take for changes to a style or tileset to be reflected in my map?[](https://docs.mapbox.com/help/ja/dive-deeper/api-caching/#how-long-does-it-take-for-changes-to-a-style-or-tileset-to-be-reflected-in-my-map "How long does it take for changes to a style or tileset to be reflected in my map? への直接リンク")
Cache times for styles and tilesets depend on whether you're making direct API requests or using a Mapbox SDK. With Mapbox SDKs, you have the option of [invalidating the device cache](https://docs.mapbox.com/help/ja/dive-deeper/api-caching/#how-can-i-break-the-device-cache)
.
#### Tileset changes[](https://docs.mapbox.com/help/ja/dive-deeper/api-caching/#tileset-changes "Tileset changes への直接リンク")
To find the cache defaults for an API where a tileset is used, you can look at the "Restrictions and limits" section near the end of the individual API page. For example, there will be at least a 5-minute delay to show newly created tiles for an existing tileset used in the Vector Tiles API or Mapbox GL JS. The device TTL for vector tiles is 12 hours — see below for details on [breaking the device cache](https://docs.mapbox.com/help/ja/dive-deeper/api-caching/#how-can-i-break-the-device-cache)
.
If an implementation relies on our Static APIs, data updates to cached tiles won't be visible for at least 12 hours due to the CDN cache default. You cannot break the CDN cache.
#### Style changes[](https://docs.mapbox.com/help/ja/dive-deeper/api-caching/#style-changes "Style changes への直接リンク")
After you have published changes to a style, there will be at least a 15-minute delay to see the update reflected in a map. If the map style used in an application was rendered on a device before that style was updated, then the limiting factor may be the vector tile TTL, since the default device TTL is 12 hours — see below for details on [breaking the device cache](https://docs.mapbox.com/help/ja/dive-deeper/api-caching/#how-can-i-break-the-device-cache)
.
Any style changes propagating downstream to the Static API won't be visible for at least 12 hours due to the CDN cache default. You cannot break the CDN cache.
### How can I break the device cache?[](https://docs.mapbox.com/help/ja/dive-deeper/api-caching/#how-can-i-break-the-device-cache "How can I break the device cache? への直接リンク")
* To invalidate the device cache with Mapbox SDKs, you can use the relevant methods linked here: [Mapbox Maps SDK for Android](https://docs.mapbox.com/android/maps/api/10.13.0/mapbox-maps-android/com.mapbox.maps/-mapbox-map/#-1587968132%2FFunctions%2F380272269)
, [Mapbox Maps SDK for iOS](https://docs.mapbox.com/ios/maps/api/10.13.1/Classes/MapboxMap.html#/s:10MapboxMaps0A3MapC9clearData3for10completionyAA15ResourceOptionsV_ys5Error_pSgctFZ)
, or [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/ja/api/#clearstorage)
.
* On the web, you can clear your browser cache via developer tools or browse in incognito mode.
### Can I invalidate the CDN cache?[](https://docs.mapbox.com/help/ja/dive-deeper/api-caching/#can-i-invalidate-the-cdn-cache "Can I invalidate the CDN cache? への直接リンク")
No, the CDN cache for styles and tilesets cannot be invalidated.
このpageは役に立ちましたか？はいいいえ
---
# How to use Mapbox securely | Help | Mapbox
[メインコンテンツまでスキップ](https://docs.mapbox.com/help/ja/dive-deeper/how-to-use-mapbox-securely/#__docusaurus_skipToContent_fallback)
Mapbox is critical infrastructure for our customers. We work hard to protect the security of your account, your data, and your users. This guide contains recommendations and resources for building secure applications, keeping your account secure, and where to go to learn more about security at Mapbox.
Build secure applications[](https://docs.mapbox.com/help/ja/dive-deeper/how-to-use-mapbox-securely/#build-secure-applications "Build secure applications への直接リンク")
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
There are a few guidelines you can follow to build more secure applications with Mapbox.
### Access tokens[](https://docs.mapbox.com/help/ja/dive-deeper/how-to-use-mapbox-securely/#access-tokens "Access tokens への直接リンク")
**Avoid using the default public token.** The [default public token](https://docs.mapbox.com/accounts/ja/guides/tokens/#default-public-access-token)
in your account does not allow for additional security features such as [scope management](https://docs.mapbox.com/accounts/ja/guides/tokens/#scopes)
and [URL restrictions](https://docs.mapbox.com/accounts/ja/guides/tokens/#url-restrictions)
. Generate a new public token to use these security features.
**Manage scopes.** Each access token you create will have a set of permissions that allow you to make certain types of requests to Mapbox APIs — these are called **scopes**. Here are some best practices for [access token scopes](https://docs.mapbox.com/help/ja/dive-deeper/access-tokens/#scopes)
:
* A client application (for example, a web application running in your browser) should only use a token with public scopes. Public tokens have read-only access rights to styles.
* Make all requests requiring a token with secret scopes on a server. _Secret token API requests should never be exposed to the client._
* If you need to do potentially sensitive operations in the client (for example, uploading new data or deleting styles) use the [Mapbox Tokens API](https://docs.mapbox.com/api/ja/accounts/#tokens)
to generate a temporary token for the specific workload.
* To protect your account and your data, do not grant more scopes than necessary to each token. For example, if you are creating a token to upload data to Mapbox with the [Mapbox Uploads API](https://docs.mapbox.com/api/ja/maps/#uploads)
, you will want to make sure you select the `uploads:write` and `uploads:read` scopes. To display a map in a web or mobile application, you should create a separate access token that does not include the secret uploads-related scopes, but does include the public `styles:read` and `fonts:read` scopes.
**Enable URL restrictions.** You can add [URL restrictions](https://docs.mapbox.com/accounts/ja/guides/tokens/#url-restrictions)
to a token to help prevent abuse of billable API endpoints with your token. When you define a token's allowed URLs, that token will only work for requests that originate from the URLs you specify. Tokens without restrictions will work for requests originating from any URL. This feature is compatible with versions of [Mapbox GL JS 0.53.1 and greater](https://github.com/mapbox/mapbox-gl-js/blob/main/CHANGELOG.md#0530)
.
**Isolate tokens.** Generate a separate access token for each application you build. This will make it easier to track usage and identify unexpected activity.
**Rotate tokens.** Any public access tokens you include in a webpage will be visible to anyone who makes an effort to look for it. Access tokens can be deleted and rotated at any time if you suspect misuse. Here are some tips for managing and rotating access tokens:
* Store tokens in environment variables or application configurations on your server.
* Use the [Mapbox Tokens API](https://docs.mapbox.com/api/ja/accounts/#tokens)
to rotate tokens on a schedule.
**Keep tokens private.** In open source iOS and Android applications, access tokens can be further protected to prevent abuse by other developers:
* Avoid having access tokens in your open source iOS project's GitHub repository by [making them private using Xcode](https://docs.mapbox.com/help/ja/dive-deeper/private-access-token-android-and-ios/#ios)
.
* Avoid having access tokens in your open source Android project's GitHub repository by [using a Gradle script](https://docs.mapbox.com/help/ja/dive-deeper/private-access-token-android-and-ios/#android)
.
**Token analytics.** Keeping track of token-specific analytics will help you identify any unexpected usage. Here are some suggestions for tracking usage by access token:
* Use the [Statistics page](https://console.mapbox.com/account/statistics/)
to browse account usage or usage for a specific access token for a week, month, year, or custom date range.
* Deploy distinct tokens for each of your applications, which enables you to isolate statistics by tokens for more granular usage tracking.
### Data security[](https://docs.mapbox.com/help/ja/dive-deeper/how-to-use-mapbox-securely/#data-security "Data security への直接リンク")
There are different privacy and security settings for different assets within your Mapbox account. Understanding privacy details will help you make the right decision for your situation.
**Tilesets.** You can make tilesets public or private. When you create a tileset, it is private by default. Here are some details about public and private tilesets:
* **Public tilesets**: Public tilesets can be used by any Mapbox user's access token. But another user will need the tileset ID for your tileset to use it with their access token. No central, publicly accessible repository of tilesets exists. If you expose a tileset ID for a public tileset in your client-side code, another Mapbox user could use your tileset, but they would not be able to edit it.
* **Private tilesets**: If a tileset is private, the tileset ID can only be used with an access token from the owner's account. This means that other users cannot use _their_ access tokens to access _your_ tilesets.
**Styles.** You can make styles public or private. When you create a style, it is private by default. Here are some details about public and private styles:
* **Public styles**: If a style is public, the style URL can be used by _any_ Mapbox user with their access token. But only the owner of a style can make changes or delete a style, even if it's public.
* **Private styles**: If a style is private, the style URL can only be used with an access token from the owner's account.
### CSP Directives[](https://docs.mapbox.com/help/ja/dive-deeper/how-to-use-mapbox-securely/#csp-directives "CSP Directives への直接リンク")
As a mitigation for Cross-Site Scripting and other types of web security vulnerabilities, you may use a [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
to specify security policies for your website. If you do and you are using Mapbox GL JS, use the CSP directives listed in the [Mapbox GL JS documentation](https://docs.mapbox.com/mapbox-gl-js/ja/guides/browsers-and-testing/#csp-directives)
.
### Mapbox GL JS popups[](https://docs.mapbox.com/help/ja/dive-deeper/how-to-use-mapbox-securely/#mapbox-gl-js-popups "Mapbox GL JS popups への直接リンク")
Developers shouldn't allow users to provide arbitrary data (or "untrusted content") to popups using [`setHTML`](https://docs.mapbox.com/mapbox-gl-js/ja/api/markers/#popup#sethtml)
. This method does not include HTML filtering or sanitization, and must be used only with trusted content. Use [`setText`](https://docs.mapbox.com/mapbox-gl-js/ja/api/markers/#popup#settext)
instead for security against XSS if the popup content is user-provided.
### API requests[](https://docs.mapbox.com/help/ja/dive-deeper/how-to-use-mapbox-securely/#api-requests "API requests への直接リンク")
When [retrieving TileJSON metadata with Mapbox Tiling Service (MTS)](https://docs.mapbox.com/api/ja/maps/mapbox-tiling-service/#retrieve-tilejson-metadata)
, use the `?secure` parameter to request resources in the response as HTTPS endpoints.
### Review product security information[](https://docs.mapbox.com/help/ja/dive-deeper/how-to-use-mapbox-securely/#review-product-security-information "Review product security information への直接リンク")
For more information about security practices at Mapbox, see our [Security page](https://www.mapbox.com/platform/security)
.
Keep your account secure[](https://docs.mapbox.com/help/ja/dive-deeper/how-to-use-mapbox-securely/#keep-your-account-secure "Keep your account secure への直接リンク")
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
Keep your Mapbox account secure to protect your data, billing information, and other profile information.
### Strong passwords[](https://docs.mapbox.com/help/ja/dive-deeper/how-to-use-mapbox-securely/#strong-passwords "Strong passwords への直接リンク")
Use a strong password to keep your account secure. Keep passwords secret, don't reuse passwords between accounts, and use complex passwords. Consider using a password manager for your Mapbox account.
### Two-factor authentication[](https://docs.mapbox.com/help/ja/dive-deeper/how-to-use-mapbox-securely/#two-factor-authentication "Two-factor authentication への直接リンク")
You can also set up two-factor authentication for your Mapbox account. **Two-factor authentication**, also known as multi-factor authentication (MFA) or two-step authentication, provides an optional, but recommended, layer of security to your account. Once enabled, you'll be prompted to enter your password as well as a security code generated by an authentication app on your mobile device whenever you log in. We recommend using Google Authenticator, which is free and available for [iOS](https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8)
and [Android](https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2)
. For a Windows phone, use the [Authenticator](https://www.microsoft.com/en-us/account/authenticator?cmp=h66ftb_42hbak)
app.
To learn how to enable two-factor authentication for your account, see the [security section of our Account documentation](https://docs.mapbox.com/accounts/ja/guides/settings/#security)
.
A recovery code is a single-use code that lets you sign in without your two-factor device. This code will help you gain access to your account in the event that you lose or replace your two-factor device. To use the code, you’ll need your username or email and your password. Find instructions for using a recovery code in our [Account documentation](https://docs.mapbox.com/accounts/ja/guides/settings/#security)
Learn about our bug bounty program[](https://docs.mapbox.com/help/ja/dive-deeper/how-to-use-mapbox-securely/#learn-about-our-bug-bounty-program "Learn about our bug bounty program への直接リンク")
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Mapbox appreciates the effort of software security researchers who work to make the Internet more secure. Our security vulnerability coordination and bug bounty program exist to reward the work of security researchers who find issues with our software and web services.
[Learn about or report a security issue to our bug bounty programchevron-right](https://www.mapbox.com/platform/disclosure/)
このpageは役に立ちましたか？はいいいえ
---
# Pricing | Mapbox Search JS | Mapbox
[Skip to main content](https://docs.mapbox.com/mapbox-search-js/guides/pricing/#__docusaurus_skipToContent_fallback)
Refer to the sections below for more information on pricing for various parts of the SDK.
Autofill Pricing[](https://docs.mapbox.com/mapbox-search-js/guides/pricing/#autofill-pricing "Direct link to Autofill Pricing")
---------------------------------------------------------------------------------------------------------------------------------
Pricing for Address Autofill is determined by **sessions**, which are automatically managed by the Search Autofill SDK. A session is started every time a form uses autofill. Sessions include up to 30 suggest calls or end after 3 minutes have passed.
Details about the number of sessions included in the free tier and the cost per session beyond what is included in the free tier are available on the [Address Autofill pricing guide](https://www.mapbox.com/pricing#autofillsession)
.
Search Box Pricing[](https://docs.mapbox.com/mapbox-search-js/guides/pricing/#search-box-pricing "Direct link to Search Box Pricing")
---------------------------------------------------------------------------------------------------------------------------------------
You can find details about Search Box pricing in the [Search Box pricing guide](https://docs.mapbox.com/api/search/search-box/#search-box-api-pricing)
.
Minimap Pricing[](https://docs.mapbox.com/mapbox-search-js/guides/pricing/#minimap-pricing "Direct link to Minimap Pricing")
------------------------------------------------------------------------------------------------------------------------------
Usage of the Minimap component in conjunction with Address Autofill is included as part of the Autofill session price.
Independent usage is billed according to the [Static Images API pricing guide](https://www.mapbox.com/pricing#glstatic)
.
Was this page helpful?YesNo
---
# Mapbox Data Sources | Help | Mapbox
[メインコンテンツまでスキップ](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#__docusaurus_skipToContent_fallback)
Mapbox's mapping platform is powered by a diverse collection of high-quality data sources from around the world. Understanding these data sources helps you make informed decisions about which Mapbox services best fit your application's needs and gives you insight into the accuracy and coverage you can expect.
This guide provides an overview of the primary data sources that power Mapbox's core services, from map tiles to geocoding and navigation.
Core Map Data[](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#core-map-data "Core Map Data への直接リンク")
-------------------------------------------------------------------------------------------------------------------------
### Mapbox Streets[](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#mapbox-streets "Mapbox Streets への直接リンク")
The foundation of Mapbox's map data comes from [OpenStreetMap](http://osm.org/)
(OSM), a collaborative global mapping project where millions of volunteers contribute geographic information. OSM provides:
* **Road networks**: Streets, highways, paths, and transportation infrastructure
* **Points of interest**: Businesses, landmarks, and amenities
* **Building footprints**: Structures and architectural features
* **Land use**: Parks, forests, residential areas, and commercial zones
* **Natural features**: Rivers, lakes, mountains, and coastlines
Mapbox processes and enhances this OpenStreetMap data through:
* Quality assurance and validation processes
* Conflation with additional commercial and government datasets
* Regular updates as the OpenStreetMap community makes improvements
* Custom styling and categorization for optimal map rendering
### Mapbox Satellite[](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#mapbox-satellite "Mapbox Satellite への直接リンク")
Mapbox Satellite imagery comes from multiple sources to provide global coverage:
* **Commercial satellite providers**: High-resolution imagery from companies like Maxar, Planet, and others
* **Government sources**: Open data from NASA, USGS, and international space agencies
* **Processing and enhancement**: Raw imagery is color-corrected, processed for consistency, and blended into seamless global coverage
The satellite data is regularly updated, with urban areas typically receiving more frequent updates than rural regions.
### Mapbox Terrain[](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#mapbox-terrain "Mapbox Terrain への直接リンク")
Terrain and elevation data combines multiple sources for comprehensive global coverage:
* **Government datasets**: USGS, NASA SRTM, and other national mapping agencies
* **Commercial providers**: High-resolution elevation models from private companies
* **Processing**: Data is processed for consistency and accuracy across different sources and regions
Note that different data sources may use different vertical datum references, which Mapbox processes to keep consistency.
Administrative and Boundary Data[](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#administrative-and-boundary-data "Administrative and Boundary Data への直接リンク")
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
### Mapbox Countries[](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#mapbox-countries "Mapbox Countries への直接リンク")
Country-level administrative data is sourced from:
* Officially recognized local and international entities
* Government agencies and national mapping organizations
* International bodies like the United Nations
* Regular updates to reflect geopolitical changes
### Mapbox Boundaries[](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#mapbox-boundaries "Mapbox Boundaries への直接リンク")
Administrative boundary data at various levels (states, provinces, counties, etc.) comes from:
* Official government sources whenever possible
* Local administrative entities
* International organizations
* Regular validation and updates for accuracy
This data powers features like administrative geocoding and location-based services that need to understand jurisdictional boundaries.
Search and Geocoding Data[](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#search-and-geocoding-data "Search and Geocoding Data への直接リンク")
-------------------------------------------------------------------------------------------------------------------------------------------------------------
### Mapbox Geocoding API[](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#mapbox-geocoding-api "Mapbox Geocoding API への直接リンク")
The geocoding service draws from a diverse set of sources to provide comprehensive address and place coverage:
* **Government sources**: Official address databases and postal services
* **Open data projects**: Community-contributed place names and addresses
* **Commercial providers**: Licensed datasets from mapping and directory companies
* **Points of interest**: Business directories and location databases
This multi-source approach ensures broad coverage while maintaining accuracy across different regions and address formats.
Specialized Data Services[](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#specialized-data-services "Specialized Data Services への直接リンク")
-------------------------------------------------------------------------------------------------------------------------------------------------------------
### Navigation and Traffic Data[](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#navigation-and-traffic-data "Navigation and Traffic Data への直接リンク")
Mapbox's navigation services use:
* **Real-time traffic**: Anonymous, aggregated data from mobile devices and fleet partners
* **Historical patterns**: Analysis of traffic flows over time
* **Incident data**: Real-time reports of accidents, construction, and road closures
* **Road attributes**: Speed limits, turn restrictions, and routing preferences
### Elevation Services[](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#elevation-services "Elevation Services への直接リンク")
Mapbox Elevation APIs provide:
* **Global coverage**: Multiple data sources for worldwide elevation queries
* **Variable resolution**: Different precision levels depending on location and data availability
* **Consistent processing**: Standardized vertical datum and quality controls
Data Quality and Updates[](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#data-quality-and-updates "Data Quality and Updates への直接リンク")
----------------------------------------------------------------------------------------------------------------------------------------------------------
Mapbox maintains data quality through:
* **Continuous monitoring**: Automated systems detect and flag potential data issues
* **Community feedback**: User reports help identify and correct problems
* **Regular updates**: Systematic refreshes of data sources and processing improvements
* **Quality assurance**: Manual and automated validation processes
### Update Frequency[](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#update-frequency "Update Frequency への直接リンク")
Different data types are updated on different schedules:
* **Map data**: Regular updates as OpenStreetMap and other sources are refreshed
* **Satellite imagery**: Varies by region, with more frequent updates in high-demand areas
* **Traffic data**: Real-time updates for current conditions
* **Administrative boundaries**: Updates as geopolitical changes occur
Using Data Source Information[](https://docs.mapbox.com/help/ja/dive-deeper/mapbox-data-sources/#using-data-source-information "Using Data Source Information への直接リンク")
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Understanding Mapbox's data sources helps you:
* **Choose appropriate services**: Select the right APIs and tilesets for your use case
* **Set user expectations**: Communicate data coverage and accuracy to your users
* **Plan for regional differences**: Account for varying data quality and coverage globally
* **Integrate complementary data**: Understand where additional data sources might be beneficial
For the most current information about Mapbox's data sources and coverage, visit [mapbox.com/about/maps/#data-sources](https://www.mapbox.com/about/maps/#data-sources)
.
このpageは役に立ちましたか？はいいいえ
---
# Autofill suggestions | Mapbox Search JS | Mapbox
[Skip to main content](https://docs.mapbox.com/mapbox-search-js/example/simple-autofill/#__docusaurus_skipToContent_fallback)
This example uses [`autofill`](https://docs.mapbox.com/mapbox-search-js/api/web/autofill/#autofill)
to automatically add suggestions to the address input. Address Autofill works with [browser HTML autocomplete tags](https://web.dev/learn/forms/autofill/)
, which your website may already have.
JavaScript
Autofill suggestions
Was this example helpful?YesNo
---
# Browsers and testing | Mapbox Search JS | Mapbox
[Skip to main content](https://docs.mapbox.com/mapbox-search-js/guides/browsers/#__docusaurus_skipToContent_fallback)
Learn how to set up CSP directives and referrer policies.
CSP directives[](https://docs.mapbox.com/mapbox-search-js/guides/browsers/#csp-directives "Direct link to CSP directives")
----------------------------------------------------------------------------------------------------------------------------
As a mitigation for Cross-Site Scripting and other types of web security vulnerabilities, you may use a [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/Security/CSP)
to specify security policies for your website. If you do, Mapbox Search JS requires the following CSP directives:
worker-src blob: ;child-src blob: ;img-src data: blob: ;connect-src https://api.mapbox.com https://events.mapbox.com ;
Referrer policies[](https://docs.mapbox.com/mapbox-search-js/guides/browsers/#referrer-policies "Direct link to Referrer policies")
-------------------------------------------------------------------------------------------------------------------------------------
If you use a [URL-restricted access token](https://docs.mapbox.com/accounts/overview/tokens/#url-restrictions)
, you have to make sure that the browser sends the correct referrer header. This is the default setting. But if you use the [Referrer-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)
header on your website, pick a value that still sends a `Referer` header, like `no-referrer-when-downgrade`, `origin`, `origin-when-cross-origin`, or `strict-origin`. Specifically, `same-origin` and `no-referrer` will never send a referrer header, and thus Mapbox API calls won't work.
If you limit the referrer to the origin, make sure that the URL you restrict your access token to doesn't contain path information, because the `Origin` header doesn't contain a path by definition.
Unit testing[](https://docs.mapbox.com/mapbox-search-js/guides/browsers/#unit-testing "Direct link to Unit testing")
----------------------------------------------------------------------------------------------------------------------
To run unit tests with Mapbox Search JS, you may be able to mock our web components or individual parts based on your needs.
We use Jest internally for unit testing both user applications and Mapbox Search JS itself.
Unit testing with Jest requires JSDOM 16 with HTML Custom Element support. This is shipped by default in Jest v26 and higher. If using below that version, you may need the [jest-environment-jsdom-sixteen](https://www.npmjs.com/package/jest-environment-jsdom-sixteen)
package to run unit tests.
This is our Jest setup file for Search JS Web. Since we have very high test coverage, you may not need all of these mocks for your own application.
`test/jest_framework_setup.js`:
import fetch from 'node-fetch';import { AbortController } from 'abort-controller';import { polyfillFetch } from '@mapbox/search-js-core';/** * We need to mock the HTMLDocument to return itself in order to use Scoped DOM. * * Bug: https://github.com/jsdom/jsdom/issues/3179 * Reference: https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom */export const htmlDocFunc = jest.spyOn( document.implementation, 'createHTMLDocument');htmlDocFunc.mockImplementation(() => { return document;});// Needed for the 'no-scroll' package.window.scroll = jest.fn();// Mock ResizeObserver.window.ResizeObserver = jest.fn(() => { return { observe: jest.fn(), unobserve: jest.fn(), disconnect: jest.fn() }});polyfillFetch({ fetch, AbortController });
`jest.config.js`:
{ "setupFilesAfterEnv": [ "/test/jest_framework_setup.js" ]}
Was this page helpful?YesNo
---
# Understand GeoJSON Coordinate Precision | Help | Mapbox
[メインコンテンツまでスキップ](https://docs.mapbox.com/help/ja/dive-deeper/geojson-coordinate-precision/#__docusaurus_skipToContent_fallback)
[GeoJSON](https://docs.mapbox.com/help/ja/glossary/geojson/)
is a popular format for encoding geographic data structures. A critical aspect of GeoJSON is the **coordinate precision** used in storing vector data, which directly impacts file size, rendering performance, and location accuracy.
Recommended GeoJSON Coordinate Precision
The recommended coordinate precision for GeoJSON is **6 decimal places**, which provides a good balance between accuracy and file size. This level of precision allows for accurate representation of features while keeping the file size manageable.
What is coordinate precision in GeoJSON?[](https://docs.mapbox.com/help/ja/dive-deeper/geojson-coordinate-precision/#what-is-coordinate-precision-in-geojson "What is coordinate precision in GeoJSON? への直接リンク")
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
In GeoJSON, geographic coordinates are typically expressed as floating-point numbers in **decimal degrees**, describing locations on earth using the [WGS84 datum](https://www.linz.govt.nz/guidance/geodetic-system/coordinate-systems-used-new-zealand/geodetic-datums/world-geodetic-system-1984-wgs84)
. Precision refers to how many decimal places are used to represent latitude and longitude values.
The example below illustrates a GeoJSON Point feature with high coordinate precision, using 9 digits after the decimal point:
point-high-precision.geojson
{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [102.123456789, 0.987654321] }, "properties": {}}
A Point feature with lower coordinate precision might look like this, using only 3 digits after the decimal point:
point-low-precision.geojson
{ "type": "Feature", "geometry": { "type": "Point", "coordinates": [102.031, 0.592] }, "properties": {}}
Why coordinate precision matters[](https://docs.mapbox.com/help/ja/dive-deeper/geojson-coordinate-precision/#why-coordinate-precision-matters "Why coordinate precision matters への直接リンク")
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
High coordinate precision can lead to **larger file sizes** and **slower rendering times**, especially when dealing with large datasets. Each additional decimal place increases the number of digits stored, which can significantly inflate the size of GeoJSON files.
Conversely, lower precision reduces file size and improves performance but may sacrifice location accuracy. The trade-off between precision and performance is crucial, especially for applications that require real-time rendering or have bandwidth constraints.
| Decimal Places | Approximate Accuracy |
| --- | --- |
| 1 | ~10 km |
| 2 | ~1 km |
| 3 | ~100 m |
| 4 | ~10 m |
| 5 | ~1 m |
| 6 | ~10 cm |
| 7 | ~1 cm |
### Visualizing coordinate precision[](https://docs.mapbox.com/help/ja/dive-deeper/geojson-coordinate-precision/#visualizing-coordinate-precision "Visualizing coordinate precision への直接リンク")
This interactive map shows a grid of points representing single-digit increments of various coordinate precisions.
Choose a different precision level to see how it affects the coverage area of the grid of points. As the coordinate precision increases, you can see that each point represents a smaller area of the earth, demonstrating the impact of coordinate precision on geographic data representation. You can hover over each point to see its coordinates.
Reducing coordinate precision in GeoJSON[](https://docs.mapbox.com/help/ja/dive-deeper/geojson-coordinate-precision/#reducing-coordinate-precision-in-geojson "Reducing coordinate precision in GeoJSON への直接リンク")
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
If you are processing data programmatically, you can iterate over the coordinates in your GeoJSON features and round them to a specified number of decimal places. For example, using Python, you can use the `round()` function to reduce precision:
import jsonfrom geojson import Point, Feature, FeatureCollectiondef reduce_precision(coordinates, precision=6): return [round(coord, precision) for coord in coordinates]
There are also libraries and tools available specifically for use with GeoJSON that can help reduce coordinate precision. See the [Additional resources](https://docs.mapbox.com/help/ja/dive-deeper/geojson-coordinate-precision/#additional-resources)
section below for more information.
Exporting or converting GeoJSON with software may generate high coordinate precision and large file sizes. For example, exporting a vector layer in [QGIS](https://qgis.org/)
to GeoJSON will produce coordinates with 15 decimal places by default if you do not specify a lower coordinate precision. 15 decimal places is unnecessary for most applications and should be reduced to improve performance and file size.
Additional resources[](https://docs.mapbox.com/help/ja/dive-deeper/geojson-coordinate-precision/#additional-resources "Additional resources への直接リンク")
-------------------------------------------------------------------------------------------------------------------------------------------------------
* [GeoJSON Specification](https://stevage.github.io/geojson-spec/#section-11.2)
- Read the official GeoJSON specification for details on coordinate precision and other aspects of the format.
* [Observable Notebook on Coordinate Precision](https://observablehq.com/@mourner/latitude-and-longitude-precision)
- Volodymyr Agafonkin explains how latitude and longitude precision affects geographic data representation.
* [geojson-precision](https://github.com/perrygeo/geojson-precision)
- A Python library for reducing coordinate precision in GeoJSON files.
* [turf/truncate](https://turfjs.org/docs/api/truncate)
- A Turf.js function that reduces the precision of coordinates in GeoJSON features.
このpageは役に立ちましたか？はいいいえ
---
# Manage your fontstacks | Help | Mapbox
[メインコンテンツまでスキップ](https://docs.mapbox.com/help/ja/dive-deeper/manage-fontstacks/#__docusaurus_skipToContent_fallback)
A **fontstack** is an ordered list consisting of a _primary font_ and _optional fallback font(s)_.
Fonts can only be set on [`symbol`](https://docs.mapbox.com/studio-manual/ja/reference/styles/#symbol-layer)
layer types. Set fonts from the **Style** tab of each `symbol` layer, under **Text**, in the `Font` input field. Each list of unique font pairings between primary and fallback font(s) will create a new fontstack.
Manage in Mapbox Studio[](https://docs.mapbox.com/help/ja/dive-deeper/manage-fontstacks/#manage-in-mapbox-studio "Manage in Mapbox Studio への直接リンク")
-----------------------------------------------------------------------------------------------------------------------------------------------------
When your primary font has missing glyphs, the text will be rendered in the fallback font instead. The default fallback font set by Mapbox Studio is `Arial Unicode MS Bold`. Unicode fonts include more glyphs than conventional fonts, allowing for better multilingual coverage.
In Mapbox Studio you can manage fontstacks using **Components** or **Layers**. This section shows how to manage this example fontstack using either components and layers:
'Roboto Black', 'Arial Unicode MS Bold';
### Components[](https://docs.mapbox.com/help/ja/dive-deeper/manage-fontstacks/#components "Components への直接リンク")
In custom styles built with style components, you can set a fallback font using the **Typography** tab. For each component typography property, click the name of the property, scroll to the bottom of the panel, and click **1 font fallback** to change your fallback font.
circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu
Your browser doesn't support HTML5 video. Open [link to the video](https://docs.mapbox.com/help/ja/assets/medias/troubleshooting--manage-fontstacks--components-eb092caf4a86e7e8f650ebe1686d5f77.mp4)
.
### Layers[](https://docs.mapbox.com/help/ja/dive-deeper/manage-fontstacks/#layers "Layers への直接リンク")
To manage fontstacks on individual layers in the **Layers** tab, click the name of the layer, click the **Font** property, and click **1 font fallback** to change your fallback font.
circlecirclecircle
arrow-leftarrow-rightrotate
heartmapboxmenu
Manage rendering time[](https://docs.mapbox.com/help/ja/dive-deeper/manage-fontstacks/#manage-rendering-time "Manage rendering time への直接リンク")
-----------------------------------------------------------------------------------------------------------------------------------------------
The number of fontstacks paired with the density of text per zoom on your map can significantly slow down your map's load time, especially when using multilingual labels. This is because dense multilingual text, at any set zoom level, will increase rendering time.
Here are some tips to decrease your map's rendering time:
* Latin scripts can handle more fontstacks, while other scripts like Chinese or Hangul, can require loading dozens of glyph tiles per fontstack.
* Keeping labels sparse and spread across zoom levels allows for more fontstacks in your map style.
* For multilingual maps with dense labeling, consider using fewer fontstacks.
Manage offline download size[](https://docs.mapbox.com/help/ja/dive-deeper/manage-fontstacks/#manage-offline-download-size "Manage offline download size への直接リンク")
--------------------------------------------------------------------------------------------------------------------------------------------------------------------
When using one of our mobile SDKs, you can often reduce the amount of space required to download an offline region dramatically by limiting the number of fontstacks in your style. To learn more about reducing offline download sizes, see our [guide to offline maps](https://docs.mapbox.com/help/ja/dive-deeper/mobile-offline/)
.
このpageは役に立ちましたか？はいいいえ
---
# Changelog | Mapbox Search JS | Mapbox
[Skip to main content](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#__docusaurus_skipToContent_fallback)
1.5.0[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#150 "Direct link to 1.5.0")
------------------------------------------------------------------------------------------------
### ✨ Features[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#-features "Direct link to ✨ Features")
* Improved support and testing for React 16-19
### 🐞 Bug fixes[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#-bug-fixes "Direct link to 🐞 Bug fixes")
* Fixes a bug in which clicking on a suggestion did not register if the mouse key was held down too long
* Fixes type generation for React components across React versions
* Fixes a bug to allow handling custom element attributes without an explicit value
1.4.0[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#140 "Direct link to 1.4.0")
------------------------------------------------------------------------------------------------
### ✨ Features[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#-features-1 "Direct link to ✨ Features")
* Bubbles up a "blur" event to the user when focus is removed from the SearchBox or Geocoder components
### 🐞 Bug fixes[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#-bug-fixes-1 "Direct link to 🐞 Bug fixes")
* Fixes an issue with browser autofill behavior that had caused web components to hang indefinitely
1.3.0[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#130 "Direct link to 1.3.0")
------------------------------------------------------------------------------------------------
### 🐞 Bug fixes[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#-bug-fixes-2 "Direct link to 🐞 Bug fixes")
* Accessibility updates to remove selection behavior on Tab key press and persist listbox visibility while changing focus to Clear button
* Remove global-scope CSS selector
1.2.0[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#120 "Direct link to 1.2.0")
------------------------------------------------------------------------------------------------
### ✨ Features[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#-features-2 "Direct link to ✨ Features")
* Adds `flyTo` component option to control the map `flyTo` behavior when selecting a suggestion
* Adds `customSearch` component option to supplement Mapbox results with client-provided results
1.1.0[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#110 "Direct link to 1.1.0")
------------------------------------------------------------------------------------------------
### ✨ Features[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#-features-3 "Direct link to ✨ Features")
* Enables reverse searches as part of interactive Search Box sessions with a new `allowReverse` option
* Adds a `flipCoordinates` option for use with either Geocoder or SearchBox components
1.0.0[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#100 "Direct link to 1.0.0")
------------------------------------------------------------------------------------------------
### ✨ Features[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#-features-4 "Direct link to ✨ Features")
* First general availability release (!) 🚀
* Included frameworks:
* Search JS Core - high-level API wrappers to call the [Mapbox Search Service](https://docs.mapbox.com/api/search/)
* Search JS Web - UI components on top of the Core library
* Search JS React - React hooks and wrappers for Search JS Web components
* Included Search services:
* [Search Box](https://www.mapbox.com/search-box)
* [Address Autofill](https://www.mapbox.com/address-autofill)
* [Geocoding](https://www.mapbox.com/geocoding)
* Documentation is available at [https://docs.mapbox.com/mapbox-search-js/guides/](https://docs.mapbox.com/mapbox-search-js/guides/)
1.0.0-beta.25[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#100-beta25 "Direct link to 1.0.0-beta.25")
-----------------------------------------------------------------------------------------------------------------------
### 🐞 Bug fixes[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#-bug-fixes-3 "Direct link to 🐞 Bug fixes")
* Fixes a bug in which a custom language option in `SearchBoxCore` was not getting passed through the `retrieve` method
1.0.0-beta.24[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#100-beta24 "Direct link to 1.0.0-beta.24")
-----------------------------------------------------------------------------------------------------------------------
### ✨ Features[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#-features-5 "Direct link to ✨ Features")
* Adds event manager and improves session token handling
1.0.0-beta.22[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#100-beta22 "Direct link to 1.0.0-beta.22")
-----------------------------------------------------------------------------------------------------------------------
### ✨ Features[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#-features-6 "Direct link to ✨ Features")
* Bubbles up a "clear" event to the user when the SearchBox or Geocoder components have had text cleared
### 🐞 Bug fixes[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#-bug-fixes-4 "Direct link to 🐞 Bug fixes")
* Fixes a bug in which the React components (Geocoder, SearchBox) without a value prop would show the string "undefined" in the input element
* Fixes a bug to prevent the "Clear" icon button from submitting a form
* Enables listbox visibility while in fullscreen mode
1.0.0-beta.21[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#100-beta21 "Direct link to 1.0.0-beta.21")
-----------------------------------------------------------------------------------------------------------------------
### ✨ Features[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#-features "Direct link to ✨ Features")
* Enables secondary addresses (units) for Address Autofill
1.0.0-beta.20[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#100-beta20 "Direct link to 1.0.0-beta.20")
-----------------------------------------------------------------------------------------------------------------------
### ✨ Features[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#-features-1 "Direct link to ✨ Features")
* Adds core, web, and React packages for the Geocoding v6 API
1.0.0-beta.19[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#100-beta19 "Direct link to 1.0.0-beta.19")
-----------------------------------------------------------------------------------------------------------------------
### 🐞 Bug fixes[](https://docs.mapbox.com/mapbox-search-js/guides/changelog/#-bug-fixes "Direct link to 🐞 Bug fixes")
* Allows having a placeholder `