Mapbox Directions with geolocation tracking
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 - 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
};
Developer | Pollardld |
Username | pollardld |
Uploaded | November 08, 2022 |
Rating | 3 |
Size | 5,827 Kb |
Views | 28,336 |
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!
Name | Size |
Directions with geocoder | 12,546 Kb |
CSS off screen menu with navicon | 3,844 Kb |
Paypal checkout svg | 21,662 Kb |
SVG Animation | 3,133 Kb |
Pipe Billow SVG Animation | 2,532 Kb |
Nav Combine | 8,634 Kb |
My Map | 3,867 Kb |
Turkey Hunting with Horizontal Lines | 7,568 Kb |
New Header | 4,805 Kb |
Dropdown Selector | 4,469 Kb |
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!
Name | Username | Size |
Pattern lab logo | TimPietrusky | 3,666 Kb |
Awesome Full Page Menu Nav | Ey_intuitive | 4,194 Kb |
Obligatory CSS3 UI Nav | Romandiaz | 9,017 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
The Fly | GianlucaGuarini | 3,405 Kb |
TweetBox with React JS | J0zelito | 3,325 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Testing Portfolio Page | Sideshowli | 3,395 Kb |
Email Marketing Mock | Kristenzirkler | 8,224 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!