Skip to content

Instantly share code, notes, and snippets.

@mcgovey

mcgovey/index.html

Last active March 22, 2018 15:45
Show Gist options
  • Save mcgovey/e79b9e8327d30a8aa5051405cb9c9105 to your computer and use it in GitHub Desktop.
Save mcgovey/e79b9e8327d30a8aa5051405cb9c9105 to your computer and use it in GitHub Desktop.
Download ZIP
Mapbox Example // source https://jsbin.com/niyozow
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Mapbox example with US Big Bob to Kate's map">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css" rel="stylesheet" />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<title>Mapbox - UD Stadium to Kates</title>
<style id="jsbin-css">
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id="map"></div>
<script id="jsbin-javascript">
mapboxgl.accessToken = "pk.eyJ1IjoibWNnb3ZleSIsImEiOiJjaWxhejRrZmgwZWZkdWdrbmZ5bGVoYTM4In0.4CR1TOb6WEYk3eHe1_GNlg";
/* Map: This represents the map on the page. */
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mcgovey/cjeu9tt3reg3h2smyt7gy1ob7",
zoom:13.0,
center: [-75.74906,39.67135]
});
map.on("load", function () {
// Call route function
getRoute();
/* Add an image to the map for stadium */
map.loadImage("https://i.imgur.com/aAIk82g.png", function(error, image) {
if (error) throw error;
map.addImage("stadium-marker", image);
/* Tie together the source and image, specify how they are displayed on the map. */
map.addLayer({
id: "marker1",
type: "symbol",
/* Geographic coordinate where the image marker gets placed */
source: {
type: "geojson",
data: {
type: "FeatureCollection",
features:[{"type":"Feature","geometry":{"type":"Point","coordinates":[-75.74872461744202,39.660789143558446]}}]}
},
layout: {
"icon-image": "stadium-marker",
}
});
});
/* A second image fo Kate's */
map.loadImage("https://i.imgur.com/gehLWDI.png", function(error, image) {
if (error) throw error;
map.addImage("kates-marker", image);
/* Tie together the source and image, specify how they are displayed on the map. */
map.addLayer({
id: "marker2",
type: "symbol",
/* Geographic coordinate where the image marker gets placed */
source: {
type: "geojson",
data: {
type: "FeatureCollection",
features:[{"type":"Feature","geometry":{"type":"Point","coordinates":[-75.74692361746271,39.68374123477102]}}]}
},
layout: {
"icon-image": "kates-marker",
}
});
});
});
function getRoute() {
var start = [-75.74872461744202,39.660789143558446];
var end = [-75.74692361746271,39.68374123477102];
var directionsRequest = 'https://api.mapbox.com/directions/v5/mapbox/cycling/' + start[0] + ',' + start[1] + ';' + end[0] + ',' + end[1] + '?geometries=geojson&access_token=' + mapboxgl.accessToken;
$.ajax({
method: 'GET',
url: directionsRequest,
}).done(function(data) {
var route = data.routes[0].geometry;
map.addLayer({
id: 'route',
type: 'line',
source: {
type: 'geojson',
data: {
type: 'Feature',
geometry: route
}
},
'paint': {
'line-color': '#efefef',
'line-width': 5,
'line-opacity': .8
}
});
});
}
</script>
<script id="jsbin-source-css" type="text/css">body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }</script>
<script id="jsbin-source-javascript" type="text/javascript">mapboxgl.accessToken = "pk.eyJ1IjoibWNnb3ZleSIsImEiOiJjaWxhejRrZmgwZWZkdWdrbmZ5bGVoYTM4In0.4CR1TOb6WEYk3eHe1_GNlg";
/* Map: This represents the map on the page. */
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mcgovey/cjeu9tt3reg3h2smyt7gy1ob7",
zoom:13.0,
center: [-75.74906,39.67135]
});
map.on("load", function () {
// Call route function
getRoute();
/* Add an image to the map for stadium */
map.loadImage("https://i.imgur.com/aAIk82g.png", function(error, image) {
if (error) throw error;
map.addImage("stadium-marker", image);
/* Tie together the source and image, specify how they are displayed on the map. */
map.addLayer({
id: "marker1",
type: "symbol",
/* Geographic coordinate where the image marker gets placed */
source: {
type: "geojson",
data: {
type: "FeatureCollection",
features:[{"type":"Feature","geometry":{"type":"Point","coordinates":[-75.74872461744202,39.660789143558446]}}]}
},
layout: {
"icon-image": "stadium-marker",
}
});
});
/* A second image fo Kate's */
map.loadImage("https://i.imgur.com/gehLWDI.png", function(error, image) {
if (error) throw error;
map.addImage("kates-marker", image);
/* Tie together the source and image, specify how they are displayed on the map. */
map.addLayer({
id: "marker2",
type: "symbol",
/* Geographic coordinate where the image marker gets placed */
source: {
type: "geojson",
data: {
type: "FeatureCollection",
features:[{"type":"Feature","geometry":{"type":"Point","coordinates":[-75.74692361746271,39.68374123477102]}}]}
},
layout: {
"icon-image": "kates-marker",
}
});
});
});
function getRoute() {
var start = [-75.74872461744202,39.660789143558446];
var end = [-75.74692361746271,39.68374123477102];
var directionsRequest = 'https://api.mapbox.com/directions/v5/mapbox/cycling/' + start[0] + ',' + start[1] + ';' + end[0] + ',' + end[1] + '?geometries=geojson&access_token=' + mapboxgl.accessToken;
$.ajax({
method: 'GET',
url: directionsRequest,
}).done(function(data) {
var route = data.routes[0].geometry;
map.addLayer({
id: 'route',
type: 'line',
source: {
type: 'geojson',
data: {
type: 'Feature',
geometry: route
}
},
'paint': {
'line-color': '#efefef',
'line-width': 5,
'line-opacity': .8
}
});
});
}</script></body>
</html>
Raw
jsbin.niyozow.css
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
Raw
jsbin.niyozow.js
mapboxgl.accessToken = "pk.eyJ1IjoibWNnb3ZleSIsImEiOiJjaWxhejRrZmgwZWZkdWdrbmZ5bGVoYTM4In0.4CR1TOb6WEYk3eHe1_GNlg";
/* Map: This represents the map on the page. */
var map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mcgovey/cjeu9tt3reg3h2smyt7gy1ob7",
zoom:13.0,
center: [-75.74906,39.67135]
});
map.on("load", function () {
// Call route function
getRoute();
/* Add an image to the map for stadium */
map.loadImage("https://i.imgur.com/aAIk82g.png", function(error, image) {
if (error) throw error;
map.addImage("stadium-marker", image);
/* Tie together the source and image, specify how they are displayed on the map. */
map.addLayer({
id: "marker1",
type: "symbol",
/* Geographic coordinate where the image marker gets placed */
source: {
type: "geojson",
data: {
type: "FeatureCollection",
features:[{"type":"Feature","geometry":{"type":"Point","coordinates":[-75.74872461744202,39.660789143558446]}}]}
},
layout: {
"icon-image": "stadium-marker",
}
});
});
/* A second image fo Kate's */
map.loadImage("https://i.imgur.com/gehLWDI.png", function(error, image) {
if (error) throw error;
map.addImage("kates-marker", image);
/* Tie together the source and image, specify how they are displayed on the map. */
map.addLayer({
id: "marker2",
type: "symbol",
/* Geographic coordinate where the image marker gets placed */
source: {
type: "geojson",
data: {
type: "FeatureCollection",
features:[{"type":"Feature","geometry":{"type":"Point","coordinates":[-75.74692361746271,39.68374123477102]}}]}
},
layout: {
"icon-image": "kates-marker",
}
});
});
});
function getRoute() {
var start = [-75.74872461744202,39.660789143558446];
var end = [-75.74692361746271,39.68374123477102];
var directionsRequest = 'https://api.mapbox.com/directions/v5/mapbox/cycling/' + start[0] + ',' + start[1] + ';' + end[0] + ',' + end[1] + '?geometries=geojson&access_token=' + mapboxgl.accessToken;
$.ajax({
method: 'GET',
url: directionsRequest,
}).done(function(data) {
var route = data.routes[0].geometry;
map.addLayer({
id: 'route',
type: 'line',
source: {
type: 'geojson',
data: {
type: 'Feature',
geometry: route
}
},
'paint': {
'line-color': '#efefef',
'line-width': 5,
'line-opacity': .8
}
});
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment