Nokumo logo

Overview

Overseas Express - Parcel Shop Locator is a web application that gives information about Overseas Express parcel shops and visualizes them using Google Maps. - Support for Croatia not available as of 1.6.2021. -

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. Parcel shops are indicated by an orange icon with a white OEX label. Parcel shops are grouped if there are many in a small map area. Groups are displayed as an orange circular icon with a count of parcel shops written on them. By clicking any of the markers on the map, the map will zoom in to the marker on the map. If a group icon was clicked, the map will zoom in to display the area containing all the parcel shops in a group. If the parcel shop icon was clicked locator will display its information window.

The search box is located in the top right corner of the locator. It is a standard Google maps search box used to search for an address. Once the address is picked, the map zooms in to the address location, and all the parcel shops when clicked display distance from the selected address in their information windows.

Information window

The information window shows the location name, address, coordinates, distance from the selected address (if one is selected), and a description. There is also a directions button for every location which gives you directions from your location. 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>