Overseas Express - Parcel shop locator

From Infranet Wiki
Jump to: navigation, search

Here you can find instructions how to use and embed the locator.

Overview

Overseas Express - Parcel Shop Locator is a web application that gives information about Overseas Express parcel shops and visualizes them using Google Maps.

Layout

The web application has a simple layout consisting of three main parts: a map, a sidebarand a slidebar.

Map

The map is a classic Google Maps implementation with a black and white color style. The maps center is marked with the blue X-shaped marker and is restricted to the Croatian bounds. The red square markers with "OEx" written in them indicate parcel shops. The blue rounded markers indicate search results that are not parcel shops. By clicking any of the markers on the map, the map will zoom in to the marker on the map and display its information window.

Sidebar

The sidebar lists the parcel shops visible on the map. They are ordered by the distance from the center of the map which is displayed along with the parcel shops name and address. By clicking any of the parcel shops names in the sidebar, the map will zoom in to the marker on the map corresponding to the parcel shop and display its information window.

The sidebar also has a search bar and the search results are displayed on the map and listed in the slidebar.

Slidebar

The slidebar splits the search results into two lists. The first list shows the parcel shops that match the search term and the second list shows Croatian locations from the Google Search Engine results. By clicking on any of the list items, the map will zoom to the marker corresponding to the list items location and display its information window.

The slidebar is activated when the search bar is used. It can be deactivated and reactivated using the arrow at its top.

Information window

The information window shows the location name, address, coordinates, distance from the center of the map and a description. There is also a directions button for every location which gives you directions from your location. If you do deny the browser your location the directions will be defined form the center of the map. If the Locator is embedded in another website, the parcel shop information window has an extra button to send the parcel shop JSON object to the parent website.

Parcel shop JSON example:

{
  "id":11,
  "name":"Split Riva",
  "latitude":"43.507687",
  "longitude":"16.438724",
  "address":"Obala Hrvatskog narodnog preporoda 16",
  "postalCode":"21000",
  "city":"Split",
  "description":"Riva Split shop",
  "globalLocationNumber":null,
  "$$hashKey":"object:5"
}

Embedding

Here is the example code how to embed the Lokator into a website modal dialog window:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>OverseasExpress - Parcel Shop Lokator</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
    <script src="/Scripts/modernizr-2.6.2.js"></script>
    <style>
        body.modal-open {
            margin-right: 0;
        }

        .modal {
            overflow: auto;
        }
    </style>
    <style>
        #locatorModal .modal-dialog {
            width: auto;
            padding: 0px;
            margin: 50px;
        }

        #locatorModal .modal-content button {
            position: absolute;
            top: 15px;
            left: 15px;
            width: 40px;
            height: 40px;
            padding: 10px;
            background-color: #EEEEEE;
            color: #CC0000;
            border-style: none;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            -webkit-box-shadow: -5px 5px 10px -5px rgba(127,127,127,0.71);
            -moz-box-shadow: -5px 5px 10px -5px rgba(127,127,127,0.71);
            box-shadow: -5px 5px 10px -5px rgba(127,127,127,0.71);
            font-size: 18px;
            line-height: 20px;
            outline: 0;
        }
    </style>
</head>
<body>
    <div class="text-center">
        <!-- Modal trigger button -->
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#locatorModal">
            Locator
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="locatorModal" tabindex="-1" role="dialog" aria-labelledby="locatorModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <iframe src="<!--Lokator URL-->" width="100%" height="100%" frameborder="0"></iframe>
                <button id="closeBtn" data-dismiss="modal">
                    <span class="glyphicon glyphicon-remove"></span>
                </button>
            </div>
        </div>
    </div>

    <script src="/Scripts/jquery-2.1.1.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
    <script src="/Scripts/respond.js"></script>

    <script>
        function modalOpen() {
            $('#locatorModal').modal({ show: true });
        };

        function modalClose() {
            $('#locatorModal').modal({ show: false });
        };

        function modalResize() {
            var windowHeight = $(window).height();
            if (windowHeight > 100) {
                $('.modal-content').css('height', windowHeight - 100);
            }

            var windowWidth = $(window).width();
            if (windowWidth > 100) {
                $('.modal-content').css('width', windowWidth - 100);
            }
        }

        $(function () {
            $('#locatorModal').on('show.bs.modal', function () {
                modalResize();
                $(window).on('resize', function () {
                    modalResize();
                });
            });

            $('#openBtn').on('click', function (e) {
                e.preventDefault();
                modalOpen();
            });

            $('#closeBtn').on('click', function (e) {
                e.preventDefault();
                modalClose();
            });
        });
    </script>
    <script>
        // Create IE + others compatible event handler
        var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
        var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
        var eventer = window[eventMethod];

        // Listen to message from child window
        eventer(messageEvent, function (e) {
            e.preventDefault();
            if (e.data) {
                console.log(e.data);
                $('#closeBtn').trigger('click');
            }
        }, false);
    </script>
</body>
</html>