Skip to content

Instantly share code, notes, and snippets.

@joyrexus

joyrexus/README.md

Last active January 20, 2017 12:08
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joyrexus/33b2347dc1d464aacf6f to your computer and use it in GitHub Desktop.
Save joyrexus/33b2347dc1d464aacf6f to your computer and use it in GitHub Desktop.
Download ZIP
Abbo’s Alley I
Raw
README.md

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

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoiam95cmV4dXMiLCJhIjoiY2lmcGppdHl3aXN6YnM0bTdwdml2ZDR3NCJ9.p3wD1i88MUZ7kia4CSo8rw';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v8', //stylesheet location
center: [-85.923, 35.204], // starting position
zoom: 16 // starting zoom
});
map.on('style.load', function () {
// load trail data
map.addSource("trail", {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {
"id": "31",
"steward_id": "0",
"name": "Abbo's Alley"
},
"geometry": {
"type": "MultiLineString",
"coordinates": [
[
[
-85.92484071294942,
35.20451046971142
],
[
-85.92484095115586,
35.20425588206633
],
[
-85.92473768565443,
35.204120036773375
],
[
-85.92457236914379,
35.20400112467478
],
[
-85.92438634272233,
35.2039161442544
],
[
-85.92429380855316,
35.203886865134194
],
[
-85.92415903994758,
35.20374627469955
],
[
-85.92413855387926,
35.20354259143396
],
[
-85.924014580048,
35.20344067737747
],
[
-85.92397340007932,
35.20325395341467
],
[
-85.92395967752839,
35.20322007574285
],
[
-85.92406009325629,
35.20306710380155
]
],
[
[
-85.92428688793706,
35.203879645572464
],
[
-85.92429380855316,
35.203886865134194
],
[
-85.92411760295701,
35.203831110933876
],
[
-85.92368332358745,
35.20386477880764
],
[
-85.9234144714664,
35.20389855146771
],
[
-85.92312495690193,
35.203915337682226
],
[
-85.9228768154322,
35.20391517744157
],
[
-85.9225046196031,
35.20389796360324
],
[
-85.92240121095091,
35.20391486887026
],
[
-85.92204967720642,
35.203914639576595
],
[
-85.92180163487593,
35.20381264204393
],
[
-85.92163624055713,
35.203778588420114
],
[
-85.92136750416329,
35.203693548901875
],
[
-85.92126412880717,
35.20367650816457
],
[
-85.9211607534945,
35.20365946733811
]
]
]
}
}
});
// 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 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
}
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment