Mapbox Directions, GeoLocation, Tracking, and Firebase

Developer
Pollardld
Size
6,788 Kb
Views
46,552
  1. Mapbox Directions, GeoLocation, Tracking, and Firebase Previews
  2. Mapbox Directions, GeoLocation, Tracking, and Firebase HTML Codes
  3. Mapbox Directions, GeoLocation, Tracking, and Firebase CSS Codes
  4. Mapbox Directions, GeoLocation, Tracking, and Firebase JS Codes

How do I make an mapbox directions, geolocation, tracking, and firebase?

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

Mapbox Directions, GeoLocation, Tracking, and Firebase Previews
IQ Test

Mapbox Directions, GeoLocation, Tracking, and Firebase - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mapbox Directions, GeoLocation, Tracking, and Firebase</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' />
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-label/v0.2.1/leaflet.label.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-label/v0.2.1/leaflet.label.css' rel='stylesheet' />
<script src="https://cdn.firebase.com/js/client/2.0.3/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/geofire/3.2.0/geofire.min.js"></script>
<meta name="viewport" content="width=device-width"> <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;
}
.geofind { 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;
}
fieldset { border: none; padding: 0; margin: 0; width: 150px;
}
#message { float: left; font-size: .875em; line-height: 1.5em; padding: .1875rem .3125rem; width: 65%;
}
#add-button { background: rgba(0, 0, 0, 0.8); border: none; color: #fff; float: left; font-size: .75em; line-height: 1.75em; letter-spacing: .025em; padding: .3125rem .5rem .25rem; text-transform: uppercase; max-width: 35%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="map"></div>
<div id='inputs'></div>
<div id='errors'></div>
<div id='out'></div>
<div id='directions'> <div id='routes'></div> <div id='instructions'></div>
</div>
<button class="geofind" onclick="geoFindMe()">Show my location</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/rsvp.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mapbox Directions, GeoLocation, Tracking, and Firebase - 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;
}
.geofind { 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;
}
fieldset { border: none; padding: 0; margin: 0; width: 150px;
}
#message { float: left; font-size: .875em; line-height: 1.5em; padding: .1875rem .3125rem; width: 65%;
}
#add-button { background: rgba(0, 0, 0, 0.8); border: none; color: #fff; float: left; font-size: .75em; line-height: 1.75em; letter-spacing: .025em; padding: .3125rem .5rem .25rem; text-transform: uppercase; max-width: 35%;
}

Mapbox Directions, GeoLocation, Tracking, and Firebase - Script Codes JS Codes

L.mapbox.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6IlhHVkZmaW8ifQ.hAMX5hSW-QnTeRCMAy9A8Q';
var map = L.mapbox.map('map', 'diccfish.k835gc87', { zoomControl: false
}).setView([37.7708,-122.4502], 13);
map.attributionControl.setPosition('bottomleft');
// Directions =============== //
var directions = L.mapbox.directions({ profile: 'mapbox.walking' }), directionsLayer = L.mapbox.directions.layer(directions).addTo(map), directionsInputControl = L.mapbox.directions.inputControl('inputs', directions).addTo(map), directionsErrorsControl = L.mapbox.directions.errorsControl('errors', directions).addTo(map), directionsRoutesControl = L.mapbox.directions.routesControl('routes', directions).addTo(map), directionsInstructionsControl = L.mapbox.directions.instructionsControl('instructions', directions).addTo(map);
// GeoLocation and Tracking ==== //
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.mapbox.marker.icon({ 'marker-color' : '#f8a1a1', 'marker-size' : 'small' })
}).addTo(map);
loc.bindLabel( 'Your Location' );
var geo_options = { enableHighAccuracy: true, maximumAge : 30000, timeout : 27000
};
// Firebase =============== //
var base = new Firebase( 'https://sizzling-inferno-3085.firebaseio.com/' ), color = '#69dfbf', marker = L.marker([37.765, -122.499], { draggable: true, icon: L.mapbox.marker.icon({ 'marker-color': color, 'marker-symbol' : 'bicycle', 'marker-size' : 'small' }) }) .bindPopup('<fieldset class="clearfix input-pill pill mobile-cols"><input type="text" id="message" class="col9" /><button id="add-button" class="col3">Add</button></fieldset>') .addTo(map) .openPopup();
marker.on('dragend', function(e) { marker.openPopup(); L.DomEvent.addListener(L.DomUtil.get('add-button'), 'click', function() { var message = L.DomUtil.get('message').value; var geojson = marker.toGeoJSON(); geojson.properties['marker-color'] = color; geojson.properties['marker-size'] = 'small'; geojson.properties.title = message; base.push(geojson); marker.closePopup(); })
});
base.limit(200).on('child_added', function(snapshot) { L.mapbox.featureLayer(snapshot.val()) .eachLayer(function(l) { l.setZIndexOffset(-1000) var geojson = l.toGeoJSON(); if (geojson && geojson.properties && geojson.properties.title) { l.bindLabel( L.mapbox.sanitize( geojson.properties.title ), { noHide: true }); } }) .addTo(map);
});
Mapbox Directions, GeoLocation, Tracking, and Firebase - Script Codes
Mapbox Directions, GeoLocation, Tracking, and Firebase - Script Codes
Home Page Home
Developer Pollardld
Username pollardld
Uploaded November 08, 2022
Rating 3
Size 6,788 Kb
Views 46,552
Do you need developer help for Mapbox Directions, GeoLocation, Tracking, and Firebase?

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
Titanis walleri
CSS Accordion
My Map
CSS off screen menu with navicon
Alta Map Spartanburg
Bejeweled pieces
Animation mixin
Pipe Billow SVG Animation
Dropdown Selector
Turkey Hunting with Horizontal Lines
Create amazing love letters 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!