![]() ![]() The vector map will start appearing on top of the raster, gradually adding details and making it "come alive". ![]() Static Maps API image supplementing zoomable mapsĪ more advanced solution is using our Static Maps API to supplement the map initiation process and provide a very smooth user experience.Īdd the image of the area you want to display/the whole world (from Static Maps API) as the bottom-most layer (the visitor can still navigate the map). ![]() The most basic solution is to set the page background to the expected (most dominant) map color, which in itself can significantly reduce the visual change that suddenly occurs once the map loads. There are several tricks you can use to improve the perceived performance of the application. We combined the Static Maps API with the Maps API in the example above.In some cases, if the map style contains many sources and layers or if the visitor has a slow connection, it can take some time for the map to start appearing visually. The following example combines the descriptions of the offices with the image of the location map. Use case - Display a list of locations of offices on a web pageĪ good example of a use for static maps would be to display a list of locations of offices, stores, businesses, real estate, etc. The maximum size of the image must be 4096 total pixels = 64圆4 px.Įxample map with a custom image marker: |anchor:center|8.57916,47.127899įor multiple markers, you can only use one custom image. If the hexadecimal representation is used, the # symbol must be represented using its URL encoding, which is %23.Įxample map with multiple markers (default marker multiple colors): Marker colors can be defined using hexadecimal values, rgba or the name of the colors (e.g. Individual markers are separated by a pipe symbol ( | ).Įxample map with multiple markers (default marker):Įach marker can also have a different color - specified as the 3rd parameter (e.g. Each marker is a lng,lat pair separated by commas. More than one marker can be added to the map. To add markers to a map image, a parameter called markers must be used in the URL. The API also offers the possibility of adding information to these images, such as a marker at a specified position or drawing a line or a polygon on the map. To create a link to a map, you must indicate the map identifier (mapId) in the URL path ?key= YOUR_API_KEY We recommend reading the article How to protect your map key to protect your account and data.Ģ. In the case of making an API call without the key parameter, the following error is obtained "Missing key - Get your FREE key at " The API key must be passed in a parameter called key in API requests. Your MapTiler account access key is on your MapTiler Cloud account page or Get API key for FREE. The first thing we need to know to use the API is that all of the requests to the API have to be authorized using your API key. ![]() How to search places by coordinates (reverse) How to search places by name (forward)Ĩ.3. How to create a map image with lines or polygonsĨ.2. How to use the OGC WMTS service in your mapģ.2. How to use raster tiles in your mapĢ.2.3. How to use vector tiles in your mapĢ.2.2. How to add an interactive map on a web pageĢ.2.1. This article uses different use cases and examples to explain how to use the main options offered by the MapTiler Cloud API to create maps.Ģ.2. Explore the MapTiler Cloud API to see all its features. Through the API, you can add a map directly to your website, create an image with a location map for your business, search for addresses, etc. The MapTiler Cloud API allows access to all the data, maps, and resources in the MapTiler Cloud without having to open a browser. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |