I am building an interactive mapping web app and needed to bounce some ideas off of you all.
I need some guidance on how I would go about bypassing Mapbox's addGeocoderControl and use a search box on a navbar instead?
Below are the HTML/CSS/JS snippets.
HTML:
CSS:
.navbarsearch1 { position: relative; padding-top: 30px !important; max-height: 270px; } .navbarsearch1 .navbar-form[role="search"] { position: absolute; top: 0px; right: 0px; padding: 0px; margin: 0px; z-index: 0; } .navbarsearch1 .navbar-form[role="search"] button, .navbarsearch1 .navbar-form[role="search"] input { border-radius: 0px; border-width: 0px; background-color: #222222; border-color: none; box-shadow: none; outline: none; } .navbarsearch1 .navbar-form[role="search"] input { width: 100%; font-family: 'Raleway', sans-serif; text-transform: uppercase; color: #3498db; box-shadow: none; } @media (min-width: 768px) { .navbarsearch1 { padding-top: 0px !important; padding-right: 38px !important; } .navbarsearch1 .navbar-form[role="search"] { padding-top: 0px; width: 38px; } .navbarsearch1 .navbar-form[role="search"] button, .navbarsearch1 .navbar-form[role="search"] input { padding: 15px 12px; } .navbarsearch1 .navbar-form[role="search"] input { font-size: 1em; font-family: 'Raleway', sans-serif; opacity: 0; display: none; height: 50px; } .navbarsearch1 .navbar-form[role="search"].active { width: 100%; -webkit-transition: all .75s ease-in-out; -moz-transition: all .75s ease-in-out; -o-transition: all .75s ease-in-out; transition: all .75s ease-in-out; } .navbarsearch1 .navbar-form[role="search"].active button, .navbarsearch1 .navbar-form[role="search"].active input { display: table-cell; opacity: 1; } .navbarsearch1 .navbar-form[role="search"].active input { width: 95%; } } JS:
$(document).on('click', '.navbar-collapse .navbar-form[role="search"]:not(.active) button[type="submit"]', function(e) { e.preventDefault(); var $form = $(this).closest('form'), $input = $form.find('input'); $form.addClass('active'); $input.focus(); }); $('body, .navbar-collapse .navbar-form[role="search"] button[type="reset"]').on('click keyup', function(event) { if (event.which == 27 && $('.navbar-collapse .navbar-form[role="search"]').hasClass('active') || $(event.currentTarget).attr('type') == 'reset') { closeSearchBox(); } }); function closeSearchBox() { var $form = $('.navbar-collapse .navbar-form[role="search"].active') $form.find('input').val(''); $form.removeClass('active'); };
أكثر...
I need some guidance on how I would go about bypassing Mapbox's addGeocoderControl and use a search box on a navbar instead?
Below are the HTML/CSS/JS snippets.
HTML:
CSS:
.navbarsearch1 { position: relative; padding-top: 30px !important; max-height: 270px; } .navbarsearch1 .navbar-form[role="search"] { position: absolute; top: 0px; right: 0px; padding: 0px; margin: 0px; z-index: 0; } .navbarsearch1 .navbar-form[role="search"] button, .navbarsearch1 .navbar-form[role="search"] input { border-radius: 0px; border-width: 0px; background-color: #222222; border-color: none; box-shadow: none; outline: none; } .navbarsearch1 .navbar-form[role="search"] input { width: 100%; font-family: 'Raleway', sans-serif; text-transform: uppercase; color: #3498db; box-shadow: none; } @media (min-width: 768px) { .navbarsearch1 { padding-top: 0px !important; padding-right: 38px !important; } .navbarsearch1 .navbar-form[role="search"] { padding-top: 0px; width: 38px; } .navbarsearch1 .navbar-form[role="search"] button, .navbarsearch1 .navbar-form[role="search"] input { padding: 15px 12px; } .navbarsearch1 .navbar-form[role="search"] input { font-size: 1em; font-family: 'Raleway', sans-serif; opacity: 0; display: none; height: 50px; } .navbarsearch1 .navbar-form[role="search"].active { width: 100%; -webkit-transition: all .75s ease-in-out; -moz-transition: all .75s ease-in-out; -o-transition: all .75s ease-in-out; transition: all .75s ease-in-out; } .navbarsearch1 .navbar-form[role="search"].active button, .navbarsearch1 .navbar-form[role="search"].active input { display: table-cell; opacity: 1; } .navbarsearch1 .navbar-form[role="search"].active input { width: 95%; } } JS:
$(document).on('click', '.navbar-collapse .navbar-form[role="search"]:not(.active) button[type="submit"]', function(e) { e.preventDefault(); var $form = $(this).closest('form'), $input = $form.find('input'); $form.addClass('active'); $input.focus(); }); $('body, .navbar-collapse .navbar-form[role="search"] button[type="reset"]').on('click keyup', function(event) { if (event.which == 27 && $('.navbar-collapse .navbar-form[role="search"]').hasClass('active') || $(event.currentTarget).attr('type') == 'reset') { closeSearchBox(); } }); function closeSearchBox() { var $form = $('.navbar-collapse .navbar-form[role="search"].active') $form.find('input').val(''); $form.removeClass('active'); };
أكثر...