m.gis v0.2.1

by lukerichison

HTML

<div id="overlay">
    <a id="O"><span class="icon-options"></span></a>
    <a id="L"><span class="icon-loading"></span></a>
    <a id="X"><span class="icon-x"></span></a>
    <input id="search" type="text" placeholder="Search Parcels"/>


    <div class="overlay" id="options">
        <ul>
            <li data-overlay=   "search_layer   ">Search Layer</li>
            <li data-overlay=   "layers         ">Layers</li>
            <li data-fullscreen="advanced_search">Advanced Search</li>
            <li data-fullscreen="help           ">Help</li>
        </ul>
    </div>


    <div class="overlay" id="search_layer">
        <ul>
            <li><input type="radio" name="search_layer" id="search_layer_parcels" value="parcels" checked="checked"/><label for="search_layer_parcels">Parcels</label></li>
            <li><input type="radio" name="search_layer" id="search_layer_subdivisions" value="subdivisions"/><label for="search_layer_subdivisions">Subdivisions</label></li>
        </ul>
    </div>


    <div class="overlay" id="layers">
        <ul>
            <li><input type="checkbox" name="layers" id="layers_parcels" value="parcels"/><label for="layers_parcels">Parcels</label></li>
            <li><input type="checkbox" name="layers" id="layers_subdivisions" value="subdivisions"/><label for="layers_subdivisions">Subdivisions</label></li>
            <li><input type="checkbox" name="layers" id="layers_bus_routes" value="bus_routes"/><label for="layers_bus_routes">Bus Routes</label></li>
        </ul>
    </div>


    <div class="overlay" id="results">
        <div class="header"><span>view on map</span><span>view full listing</span></div>
        <ul>
            <li>
                <img src="http://static.squarespace.com/static/503b5a2084ae55f9f01f95e2/t/505170a024ac3544de31344c/1347514530764/House%20thumbnail%20copy.jpeg" alt="missing photo"/>
                <ul>
                    <li>Property title 1</li>
                    <li>attribute</li>
              ...

CSS

/* include this meta-tag in the */
</style><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><style>


@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400);
body, input {
    font: normal normal 300 1em/1.5em "Source Sans Pro", sans-serif;
    color: #444;
}
body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background: center top url(http://2.bp.blogspot.com/-daQMoDFpFI0/TyEiztqsjTI/AAAAAAAABtE/Cn_b3rRJu5A/s1600/google-maps-ubertechblog.png);
}
span.icon-options,
span.icon-x,
span.icon-return,
span.icon-loading,
span.icon-arrow {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    padding: 0.75em 0 0 0.75em;
    background-image: url(http://development.advncs.com/dev/GIS/mapviewer/assets/icons/icons2.png?v0.2.2);
    background-origin: content-box;
    background-size: 14em 8em;
    background-repeat: no-repeat;
}
span.icon-options { background-position:  -1em  -4em; }
span.icon-x       { background-position:  -4em  -7em; }
span.icon-return  { background-position:  -7em  -4em; }
span.icon-loading { background-position: -10em  -7em; }
span.icon-arrow   { background-position: -13em  -7em; }
#overlay,
#overlay .overlay {
    overflow: hidden;
}
#overlay,
#search {
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
#overlay {
    margin: 0.5em;
    background-color: rgba(235,235,235,0.9);
    position: relative;
}
#search {
    margin: 0;
    border: 0;
    padding: 0.5em 4em 0.5em 1em;
    width: 100%;
    background: none;
    box-sizing: border-box;
}
#search:focus {
    outline: none;
}
#search::-webkit-input-placeholder {
    color: #888;
}
#O, #X, #L {
    position:absolute;
    top: 0;
    right: 0;
    padding: 0.5em;
}
#X, #L {
    width: 0;
    padding: 0;
    overflow: hidden;
    right: 2.5em;
    margin-right: 1px;
    opacity: 0;
            transition: opacity 0.6s;
         -o-transition: opacity 0.6s;
        -ie-transition: opacity 0.6s;
    ...

JavaScript

/* ============================================================
 * Initial variables
 * ============================================================ */
// OLD variables store selectors for overlays & fullscreens
var OLDo = false, OLDf = false,
    // boolean variable set to true if overlay animation is running
    togglingOverlay = false,
    // calculate the max-height for overlays
    maxheight = $(window).height() - $('#overlay').offset().top - ($('#search').height() *2);
    // the Results overlay has a header, so its UL needs a max-height
    $('#results').children('ul').css('max-height', maxheight - $('#results').children('.header').height());

/* ============================================================
 * On window resize (orientation change), recalculate heights
 * ============================================================ */
$(window).resize(function(){
    // recalculate max-height variable
    maxheight = $(window).height() - $('#overlay').offset().top - ($('#search').height() *2);
    // if an overlay is active recalculate its max-height
    if (OLDo) {
        OLDo.css('max-height', Math.min(maxheight, OLDo[0].scrollHeight));
        // is the results overlay active?
        if (OLDo[0].id == 'results') {
            // recalculate the UL max-height
            $('#results').children('ul').css('max-height', maxheight - $('#results').children('.header').height());
        }
    }
    // if a fullscreen is active recalculate its height
    if (OLDf) {
        OLDf.children('.body').css('max-height', $(window).height()-OLDf.children('.body').offset().top-OLDf.children('.footer').height());
    }
});


/* ============================================================
 * Overlay Toggler
 * ============================================================ */
// event listeners
// When the options icon is clicked
$('#O').click(function(){toggleOverlay($('#options'));});
// You may want to delete this listener, but it is included for demonstration
// to close...