Skip to content

Instantly share code, notes, and snippets.

@powolnymarcel

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

Forked from festusforzz/date-dropper-and-map-ui-demo.markdown
Created January 7, 2023 04:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save powolnymarcel/ae75868149c99da62f5676f5c20c343a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save powolnymarcel/ae75868149c99da62f5676f5c20c343a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @festusforzz festusforzz created this gist Oct 14, 2021.
    7 changes: 7 additions & 0 deletions date-dropper-and-map-ui-demo.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Date Dropper and Map UI demo
    ----------------------------


    A [Pen](https://codepen.io/JackEdwardLyons/pen/jyJqev) by [Jack](https://codepen.io/JackEdwardLyons) on [CodePen](https://codepen.io).

    [License](https://codepen.io/JackEdwardLyons/pen/jyJqev/license).
    28 changes: 28 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    <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>
    107 changes: 107 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,107 @@
    $('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();
    })
    3 changes: 3 additions & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <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>
    103 changes: 103 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,103 @@
    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
    }

    ;
    2 changes: 2 additions & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    <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" />