block by joyrexus 33b2347dc1d464aacf6f

Abbo’s Alley I

Full Screen

Abbo’s Alley I

Quick demo showing how to add Sewanee trail data to a map using Mapbox GL JS.

The key building blocks here are sources and layers. Sources contain the underlying geo data. Layers let you specify how to style this data.

In our demo we’re adding two data sources: the trail route for one section of Abbo’s Alley and markers indicating exit points. The trail data was taken from a geojson file containing information about all trails on the Domain.

About Abbo’s Alley

Abbo’s Alley is the popular name for the Abbott Cotten Martin Ravine Garden, A cultivated nature walk that crosses South Carolina Avenue. Named for Abbott Martin, former professor of English, who labored for years with Sewanee undergraduates to construct the trails and transplant lithe flowering shrubs, wildflowers, and plants that would bloom in Sewanee’s latitude into the ravine area.

Things to note

Below are the key sections in the script where we set up our sources and layers.

Load the trail data:

map.addSource("trail", {
    "type": "geojson",
    "data": {
        "type": "Feature",
        "properties": {
            "id": "31",
            "steward_id": "0",
            "name": "Abbo's Alley"
        },
        "geometry": {
            "type": "MultiLineString",
            "coordinates": [
                ...
            ]
        }
    }
});

Style the trail:

map.addLayer({
    "id": "trail",
    "type": "line",
    "source": "trail",
    "layout": {
        "line-join": "round",
        "line-cap": "round"
    },
    "paint": {
        "line-color": "#FFC107",
        "line-width": 3
    }
});

Load trail marker data:

map.addSource("markers", {
    "type": "geojson",
    "data": {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [ -85.92484071294942, 35.20451046971142 ]
            },
            "properties": {
                "title": "Exit 1",
                "marker-symbol": "monument"
            }
        }, {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [ -85.92406009325629, 35.20306710380155 ]
            },
            "properties": {
                "title": "Exit 2",
                "marker-symbol": "monument"
            }
        }, {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [ -85.9211607534945, 35.20365946733811 ]
            },
            "properties": {
                "title": "Exit 3",
                "marker-symbol": "monument"
            }
        }]
    }
});

Style the markers:

map.addLayer({
    "id": "markers",
    "interactive": true,
    "type": "symbol",
    "source": "markers",
    "layout": {
        "icon-image": "{marker-symbol}-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    },
    "paint": {
        "text-size": 12
    }
});

See Also

index.html