Mapbox Directions with geolocation tracking

Developer
Pollardld
Size
5,827 Kb
Views
28,322
  1. Mapbox Directions with geolocation tracking Previews
  2. Mapbox Directions with geolocation tracking HTML Codes
  3. Mapbox Directions with geolocation tracking CSS Codes
  4. Mapbox Directions with geolocation tracking JS Codes

How do I make an mapbox directions with geolocation tracking?

Mapbox directions api with html5 geolocation and custom marker. What is a mapbox directions with geolocation tracking? How do you make a mapbox directions with geolocation tracking? This script and codes were developed by Pollardld on 08 November 2022, Tuesday.

Mapbox Directions with geolocation tracking Previews
IQ Test

Mapbox Directions with geolocation tracking - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mapbox Directions with geolocation tracking</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/mapbox-directions.js/v0.1.0/mapbox.directions.js'></script>
<link rel='stylesheet' href='https://api.tiles.mapbox.com/mapbox.js/plugins/mapbox-directions.js/v0.1.0/mapbox.directions.css' type='text/css' /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/https___s3_us_west_2_amaz.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { margin: 0; padding: 0;
}
#map { position: absolute; top: 0; bottom: 0; width: 100%;
}
#inputs, #errors, #directions { position: absolute; width: 33%; max-width: 300px; min-width: 200px;
}
#inputs { z-index: 10; top: 10px; left: 10px;
}
#directions { background: transparent; z-index: 99; top: 0; right: 0; bottom: 0; overflow: auto;
}
#routes:not(:empty), #instructions:not(:empty) { background: rgba(0, 0, 0, 0.8);
}
#errors { z-index: 8; opacity: 0; padding: 10px; border-radius: 0 0 3px 3px; background: rgba(0, 0, 0, 0.25); top: 90px; left: 10px;
}
.mapbox-icon { background-image: url();
}
.mapbox-directions-icon { background-image: url(https://api.tiles.mapbox.com/mapbox.js/plugins/mapbox-directions.js/v0.1.0/mapbox.directions.png);
}
#out:not(:empty) { background: rgba(0, 0, 0, 0.8); bottom: 5vh; color: #fff; font-size: .875em; line-height: 1.5em; padding: .125rem .75rem; position: absolute; left: 5vw;
}
button { background: rgba(0, 0, 0, 0.8); border: none; color: #fff; font-size: .75em; left: 40%; letter-spacing: .025em; padding: .5rem .75rem .375rem; position: absolute; text-transform: uppercase; top: 5vh;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="map"></div>
<button onclick="geoFindMe()">Show my location</button>
<div id='inputs'></div>
<div id='errors'></div>
<div id='out'></div>
<div id='directions'> <div id='routes'></div> <div id='instructions'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mapbox Directions with geolocation tracking - Script Codes CSS Codes

body { margin: 0; padding: 0;
}
#map { position: absolute; top: 0; bottom: 0; width: 100%;
}
#inputs, #errors, #directions { position: absolute; width: 33%; max-width: 300px; min-width: 200px;
}
#inputs { z-index: 10; top: 10px; left: 10px;
}
#directions { background: transparent; z-index: 99; top: 0; right: 0; bottom: 0; overflow: auto;
}
#routes:not(:empty), #instructions:not(:empty) { background: rgba(0, 0, 0, 0.8);
}
#errors { z-index: 8; opacity: 0; padding: 10px; border-radius: 0 0 3px 3px; background: rgba(0, 0, 0, 0.25); top: 90px; left: 10px;
}
.mapbox-icon { background-image: url();
}
.mapbox-directions-icon { background-image: url(https://api.tiles.mapbox.com/mapbox.js/plugins/mapbox-directions.js/v0.1.0/mapbox.directions.png);
}
#out:not(:empty) { background: rgba(0, 0, 0, 0.8); bottom: 5vh; color: #fff; font-size: .875em; line-height: 1.5em; padding: .125rem .75rem; position: absolute; left: 5vw;
}
button { background: rgba(0, 0, 0, 0.8); border: none; color: #fff; font-size: .75em; left: 40%; letter-spacing: .025em; padding: .5rem .75rem .375rem; position: absolute; text-transform: uppercase; top: 5vh;
}

Mapbox Directions with geolocation tracking - Script Codes JS Codes

L.mapbox.accessToken = 'pk.eyJ1IjoiYWx0YXBsYW5uaW5nIiwiYSI6InhqNzQwRW8ifQ.mlA6eN3JguZL_UkEV9WlMA';
var map = L.mapbox.map('map', 'altaplanning.jlbj868e', { zoomControl: false
}).setView([37.7708,-122.4502], 13);
map.attributionControl.setPosition('bottomleft');
var directions = L.mapbox.directions({ profile: 'mapbox.walking'
});
var directionsLayer = L.mapbox.directions.layer(directions) .addTo(map);
var directionsInputControl = L.mapbox.directions.inputControl('inputs', directions) .addTo(map);
var directionsErrorsControl = L.mapbox.directions.errorsControl('errors', directions) .addTo(map);
var directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions) .addTo(map);
var directionsInstructionsControl = L.mapbox.directions.instructionsControl('instructions', directions) .addTo(map);
function geoFindMe() { var output = document.getElementById("out"); if (!navigator.geolocation){ output.innerHTML = "<p>Geolocation is not supported by your browser</p>"; return; } function success(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; output.innerHTML = '<p>Latitude is ' + lat + '° <br>Longitude is ' + lng + '°</p>'; map.panTo([lat,lng]); loc.setLatLng( L.latLng(lat,lng) ); map.setZoom(17); }; function error() { output.innerHTML = "Unable to retrieve your location"; }; output.innerHTML = "<p>Locating…</p>"; navigator.geolocation.watchPosition(success, error, geo_options);
}
var loc = L.marker([37.7708,-122.4520], { icon : L.icon({ iconUrl : 'http://walkbikencroutes.altaprojects.net/wp-content/themes/walkbikenc/img/marker.png', iconSize: [28, 35], iconAnchor: [28, 35], popupAnchor: [0, 0] })
}).addTo(map);
var geo_options = { enableHighAccuracy: true, maximumAge : 30000, timeout : 27000
};
Mapbox Directions with geolocation tracking - Script Codes
Mapbox Directions with geolocation tracking - Script Codes
Home Page Home
Developer Pollardld
Username pollardld
Uploaded November 08, 2022
Rating 3
Size 5,827 Kb
Views 28,322
Do you need developer help for Mapbox Directions with geolocation tracking?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pollardld (pollardld) Script Codes
Name
Nav Combine
Bejeweled pieces
FCC Vote Date - PSA
Mapbox Directions, GeoLocation, Tracking, and Firebase
Triceratops
Titanis walleri
New Header
Form Submit to Google Forms
Directions with geocoder
Alta Map Spartanburg
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!