How to display a scale control
This tutorial shows how to display a scale control.
-
Copy the following code, paste it into your favorite text editor, and save it as a
.html
file. -
Replace
YOUR_MAPTILER_API_KEY_HERE
with your actual MapTiler API key. -
The next it’s up to you. You can start the map in a different place by modifying the
starting position
andstarting zoom
, and you can change the look of the map to any of our styles, or yours, by updating thestyle URL
. See what’s available here.</li> -
Install the npm package.
-
Include the CSS file in the
<head>
of your HTML file. -
Include the following code in your JavaScript file (Example: app.js).
-
Add the
scaleControl
to the map.
View complete source code on GitHub
Learn more
Check out the How to change the map labels language based on visitor’s location to learn how to get the country based on visitor’s location. This would allow you to change the control units depending on the country. For example
Visit the JavaScript Maps API reference to know all the scaleControl
options. Like change the display distance units
JavaScript Maps API
Tutorials
- Get Started
- Learn the basics
- Display Marker
- GeoJSON Polygon Layer
- GeoJSON Line Layer
- GeoJSON Point Layer
- Raster Layer
- GeoJSON MultiGeom Layer
- Custom Map
- 3D Map
- Choropleth GeoJSON
- Geocoding
- Reverse Geocoding
- Geocoder component
- Countries filter
- Countries with data
- Elevation profile
- Center map by IP
- Disputed borders by IP
- Map language by IP
- Cookie consent by IP
- Scale control
- Style switcher
- Minimap control
- Legend control
- Choropleth Legend
Video tutorials
Examples
- Add a 3D model
- Add a WMS source
- Add a canvas source
- Add a custom style layer
- Add a generated icon to the map
- Add a new layer below labels
- Add a pattern to a polygon
- Add a raster tile source
- Add a stretchable image to the map
- Add a third party vector tile source
- Add a vector tile source
- Add a video
- Add an animated icon to the map
- Add custom icons with Markers
- Add live realtime data
- Add multiple geometries from one GeoJSON source
- Add support for right-to-left scripts
- Animate a line
- Animate a marker
- Animate a point
- Animate a point along a route
- Animate a series of images
- Animate map camera around a point
- Attach a popup to a marker instance
- Center the map on a clicked symbol
- Change a layer's color with buttons
- Change a map's language
- Change building color based on zoom level
- Change the case of labels
- Change the default position for attribution
- Check if MapLibre GL JS is supported
- Create a draggable Marker
- Create a draggable point
- Create a gradient line using an expression
- Heatmap layer
- Hillshade layer
- Create a hover effect
- Polygon extrusion
- Create a time slider
- Style clusters
- Customize camera animations
- Disable map rotation
- Disable scroll zoom
- Display HTML clusters with custom properties
- Display a non-interactive map
- Display a popup
- Display a popup on click
- Display a popup on hover
- Display a satellite map
- Display and style rich text labels
- Display buildings in 3D
- Display line that crosses 180th meridian
- Display map navigation controls
- Draw GeoJSON points
- Extrude polygons for 3D indoor mapping
- Filter symbols by text input
- Filter symbols by toggling a list
- Fit a map to a bounding box
- Fit to the bounds of a LineString
- Fly to a location
- Fly to a location based on scroll position
- Generate and add a missing icon to the map
- Get coordinates of the mouse pointer
- Get features under the mouse pointer
- Jump to a series of locations
- Locate the user
- Measure distances
- Navigate the map with game-like controls
- Offset the vanishing point using padding
- Render world copies
- Restrict map panning to an area
- Set pitch and bearing
- Show drawn polygon area
- Show polygon information on click
- Slowly fly to a location
- Style lines with a data-driven property
- Toggle interactions
- Update a feature in realtime
- Use a fallback image
- Use locally generated ideographs
- Variable label placement
- View a fullscreen map
- View local GeoJSON
- View local GeoJSON (experimental)
- Visualize population density