Using the Tiles

Code:

Depending on your application you may have to access the tiles in a different manner. For OpenLayers,  the code we use in À-la-carte to include the base map is as follows:

var mapBoxBackground = new OpenLayers.Layer.XYZ(
" AWMC Background",
[
"http://a.tiles.mapbox.com/v3/isawnyu.map-knmctlkh/${z}/${x}/${y}.png",
"http://b.tiles.mapbox.com/v3/isawnyu.map-knmctlkh/${z}/${x}/${y}.png",
"http://c.tiles.mapbox.com/v3/isawnyu.map-knmctlkh/${z}/${x}/${y}.png",
"http://d.tiles.mapbox.com/v3/isawnyu.map-knmctlkh/${z}/${x}/${y}.png"
],
{
attribution: "Tiles &copy; <a href='http://mapbox.com/' target='_blank'>MapBox</a> | " +
"Data &copy; <a href='http://www.openstreetmap.org/' target='_blank'>OpenStreetMap</a> and contributors, CC-BY-SA |"+
" Tiles and Data &copy; 2013 <a href='http://www.awmc.unc.edu' target='_blank'>AWMC</a>" +
" <a href='http://creativecommons.org/licenses/by-nc/3.0/deed.en_US' target='_blank'>CC-BY-NC 3.0</a>",
sphericalMercator: true,
wrapDateLine: true,
transitionEffect: "resize",
buffer: 1,
numZoomLevels: 13
}
);

 

To use the layer in Leaflet with Mapbox.js all you need is something similar to the following:

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiaXNhd255dSIsImEiOiJBWEh1dUZZIn0.SiiexWxHHESIegSmW8wedQ', {
 attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
 maxZoom: 10,
 id: 'isawnyu.map-knmctlkh',
 accessToken: 'pk.eyJ1IjoiaXNhd255dSIsImEiOiJBWEh1dUZZIn0.SiiexWxHHESIegSmW8wedQ'
 }).addTo(map);

You can expand both of these examples by using whatever tiles that you need.

Share

3 responses to Using the Tiles

  1. Hello,

    I would like to use the AWMC Map Tiles on a blog, to make maps for my pupils. I’m using Leaflet, but the example doesn’t work. My code is the following:

    var map = L.map('map').setView([41.90, 12.47], 13);

    L.tileLayer('http://{s}.tiles.mapbox.com/v3/ awmc_background/{z}/{x}/{y}.png', {
    attribution: "Tiles © MapBox | " +
    " Tiles and Data © 2013 'AWMC_background'" +
    " CC-BY-NC 3.0",
    sphericalMercator: true,
    wrapDateLine: true,
    transitionEffect: "resize",
    buffer: 1,
    numZoomLevels: 13
    }).addTo(map);

    Can you tell me where is the problem?
    Thanks
    Jérôme

  2. Hello,

    I would like to use the AWMC Map Tiles in my ArcMap 10.2.2 desktop version.
    Is this possible? I tried to link the tiles by adding a new WMTS server, but could not add a correct url.

    Can you tell me how I can use the map tiles as a baselayer in ArcMap?

    Thank you very much

    Gerben

Leave a reply

You must be logged in to post a comment.