Map Tiles

Xweather Raster Maps allows requesting images as map tiles for use with most interactive mapping platforms. The tiles are provided as 256x256 PNG images in the Spherical Mercator projection used by most mapping frameworks, including Google Maps, Apple Maps, Mapbox and Open Street Maps.

Configuring Tile Requests

The URL format for each tile request will require the server number to use (from 1-4), tile type code, interval offset for the interval to return, map x and y (row and column) and zoom level. You will also have to include your application's API access id and secret keys:

https://maps.api.xweather.com/{client_id}_{client_secret}/{layers}/{zoom}/{x}/{y}/{offset}.{format}

The following variables are used when requesting overlay tiles:

Option	Description	Default
`server`	Type: `string` (optional)The server to use for the request, from 1-4. In order to speed up web requests, we allow you to request tiles from 4 servers: `maps1.` through `maps4.`. Therefore, you can randomize the value for `[server]` in your tile requests as long as it's a value from `1` to `4`.
`client_id`	Type: `string` (required)Unique client ID associated with your API account.
`client_secret`	Type: `string` (required)Unique client secret key associated with one of your API account applications/consumers.
`layers`	Type: `string` (required)One or more overlays to add to the map. Multiple overlays may be comma separated and will be added to the map. The layer will be combined in order, from left to right. Refer to the Layer Usage details and the Layer Types for a list of supported codes.
`zoom`	Type: `integer` (required)The zoom level to use for the image. This is normally a value from 1 to 21 and corresponds to the standard zoom level of most popular third-party mapping libraries, such as Google Maps (opens in a new tab) and Mapbox (opens in a new tab).
`x`	Type: `integer` (required)Tile column for the map, which depends on the zoom level.
`y`	Type: `integer` (required)Tile row for the map, which depends on the zoom level.
`offset`	Type: `integer` or `string` (required)The time offset for the image. Refer to the Time Offsets details for more information.
`format`	Type: `string` (required)The format of the image to return. See Image Quality.

The following is an example tile request for the latest radar image at column 41, row 23 and for zoom level 8:

https://maps.api.xweather.com/[client_id]_[client_secret]/radar/8/41/23/current.png

Working with Mapping Libraries

Xweather Raster Maps easily integrates with popular libraries such as Leaflet (opens in a new tab), Mapbox and Google Maps.

Example Usage via Leaflet

[TODO: Add Leaflet example]

With the above example we create a map within the aerismap div tag, add an Open Street Maps (OSM) base map with the Xweather Mapping Platform Radar layer on top:

var map = L.map('aerismap').setView([44.96, -93.27], 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);
L.tileLayer('https://maps.api.xweather.com/[client_id]_[client_key]/radar/{z}/{x}/{y}/current.png', {
    subdomains: '1234',
    attribution: '&copy;Xweather',
}).addTo(map);

Alternatively, an interactive map using the Xweather Mapping Platform layers for the base and overlays too:

[TODO: Add Leaflet example]

var map = L.map('aerismap').setView([44.96, -93.27], 5);
L.tileLayer('https://maps.api.xweather.com/[client_id]_[client_key]/flat,radar,admin/{z}/{x}/{y}/current.png', {
    subdomains: '1234',
    attribution: '&copy;Xweather',
}).addTo(map);

Example Usage via Google Maps

[TODO: Add Google Maps example]

<script>
var gmap;
 
function initMap() {
    gmap = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 44.96, lng: -93.27},
        zoom: 5
    });
    var radar = new google.maps.ImageMapType({
        getTileUrl: function(coord, zoom) {
            return ['https://maps.api.xweather.com/[client_id]_[client_key]/radar/',
                zoom, '/', coord.x, '/', coord.y, '/current.png'].join('');
        },
        tileSize: new google.maps.Size(256, 256)
    });
    gmap.overlayMapTypes.push(radar);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&callback=initMap" async defer></script>

Static Maps Layer Usage