Display External Layer
How to use External Layer to display your tiles of data on top of Woosmap Map.
This feature allows developers to add external data layers on top of the base map. This feature facilitates the integration of additional information, such as weather conditions or satellite images, from external data sources directly onto your map.
Initializing an ImageMapType object
First, create an instance of the ImageMapType object and set the URL that provides “xyz” tiles or “tms” tiles of your data. Don’t forget to specify the size of a tile then tune your integration with several parameters like min/max zoom value.
const imageMapType = new woosmap.map.ImageMapType({
url: `https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png`,
tileSize: new woosmap.map.Size(256, 256),
minZoom:5, // Optional parameter
maxZoom: 19 // Optional parameter
scheme: "xyz", // Optional parameter, possible values "xyz" or "tms"
name: "Satellite" // Optional parameter
});
Then add this ImageMapType instance to the map using the insertAt() method.
Please find below a complete example:
function initMap() {
map = new window.woosmap.map.Map(
document.getElementById("map") as HTMLElement,
{
zoom: 3,
center: {
lat: 39.15253,
lng: -97.74332
}
},
);
const imageMapType = new woosmap.map.ImageMapType({
url: `https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png`,
tileSize: new woosmap.map.Size(256, 256)
});
map.overlayMapTypes.insertAt(0, imageMapType);
}
Sample Usage
In this example, the Woosmap Map is integrated with ArcGIS Satellite imagery. Use the select component to explore another example featuring OpenWeather tiles. The Woosmap Style can be customized to align with the Data Layer. (Recommended combination: “OpenWeather Precipitation” and Woosmap’s “Light Grey” style)
