Parcel shop locator
Embeddable HTML/js parcel shop map picker

Parcel shop locator is intended for partners whose web sites/shops are integrated with Overseas Express' programmatic APIs and have a need for their end users to pick destination parcel shops upon shipment request creation.

Contents

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

    Search box

    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, 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>