Skip to content

Instantly share code, notes, and snippets.

@festusforzz

festusforzz/date-dropper-and-map-ui-demo.markdown

Created October 14, 2021 11:11
Show Gist options
  • Save festusforzz/085576209407fb436803e764025f5dfd to your computer and use it in GitHub Desktop.
Save festusforzz/085576209407fb436803e764025f5dfd to your computer and use it in GitHub Desktop.
Download ZIP
Date Dropper and Map UI demo
Raw
index.html
<body>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1/leaflet.css" />
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/leaflet/1/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/places.js/1/places.min.js"></script>
</head>
<div id="container">
<h1>Simple date and map picker</h1>
<!-- Date Plugin -->
<div class="box js-box1">
<!-- flex item -->
<h2>Pick a date</h2>
<input type="text" />
</div>
<!-- Map Plugin -->
<div class="box js-box2">
<h2>Pick a location</h2>
<div id="map-example-container"></div>
<input type="search" id="input-map" class="form-control" placeholder="Where are we going?" />
</div>
</div>
</body>
Raw
script.js
$('input').dateDropper();
/* Maps */
(function() {
var placesAutocomplete = places({
container: document.querySelector('#input-map')
});
var map = L.map('map-example-container', {
scrollWheelZoom: false,
zoomControl: false
});
var osmLayer = new L.TileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
minZoom: 1,
maxZoom: 13,
attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
}
);
var markers = [];
map.setView(new L.LatLng(0, 0), 1);
map.addLayer(osmLayer);
placesAutocomplete.on('suggestions', handleOnSuggestions);
placesAutocomplete.on('cursorchanged', handleOnCursorchanged);
placesAutocomplete.on('change', handleOnChange);
placesAutocomplete.on('clear', handleOnClear);
function handleOnSuggestions(e) {
markers.forEach(removeMarker);
markers = [];
if (e.suggestions.length === 0) {
map.setView(new L.LatLng(0, 0), 1);
return;
}
e.suggestions.forEach(addMarker);
findBestZoom();
}
function handleOnChange(e) {
markers
.forEach(function(marker, markerIndex) {
if (markerIndex === e.suggestionIndex) {
markers = [marker];
marker.setOpacity(1);
findBestZoom();
} else {
removeMarker(marker);
}
});
}
function handleOnClear() {
map.setView(new L.LatLng(0, 0), 1);
markers.forEach(removeMarker);
}
function handleOnCursorchanged(e) {
markers
.forEach(function(marker, markerIndex) {
if (markerIndex === e.suggestionIndex) {
marker.setOpacity(1);
marker.setZIndexOffset(1000);
} else {
marker.setZIndexOffset(0);
marker.setOpacity(0.5);
}
});
}
function addMarker(suggestion) {
var marker = L.marker(suggestion.latlng, {
opacity: .4
});
marker.addTo(map);
markers.push(marker);
}
function removeMarker(marker) {
map.removeLayer(marker);
}
function findBestZoom() {
var featureGroup = L.featureGroup(markers);
map.fitBounds(featureGroup.getBounds().pad(0.5), {
animate: false
});
}
})();
$(".js-box2").hide();
$(".dd-s").on("click", function() {
$(".js-box1").hide();
$(".js-box2").show();
})
$(".ap-icon-clear").on("click", function() {
$(".js-box2").hide();
$(".js-box1").fadeIn();
})
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datedropper/2.0/datedropper.js"></script>
<script src="https://cdn.jsdelivr.net/leaflet/1/leaflet.js"></script>
Raw
style.css
body {
font-family: 'Didact Gothic', sans-serif;
font-size: 20px;
background: #ECE9E6;
/* fallback for old browsers */
background: -webkit-linear-gradient(to left, #ECE9E6, #FFFFFF);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ECE9E6, #FFFFFF);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 500px;
margin: 40px auto;
}
.box {
width: 300px;
margin: 5px;
text-align: center;
}
input {
padding: 20px;
text-align: center;
}
div.datedropper.my-style {
border-radius: 4px;
width: 200px;
}
div.datedropper.my-style .picker {
border-radius: 4px;
box-shadow: 0 0 24px 0px rgba(0, 0, 0, 0.58);
}
div.datedropper.my-style .pick-l {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
div.datedropper.my-style:before,
div.datedropper.my-style .pick-submit,
div.datedropper.my-style .pick-lg-b .pick-sl:before,
div.datedropper.my-style .pick-m,
div.datedropper.my-style .pick-lg-h {
background-color: #fd4741;
}
div.datedropper.my-style .pick-y.pick-jump,
div.datedropper.my-style .pick li span,
div.datedropper.my-style .pick-lg-b .pick-wke,
div.datedropper.my-style .pick-btn {
color: #fd4741;
}
div.datedropper.my-style .picker,
div.datedropper.my-style .pick-l {
background-color: #FFF;
}
div.datedropper.my-style .picker,
div.datedropper.my-style .pick-arw,
div.datedropper.my-style .pick-l {
color: #4D4D4D;
}
div.datedropper.my-style .pick-m,
div.datedropper.my-style .pick-m .pick-arw,
div.datedropper.my-style .pick-lg-h,
div.datedropper.my-style .pick-lg-b .pick-sl,
div.datedropper.my-style .pick-submit {
color: #FFF;
}
div.datedropper.my-style.picker-tiny:before,
div.datedropper.my-style.picker-tiny .pick-m {
background-color: #FFF;
}
div.datedropper.my-style.picker-tiny .pick-m,
div.datedropper.my-style.picker-tiny .pick-m .pick-arw {
color: #4D4D4D;
}
div.datedropper.my-style.picker-lkd .pick-submit {
background-color: #FFF;
color: #4D4D4D;
}
/* Map CSS */
#map-example-container {
height: 300px
}
;
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/datedropper/2.0/datedropper.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/leaflet/1/leaflet.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment