Directions with geocoder

Developer

Size

12,546 Kb

Views

8,096

Directions with geocoder Previews
Directions with geocoder HTML Codes
Directions with geocoder CSS Codes
Directions with geocoder JS Codes

How do I make an directions with geocoder?

Mapbox Directions with geocoder added to directions origin and destination inputs. What is a directions with geocoder? How do you make a directions with geocoder? This script and codes were developed by Pollardld on 08 November 2022, Tuesday.

Directions with geocoder Previews

Directions with geocoder - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Directions with geocoder</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/mapbox.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900'> <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;
}
a { border-bottom: 2px solid rgba(220, 140, 140, 0.2); color: #474b4e; text-decoration: none;
}
a:hover { border-bottom: 2px solid rgba(220, 140, 140, 0.8);
}
#map { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1;
}
.map-wrapper { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/Screen_Shot_2014-12-22_at_6.31.05_PM.png"); background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; background-color: #f1fafe; position: relative; height: 100vh; width: 100vw;
}
#inputs, #errors { position: absolute; max-width: 200px; min-width: 140px;
}
#inputs { color: #474b4e; font-family: "Lato", sans-serif; left: 80px; top: 24px; z-index: 10;
}
#directions { bottom: 0; background: transparent; overflow: auto; position: absolute; top: 0; right: 0; z-index: 99;
}
#errors { z-index: 8; opacity: 0; padding: 10px; border-radius: 0 0 3px 3px; background: rgba(0, 0, 0, 0.25); top: 90px; left: 80px;
}
#routes:not(:empty), #instructions:not(:empty) { background: rgba(0, 0, 0, 0.8); max-width: 300px;
}
.mapbox-directions-icon { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/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: transparent; border: none; height: 30px; left: 216px; padding: 0; position: absolute; top: 24px; width: 30px; z-index: 99;
}
.geofind:hover { cursor: pointer;
}
.geofind:hover img { opacity: 1;
}
.geofind.z-lower { z-index: -1;
}
.geofind img { display: block; height: 14px; margin: 0 auto; opacity: 0.7; width: 14px; transition: 0.2s opacity ease-in-out; -webkit-transition: 0.2s opacity ease-in-out; -ms-transition: 0.2s opacity ease-in-out; -moz-transition: 0.2s opacity ease-in-out; -o-transition: 0.2s opacity ease-in-out;
}
/* Basics */
.mapbox-directions-inputs, .mapbox-directions-errors, .mapbox-directions-routes, .mapbox-directions-instructions { font-size: .875em;
}
.mapbox-directions-inputs, .mapbox-directions-inputs *, .mapbox-directions-errors, .mapbox-directions-errors *, .mapbox-directions-routes, .mapbox-directions-routes *, .mapbox-directions-instructions, .mapbox-directions-instructions * { box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box;
}
/* Inputs */
.mapbox-directions-origin,
.mapbox-directions-destination { background-color: #ffffff; position: relative;
}
.mapbox-directions-origin .mapbox-form-label,
.mapbox-directions-destination .mapbox-form-label { background-color: transparent;
}
.mapbox-directions-origin .mapbox-form-label .mapbox-directions-icon,
.mapbox-directions-destination .mapbox-form-label .mapbox-directions-icon { background-position: 50%; background-size: contain; height: 12px; width: 16px;
}
.mapbox-directions-origin { border-bottom: 2px solid #C0C1C2;
}
.mapbox-directions-origin .mapbox-form-label .mapbox-directions-icon { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/marker.svg");
}
.mapbox-directions-destination input { border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.mapbox-directions-destination .mapbox-form-label .mapbox-directions-icon { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/marker-finish.svg");
}
.mapbox-directions-inputs input { border: 0; background-color: transparent; color: #474b4e; font-size: .8125em; height: 30px; margin: 0; padding: 7px 20px 7px 38px; width: 100%;
}
.mapbox-directions-inputs input:focus { box-shadow: none; outline: 0;
}
.mapbox-directions-inputs .mapbox-close-icon { opacity: .7; padding: 2px; position: absolute; right: 5px; top: 6px; cursor: pointer; z-index: 2;
}
.mapbox-form-label { background: #474b4e; color: #474b4e; cursor: pointer; line-height: .75em; font-weight: bold; left: 0; padding: 10px 8px; position: absolute; text-align: center; top: 0;
}
.mapbox-directions-reverse-input, .mapbox-directions-reverse-input.mapbox-directions-icon { background-position: 50%; background-size: contain; background-color: transparent; cursor: pointer; height: 16px; left: 22px; top: 23px; position: absolute; width: 16px; z-index: 10;
}
.mapbox-directions-reverse-input.mapbox-directions-icon { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/icon-reverse.svg");
}
input:not(:valid) + .mapbox-close-icon { display: none;
}
.mapbox-close-icon:hover { opacity: .75;
}
/* Errors */
.mapbox-directions-error { color: white; display: inline-block; padding: 0 5px;
}
/* Routes */
.mapbox-directions-routes ul { list-style: none; margin: 0; padding: 10px 10px 0 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.mapbox-directions-routes li { font-size: 12px; padding: 10px 10px 10px 80px; display: block; position: relative; cursor: pointer; color: rgba(255, 255, 255, 0.5); min-height: 60px;
}
.mapbox-directions-routes li:hover,
.mapbox-directions-routes .mapbox-directions-route-active { color: white;
}
.mapbox-directions-route-heading { position: absolute; left: 10px; top: 10px;
}
.mapbox-directions-route-summary { display: none;
}
.mapbox-directions-route-active .mapbox-directions-route-summary { display: block;
}
.mapbox-directions-route-details { font-size: 12px; color: rgba(255, 255, 255, 0.5);
}
/* Instructions */
.mapbox-directions-steps { position: relative; list-style: none; margin: 0; padding: 0;
}
.mapbox-directions-step { position: relative; color: rgba(255, 255, 255, 0.75); cursor: pointer; padding: 20px 20px 20px 40px; font-size: 20px; line-height: 25px;
}
.mapbox-directions-step-distance { color: rgba(255, 255, 255, 0.5); position: absolute; padding: 5px 10px; font-size: 12px; left: 30px; bottom: -15px;
}
.mapbox-directions-step:hover { color: white;
}
.mapbox-directions-step:after { content: ""; position: absolute; top: 50px; bottom: -20px; border-left: 2px dotted rgba(255, 255, 255, 0.2); left: 20px;
}
.mapbox-directions-step:last-child:after,
.mapbox-directions-step:last-child .mapbox-directions-step-distance { display: none;
}
/* icons */
.mapbox-directions-icon { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/mapbox.directions.png"); -webkit-background-size: 280px 20px; background-size: 280px 20px; background-repeat: no-repeat; margin: 0; content: ''; display: inline-block; vertical-align: top; width: 20px; height: 20px;
}
.mapbox-directions-instructions .mapbox-directions-icon { position: absolute; left: 10px; top: 25px; margin: auto;
}
.mapbox-continue-icon { background-position: 0 0;
}
.mapbox-sharp-right-icon { background-position: -20px 0;
}
.mapbox-turn-right-icon { background-position: -40px 0;
}
.mapbox-bear-right-icon { background-position: -60px 0;
}
.mapbox-u-turn-icon { background-position: -80px 0;
}
.mapbox-sharp-left-icon { background-position: -100px 0;
}
.mapbox-turn-left-icon { background-position: -120px 0;
}
.mapbox-bear-left-icon { background-position: -140px 0;
}
.mapbox-depart-icon { background-position: -160px 0;
}
.mapbox-enter-roundabout-icon { background-position: -180px 0;
}
.mapbox-arrive-icon { background-position: -200px 0;
}
.mapbox-close-icon { background-position: -220px 0;
}
.mapbox-error-icon { background-position: -260px 0;
}
.mapbox-marker-drag-icon { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/icon-route_path.svg"); background-size: contain; display: block;
}
.waypoint-icon { background-image: none;
}
.leaflet-container circle, .leaflet-container polyline, .leaflet-container path { transition: 0.1s all ease-in-out; -webkit-transition: 0.1s all ease-in-out; -ms-transition: 0.1s all ease-in-out; -moz-transition: 0.1s all ease-in-out; -o-transition: 0.1s all ease-in-out;
}
.leaflet-container .leaflet-left { left: 32px; top: 24px;
}
.leaflet-container .leaflet-control { border: none; box-shadow: none; border-radius: 0; margin: 0;
}
.leaflet-container .leaflet-control a { background-image: none; background-color: #b9babc; border-bottom: 2px solid #fff; border-radius: 0; color: #fff; font-family: "tradegothic", sans-serif; font-weight: normal; font-size: 20px; height: 32px; line-height: 28px; opacity: 1; position: relative; text-indent: 0; width: 30px; -webkit-font-smoothing: antialiased; transition: 0.2s opacity ease-in-out; -webkit-transition: 0.2s opacity ease-in-out; -ms-transition: 0.2s opacity ease-in-out; -moz-transition: 0.2s opacity ease-in-out; -o-transition: 0.2s opacity ease-in-out;
}
.leaflet-container .leaflet-control a:hover { border-radius: 0; height: 32px; opacity: 0.7;
}
.leaflet-container .leaflet-control a:hover:last-child { border-bottom: 2px solid #fff;
}
.leaflet-container .leaflet-control a.leaflet-control-zoom-out { color: #b9babc;
}
.leaflet-container .leaflet-control a.leaflet-control-zoom-out:before { color: #fff; content: '--'; height: 100%; left: 0; letter-spacing: -0.1em; position: absolute; text-align: center; text-indent: -0.1em; top: 0; width: 100%;
}
.leaflet-container .leaflet-control a.mapbox-icon-geocoder { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/icon-geocoder.svg"); background-size: 58%; background-position: 50% 50%;
}
.leaflet-container .leaflet-control a.mapbox-icon-geocoder:hover { border-bottom: 2px solid #fff;
}
.leaflet-container .leaflet-control a.leaflet-control-fullscreen-button { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/[email protected]"); background-size: 90%; background-position: 50% 55.5%;
}
.leaflet-container .leaflet-control .leaflet-disabled { background-color: #e1e1e1; color: #474b4e;
}
.leaflet-container .leaflet-control .leaflet-control-layers-toggle { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/[email protected]"); background-position: 50% -106px; background-size: 90%;
}
.leaflet-container .leaflet-control-layers-base label, .leaflet-container .leaflet-control-layers-overlays label { display: block; margin-bottom: 5px; position: relative;
}
.leaflet-container .leaflet-control-layers-base label:last-child, .leaflet-container .leaflet-control-layers-overlays label:last-child { margin-bottom: 0;
}
.leaflet-container .leaflet-control-layers-base span, .leaflet-container .leaflet-control-layers-overlays span { color: #717179; font-size: 1em; line-height: 20px;
}
.leaflet-container .leaflet-control-layers-base .leaflet-control-layers-selector, .leaflet-container .leaflet-control-layers-overlays .leaflet-control-layers-selector { cursor: pointer; height: 20px; left: 0; margin: 0; position: absolute; top: 0; width: 100%; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; -o-appearance: none;
}
.leaflet-container .leaflet-control-layers-base .leaflet-control-layers-selector:checked + span, .leaflet-container .leaflet-control-layers-overlays .leaflet-control-layers-selector:checked + span { color: #474b4e; font-weight: 900; font-size: 1.06875em;
}
.leaflet-container .leaflet-control-layers-separator { border-top: 2px solid #fff; margin: 10px -12px 9px;
}
.leaflet-container .leaflet-control-layers-expanded { background-color: #f1f1f1; border-bottom: 2px solid #fff; color: #fff; font-family: "Lato", sans-serif; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 12px;
}
.leaflet-container img.leaflet-marker-icon { top: -11px; width: 10px;
}
.leaflet-container .leaflet-control-attribution a { background: transparent; border-bottom: none; color: #999; font-family: "Lato", sans-serif; font-size: .8125em; height: auto; line-height: 2em; text-transform: none; width: auto;
}
.leaflet-container .leaflet-control-mapbox-geocoder-wrap { background-color: #b9babc; border: none; border-left: 2px solid #fff; border-radius: 0; color: #fff; display: inline-block; height: 30px; left: 30px; top: 0;
}
.leaflet-container .leaflet-control-mapbox-geocoder-wrap .leaflet-control-mapbox-geocoder-form input { height: 30px;
}
.leaflet-container .leaflet-control-mapbox-geocoder.active .leaflet-control-mapbox-geocoder-results { background: transparent; border: none; border-top: 2px solid #fff; left: 32px; position: absolute; top: 30px;
}
.leaflet-container .leaflet-control-mapbox-geocoder.active .leaflet-control-mapbox-geocoder-results a { background-color: #C0C1C2; border: none; border-bottom: 2px solid #fff; font-family: "Lato", sans-serif; font-size: .8125em; line-height: 30px; text-align: left; width: 178px;
}
.leaflet-right.leaflet-top { bottom: 5vh; right: 5%; top: auto; z-index: 2;
}
.leaflet-right { z-index: 1;
}
.leaflet-bar a { text-align: center;
}
.query-result { background: #e8e8e8; border-bottom: 2px solid #fff; display: block; font-size: .75em; overflow: hidden; padding: .75rem; text-overflow: ellipsis; white-space: nowrap;
}
.query-result:last-of-type { border-bottom: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class="map-wrapper">	<div class="custom-popup" id="map"></div> <button id="geofind" class="geofind"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/icon-crosshair.svg" /></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>
</section> <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/mapbox.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/mapbox-directions.js'></script> <script src="js/index.js"></script>
</body>
</html>

Directions with geocoder - Script Codes CSS Codes

body { margin: 0; padding: 0;
}
a { border-bottom: 2px solid rgba(220, 140, 140, 0.2); color: #474b4e; text-decoration: none;
}
a:hover { border-bottom: 2px solid rgba(220, 140, 140, 0.8);
}
#map { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1;
}
.map-wrapper { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/Screen_Shot_2014-12-22_at_6.31.05_PM.png"); background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; background-color: #f1fafe; position: relative; height: 100vh; width: 100vw;
}
#inputs, #errors { position: absolute; max-width: 200px; min-width: 140px;
}
#inputs { color: #474b4e; font-family: "Lato", sans-serif; left: 80px; top: 24px; z-index: 10;
}
#directions { bottom: 0; background: transparent; overflow: auto; position: absolute; top: 0; right: 0; z-index: 99;
}
#errors { z-index: 8; opacity: 0; padding: 10px; border-radius: 0 0 3px 3px; background: rgba(0, 0, 0, 0.25); top: 90px; left: 80px;
}
#routes:not(:empty), #instructions:not(:empty) { background: rgba(0, 0, 0, 0.8); max-width: 300px;
}
.mapbox-directions-icon { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/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: transparent; border: none; height: 30px; left: 216px; padding: 0; position: absolute; top: 24px; width: 30px; z-index: 99;
}
.geofind:hover { cursor: pointer;
}
.geofind:hover img { opacity: 1;
}
.geofind.z-lower { z-index: -1;
}
.geofind img { display: block; height: 14px; margin: 0 auto; opacity: 0.7; width: 14px; transition: 0.2s opacity ease-in-out; -webkit-transition: 0.2s opacity ease-in-out; -ms-transition: 0.2s opacity ease-in-out; -moz-transition: 0.2s opacity ease-in-out; -o-transition: 0.2s opacity ease-in-out;
}
/* Basics */
.mapbox-directions-inputs, .mapbox-directions-errors, .mapbox-directions-routes, .mapbox-directions-instructions { font-size: .875em;
}
.mapbox-directions-inputs, .mapbox-directions-inputs *, .mapbox-directions-errors, .mapbox-directions-errors *, .mapbox-directions-routes, .mapbox-directions-routes *, .mapbox-directions-instructions, .mapbox-directions-instructions * { box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box;
}
/* Inputs */
.mapbox-directions-origin,
.mapbox-directions-destination { background-color: #ffffff; position: relative;
}
.mapbox-directions-origin .mapbox-form-label,
.mapbox-directions-destination .mapbox-form-label { background-color: transparent;
}
.mapbox-directions-origin .mapbox-form-label .mapbox-directions-icon,
.mapbox-directions-destination .mapbox-form-label .mapbox-directions-icon { background-position: 50%; background-size: contain; height: 12px; width: 16px;
}
.mapbox-directions-origin { border-bottom: 2px solid #C0C1C2;
}
.mapbox-directions-origin .mapbox-form-label .mapbox-directions-icon { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/marker.svg");
}
.mapbox-directions-destination input { border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.mapbox-directions-destination .mapbox-form-label .mapbox-directions-icon { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/marker-finish.svg");
}
.mapbox-directions-inputs input { border: 0; background-color: transparent; color: #474b4e; font-size: .8125em; height: 30px; margin: 0; padding: 7px 20px 7px 38px; width: 100%;
}
.mapbox-directions-inputs input:focus { box-shadow: none; outline: 0;
}
.mapbox-directions-inputs .mapbox-close-icon { opacity: .7; padding: 2px; position: absolute; right: 5px; top: 6px; cursor: pointer; z-index: 2;
}
.mapbox-form-label { background: #474b4e; color: #474b4e; cursor: pointer; line-height: .75em; font-weight: bold; left: 0; padding: 10px 8px; position: absolute; text-align: center; top: 0;
}
.mapbox-directions-reverse-input, .mapbox-directions-reverse-input.mapbox-directions-icon { background-position: 50%; background-size: contain; background-color: transparent; cursor: pointer; height: 16px; left: 22px; top: 23px; position: absolute; width: 16px; z-index: 10;
}
.mapbox-directions-reverse-input.mapbox-directions-icon { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/icon-reverse.svg");
}
input:not(:valid) + .mapbox-close-icon { display: none;
}
.mapbox-close-icon:hover { opacity: .75;
}
/* Errors */
.mapbox-directions-error { color: white; display: inline-block; padding: 0 5px;
}
/* Routes */
.mapbox-directions-routes ul { list-style: none; margin: 0; padding: 10px 10px 0 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.mapbox-directions-routes li { font-size: 12px; padding: 10px 10px 10px 80px; display: block; position: relative; cursor: pointer; color: rgba(255, 255, 255, 0.5); min-height: 60px;
}
.mapbox-directions-routes li:hover,
.mapbox-directions-routes .mapbox-directions-route-active { color: white;
}
.mapbox-directions-route-heading { position: absolute; left: 10px; top: 10px;
}
.mapbox-directions-route-summary { display: none;
}
.mapbox-directions-route-active .mapbox-directions-route-summary { display: block;
}
.mapbox-directions-route-details { font-size: 12px; color: rgba(255, 255, 255, 0.5);
}
/* Instructions */
.mapbox-directions-steps { position: relative; list-style: none; margin: 0; padding: 0;
}
.mapbox-directions-step { position: relative; color: rgba(255, 255, 255, 0.75); cursor: pointer; padding: 20px 20px 20px 40px; font-size: 20px; line-height: 25px;
}
.mapbox-directions-step-distance { color: rgba(255, 255, 255, 0.5); position: absolute; padding: 5px 10px; font-size: 12px; left: 30px; bottom: -15px;
}
.mapbox-directions-step:hover { color: white;
}
.mapbox-directions-step:after { content: ""; position: absolute; top: 50px; bottom: -20px; border-left: 2px dotted rgba(255, 255, 255, 0.2); left: 20px;
}
.mapbox-directions-step:last-child:after,
.mapbox-directions-step:last-child .mapbox-directions-step-distance { display: none;
}
/* icons */
.mapbox-directions-icon { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/mapbox.directions.png"); -webkit-background-size: 280px 20px; background-size: 280px 20px; background-repeat: no-repeat; margin: 0; content: ''; display: inline-block; vertical-align: top; width: 20px; height: 20px;
}
.mapbox-directions-instructions .mapbox-directions-icon { position: absolute; left: 10px; top: 25px; margin: auto;
}
.mapbox-continue-icon { background-position: 0 0;
}
.mapbox-sharp-right-icon { background-position: -20px 0;
}
.mapbox-turn-right-icon { background-position: -40px 0;
}
.mapbox-bear-right-icon { background-position: -60px 0;
}
.mapbox-u-turn-icon { background-position: -80px 0;
}
.mapbox-sharp-left-icon { background-position: -100px 0;
}
.mapbox-turn-left-icon { background-position: -120px 0;
}
.mapbox-bear-left-icon { background-position: -140px 0;
}
.mapbox-depart-icon { background-position: -160px 0;
}
.mapbox-enter-roundabout-icon { background-position: -180px 0;
}
.mapbox-arrive-icon { background-position: -200px 0;
}
.mapbox-close-icon { background-position: -220px 0;
}
.mapbox-error-icon { background-position: -260px 0;
}
.mapbox-marker-drag-icon { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/icon-route_path.svg"); background-size: contain; display: block;
}
.waypoint-icon { background-image: none;
}
.leaflet-container circle, .leaflet-container polyline, .leaflet-container path { transition: 0.1s all ease-in-out; -webkit-transition: 0.1s all ease-in-out; -ms-transition: 0.1s all ease-in-out; -moz-transition: 0.1s all ease-in-out; -o-transition: 0.1s all ease-in-out;
}
.leaflet-container .leaflet-left { left: 32px; top: 24px;
}
.leaflet-container .leaflet-control { border: none; box-shadow: none; border-radius: 0; margin: 0;
}
.leaflet-container .leaflet-control a { background-image: none; background-color: #b9babc; border-bottom: 2px solid #fff; border-radius: 0; color: #fff; font-family: "tradegothic", sans-serif; font-weight: normal; font-size: 20px; height: 32px; line-height: 28px; opacity: 1; position: relative; text-indent: 0; width: 30px; -webkit-font-smoothing: antialiased; transition: 0.2s opacity ease-in-out; -webkit-transition: 0.2s opacity ease-in-out; -ms-transition: 0.2s opacity ease-in-out; -moz-transition: 0.2s opacity ease-in-out; -o-transition: 0.2s opacity ease-in-out;
}
.leaflet-container .leaflet-control a:hover { border-radius: 0; height: 32px; opacity: 0.7;
}
.leaflet-container .leaflet-control a:hover:last-child { border-bottom: 2px solid #fff;
}
.leaflet-container .leaflet-control a.leaflet-control-zoom-out { color: #b9babc;
}
.leaflet-container .leaflet-control a.leaflet-control-zoom-out:before { color: #fff; content: '--'; height: 100%; left: 0; letter-spacing: -0.1em; position: absolute; text-align: center; text-indent: -0.1em; top: 0; width: 100%;
}
.leaflet-container .leaflet-control a.mapbox-icon-geocoder { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/icon-geocoder.svg"); background-size: 58%; background-position: 50% 50%;
}
.leaflet-container .leaflet-control a.mapbox-icon-geocoder:hover { border-bottom: 2px solid #fff;
}
.leaflet-container .leaflet-control a.leaflet-control-fullscreen-button { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/[email protected]"); background-size: 90%; background-position: 50% 55.5%;
}
.leaflet-container .leaflet-control .leaflet-disabled { background-color: #e1e1e1; color: #474b4e;
}
.leaflet-container .leaflet-control .leaflet-control-layers-toggle { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30907/[email protected]"); background-position: 50% -106px; background-size: 90%;
}
.leaflet-container .leaflet-control-layers-base label, .leaflet-container .leaflet-control-layers-overlays label { display: block; margin-bottom: 5px; position: relative;
}
.leaflet-container .leaflet-control-layers-base label:last-child, .leaflet-container .leaflet-control-layers-overlays label:last-child { margin-bottom: 0;
}
.leaflet-container .leaflet-control-layers-base span, .leaflet-container .leaflet-control-layers-overlays span { color: #717179; font-size: 1em; line-height: 20px;
}
.leaflet-container .leaflet-control-layers-base .leaflet-control-layers-selector, .leaflet-container .leaflet-control-layers-overlays .leaflet-control-layers-selector { cursor: pointer; height: 20px; left: 0; margin: 0; position: absolute; top: 0; width: 100%; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; -o-appearance: none;
}
.leaflet-container .leaflet-control-layers-base .leaflet-control-layers-selector:checked + span, .leaflet-container .leaflet-control-layers-overlays .leaflet-control-layers-selector:checked + span { color: #474b4e; font-weight: 900; font-size: 1.06875em;
}
.leaflet-container .leaflet-control-layers-separator { border-top: 2px solid #fff; margin: 10px -12px 9px;
}
.leaflet-container .leaflet-control-layers-expanded { background-color: #f1f1f1; border-bottom: 2px solid #fff; color: #fff; font-family: "Lato", sans-serif; letter-spacing: 0.05em; text-transform: uppercase; padding: 8px 12px;
}
.leaflet-container img.leaflet-marker-icon { top: -11px; width: 10px;
}
.leaflet-container .leaflet-control-attribution a { background: transparent; border-bottom: none; color: #999; font-family: "Lato", sans-serif; font-size: .8125em; height: auto; line-height: 2em; text-transform: none; width: auto;
}
.leaflet-container .leaflet-control-mapbox-geocoder-wrap { background-color: #b9babc; border: none; border-left: 2px solid #fff; border-radius: 0; color: #fff; display: inline-block; height: 30px; left: 30px; top: 0;
}
.leaflet-container .leaflet-control-mapbox-geocoder-wrap .leaflet-control-mapbox-geocoder-form input { height: 30px;
}
.leaflet-container .leaflet-control-mapbox-geocoder.active .leaflet-control-mapbox-geocoder-results { background: transparent; border: none; border-top: 2px solid #fff; left: 32px; position: absolute; top: 30px;
}
.leaflet-container .leaflet-control-mapbox-geocoder.active .leaflet-control-mapbox-geocoder-results a { background-color: #C0C1C2; border: none; border-bottom: 2px solid #fff; font-family: "Lato", sans-serif; font-size: .8125em; line-height: 30px; text-align: left; width: 178px;
}
.leaflet-right.leaflet-top { bottom: 5vh; right: 5%; top: auto; z-index: 2;
}
.leaflet-right { z-index: 1;
}
.leaflet-bar a { text-align: center;
}
.query-result { background: #e8e8e8; border-bottom: 2px solid #fff; display: block; font-size: .75em; overflow: hidden; padding: .75rem; text-overflow: ellipsis; white-space: nowrap;
}
.query-result:last-of-type { border-bottom: none;
}

Directions with geocoder - Script Codes JS Codes

// Map Init
L.mapbox.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6IlhHVkZmaW8ifQ.hAMX5hSW-QnTeRCMAy9A8Q';
var map = L.mapbox.map( 'map', 'mapbox.streets', { maxZoom: 18, minZoom: 6
}).setView([37.7731, -122.4519], 12);
// Geocoder
var geocoder = L.mapbox.geocoder('mapbox.places-v1');
// Directions
var directions = L.mapbox.directions({ profile: 'mapbox.cycling', options : { alternatives : true } }), 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);
var geoLocate = document.getElementById("geofind"), errorsDiv = document.getElementById("errors"), originInput = document.getElementById('inputs'), originWrap = document.querySelector( '.mapbox-directions-origin' ), destinationWrap = document.querySelector( '.mapbox-directions-destination' ), directionsOrigin = document.getElementById('mapbox-directions-origin-input'), directionsDestination = document.getElementById('mapbox-directions-destination-input'), directionsRoutes = document.querySelector( '.mapbox-directions-routes' ), directionsInstructions = document.querySelector( '.mapbox-directions-instructions' ), closeIcon = document.querySelectorAll('.mapbox-directions-icon.mapbox-close-icon'), directionsDiv = document.getElementById( 'directions' ), instructionsDiv = document.getElementById( 'instructions' ), directionsCheck = document.querySelector( '.directions-check' );
for ( var i = 0; i < closeIcon.length; i++ ) { closeIcon[i].addEventListener( 'click', function() { geoLocate.classList.remove( 'z-lower' ); directionsDiv.classList.remove( 'add-top' ); directionsInstructions.innerHTML = ''; directionsRoutes.innerHTML = ''; navigator.geolocation.clearWatch( watch ); positionMarker.setLatLng( [ 0, 180 ] ) });
};
originInput.addEventListener( 'focusin', function() { // map.addLayer(directionsLayer); geoLocate.classList.add( 'z-lower' );
});
directionsDiv.addEventListener( 'scroll', function() { if ( !directionsDiv.classList.contains( 'add-top' ) ) { directionsDiv.classList.add( 'add-top' ); if ( directionsCheck.checked === false ) { directionsCheck.checked = true; } }
});
// html5 geolocation and set directions origin
var geo_options = { enableHighAccuracy: true, maximumAge : 3000, timeout : 9000
};
// Bind events to directions origin for geocoder
jQuery( directionsOrigin ).bind( 'input paste', function() { // if more than 3 characters typed into directions origin, query geocoder if ( this.value.length > 3 ) { geocoder.query( this.value, updateQuery ); }
});
// Bind events to directions destination for geocoder
jQuery( directionsDestination ).bind( 'input paste', function() { // if more than 3 characters typed into directions origin, query geocoder if ( this.value.length > 3 ) { geocoder.query( this.value, updateQuery ); }
});
// reverse for mapbox
function reverse( y ) { return y.geometry.coordinates.reverse();
}
function queryable() { directions.options.profile = 'mapbox.walking'; if ( directions.getOrigin() && directions.getDestination() ) { directions.query(); }
}
function destinationDirection( a ) { directions.setDestination( L.latLng( a ) );
}
function originDirection( a ) { directions.setOrigin( L.latLng( a ) );
}
function updateQuery(err, data) { // Remove any previous query results jQuery('.query-result').remove(); var resultFeatures = data.results.features; if ( document.activeElement === directionsDestination ) { var activeInput = destinationWrap, activeDirection = destinationDirection; } else if ( document.activeElement === directionsOrigin ) { var activeInput = originWrap, activeDirection = originDirection; } // limit results to 5 for( var e = 0, i = Math.min( resultFeatures.length, 5); i > e; e++) { var x = resultFeatures[e], placeName = x.place_name, placeCoords = reverse(x), resultLink = L.DomUtil.create( "a", "query-result", activeInput ); // add data to newly created a tag resultLink.href = "#"; resultLink.innerHTML = placeName; resultLink.setAttribute( 'data-coords', placeCoords ) L.DomEvent.addListener( resultLink, "click", function() { var f = this.getAttribute( 'data-coords'), a = [], sp = f.split( ',', 2 ), pff = parseFloat( sp[0] ), pfs = parseFloat( sp[1] ), pfc = pff.toString().slice(0, 1); if (pfc === '-') { a.push( pfs, pff ); } else { a.push( pff, pfs ); } map.setZoom( 17 ); map.panTo( L.latLng( a ) ); activeDirection( a ); queryable(); // directions origin set, remove query results jQuery('.query-result').remove(); }); }
}
// geolocation position marker
var positionMarker = L.marker( [0, 0], { icon: L.icon({ iconUrl : '/wp-content/themes/walkbikenc/img/icon-route_path.svg', iconSize : [24, 24], iconAnchor : [0, 0], popupAnchor: [-24, -24] }), title : 'You'
});
// create watch variable so we can remove it
var watch;
geoLocate.addEventListener( 'click', function() { if ( !navigator.geolocation ){ errorsDiv.innerHTML = "<p>Geolocation is not supported by your browser</p>"; return; } // Geo Position navigator.geolocation.getCurrentPosition( success, error, geo_options );
});
function success(position) { var lat = position.coords.latitude, lng = position.coords.longitude; map.panTo( [lat,lng] ); map.setZoom( 17 ); directions.setOrigin( L.latLng(lat,lng) ); geoLocate.classList.add( 'z-lower' ); geoWatch( position ); positionMarker.addTo(map);
}; function watchSuccess( position ) { positionMarker.setLatLng( L.latLng( position.coords.latitude, position.coords.longitude ) );
}
function error() { errorsDiv.innerHTML = "Unable to retrieve your location";
};
function geoWatch( position ) { watch = navigator.geolocation.watchPosition( watchSuccess, error, geo_options);
}

Home Page	Home
Developer	Pollardld
Username	pollardld
Uploaded	November 08, 2022
Rating	3
Size	12,546 Kb
Views	8,096

Do you need developer help for Directions with geocoder?

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	Size
FCC Vote Date - PSA	2,049 Kb
Turkey Hunting with Horizontal Lines	7,568 Kb
Dropdown Selector	4,469 Kb
SVG Animation	3,133 Kb
Paypal checkout svg	21,662 Kb
Titanis walleri	3,596 Kb
Triceratops	3,458 Kb
Bejeweled pieces	4,449 Kb
CSS off screen menu with navicon	3,844 Kb
Mapbox Directions with geolocation tracking	5,827 Kb

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!

Similar Scripts & Codes

Name	Username	Size
Hover Animation from UNIQLO	Insprd	3,772 Kb
Personal Logo Animation	Lloydwheeler	3,795 Kb
Loading animation	Hafizfattah	0 Kb
Simple Buttons	Haydenmills	1,750 Kb
Update CSS Variables with JS	Wesbos	2,335 Kb
My Interests	Anshusaxenaarora	2,015 Kb
CSS Link Zoom On Click	Bryce	1,960 Kb
A Pen by Moeid Saleem	Moeidsaleem	1,862 Kb
Simple Login Form Template	Banunn	3,571 Kb
BlueBox Fork	Huskynation	12,675 Kb

Do you want hide your ip address?

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!