Contact us Login VIEW DEMO FREE TRIAL

User Applications

“User Applications” is a special plugin which designed for embedding user web application to Navixy main application interface. They appear as special item of the main menu, which opens specified external url address as an internal interface application.

Usage

User must develop a web application (HTML-page with the code) and place it on the network. URL address of the Web application, label and URL of image for menu icon, user must send to employee of our company. Web-application will be embedded to interface by special plugin.

Instructions for development

Inside his web application, user can communicate with Navixy API, connection performed by using session key presented, it and other parameters sent as GET-parameters when displaying HTML-page of application.

GET parameters
  • session_key – authentication key that is used to connect to the API
  • locale – current language of interface for localization features of user application.

Inside web application data exchange with API implemented by any available technology, such as AJAX. Application sends a request to the API, received response data for display or processing in JSON format.
Below an example of user web application displays a list of user trackers and marks on the map. Example is written on JavaScript language using the jQuery library.

<!DOCTYPE html>
<html>
<head>
    <title>Navixy API using example</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Latest version of Leaflet see on http://leafletjs.com/ -->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            font-family: "Myriad Pro", "Myriad Web", "Tahoma", "Helvetica", "Arial", sans-serif;
            color: #60626D;

            background-color: white;
        }

        #mapContainer {
            height: 100%;
        }

        #listContainer {
            width: 300px;
            height: 100%;
            float: left;
            border-right: 1px solid #ddd;

            overflow-y: auto;
            overflow-x: hidden;
        }

        #listTitle {
            width: 100%;
            padding: 20px 20px 5px;
            box-sizing: border-box;

            font-size: 18px;
        }

        #updateButton {
            width: 100%;
            padding: 5px 20px 15px;
            box-sizing: border-box;

            font-size: 12px;
            color: #27A9E3;
            text-decoration: underline;
            cursor: pointer;
            border-bottom: 1px solid #ddd;
        }

        #trackersList {
            padding: 0;
            list-style: none;
            overflow: hidden;
        }

        #trackersList li {
            width: 100%;
            padding: 5px 15px 5px 20px;
            font-size: 14px;
            white-space: nowrap;
            cursor: pointer;
            box-sizing: border-box;
        }
        #trackersList li:hover {
            background-color: #eee;
        }

        .leaflet-div-icon {
            background: transparent;
            border: 0;
        }
        .tracker-title {
            padding: 2px 5px;
            display: inline-block;
            background-color: white;
            border: 1px solid gray;

            font-family: "Myriad Pro", "Myriad Web", "Tahoma", "Helvetica", "Arial", sans-serif;
            color: #60626D;

            white-space: nowrap;
        }
        .blocked-tracker {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <!-- Container for trackers list -->
    <div id="listContainer">
        <div id="listTitle"></div>
        <div id="updateButton"></div>
        <ul id="trackersList">
        </ul>
    </div>
    <!-- Container for map -->
    <div id="mapContainer"></div>

    <script>
        function getUrlParameterByName(name) {
            var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
            return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
        }

        // Here we have parameters obtained from the main application.
        // "session_key" for establish connection with API and "locale" for localization our example.
        var sessionKey = getUrlParameterByName('session_key'),
            localeCode = getUrlParameterByName('locale'),

            // Here configured address of main API
            apiUrl = '//saas.navixy.com/api-v2';

            // Little example how we can use "locale" parameter
            locales = {
                en: {
                    list_title: "Trackers list",
                    update_button: "Update trackers"
                },
                es: {
                    list_title: "Lista de rastreadores",
                    update_button: "Rastreadores actualizar"
                }
            };
            locale = locales[localeCode] || locales.en,

            // Some global values for use
            trackersList = {},
            trackersMarkers = {},
            trackersIndexes = [];

        // Little example how we can use "locale" parameter
        $("#listTitle").html(locale.list_title);
        $("#updateButton").html(locale.update_button);

        // Bind trackers states update request to click on "button"
        $("#updateButton").on("click", function () {requestStates(true)});

        // Init main map instance in our map container
        // For more details see http://leafletjs.com/docs
        var mapObject = L.map('mapContainer').setView([51.505, -0.09], 13);

        // Init tiles layer for map, for example we use OpenStreetMaps tiles
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ',
            id: 'mapbox.streets'
        }).addTo(mapObject);

        // First of all, we want to retrieve a list of trackers.
        // Here simple AJAX request to <API url>/trackers/list
        // We must add required parameter "hash" in each call to the API
        // For more details see https://www.navixy.com/docs/developer/api/
        $.ajax({
            url: [apiUrl, "tracker", "list"].join("/"),
            data: {
                hash: sessionKey
            },
            success: handleTrackersList
        });

        // In API response we got JSON, there two parameters "success" and "list" - array of trackers main data
        // For more details see https://www.navixy.com/docs/developer/api/tracker/
        function handleTrackersList(result) {
            if (result.success && result.list && result.list.length) {
                var trackerId, tracker;

                // For easier use, save trackers with indexes in global value
                for (trackerId in result.list) {
                    tracker = result.list[trackerId];
                    trackersList[tracker["id"]] = tracker;
                }

                // Now we have only main data of trackers, so we must request trackers states with coordinates for placing on map
                requestStates();
                // And build html with list of trackers
                buildList();
            }
        }

        // Here we request trackers states from API, and overlaid markers to map or update them
        // For more details see https://www.navixy.com/docs/developer/api/tracker/get_states
        function requestStates(update) {
            var trackerId, tracker;

            // For request we need list of trackers indexes
            // Blocked tracker has no state, simply filter out them
            if (!trackersIndexes.length) {
                for (trackerId in trackersList) {
                    tracker = trackersList[trackerId];

                    if (!tracker.source.blocked) {
                        trackersIndexes.push(tracker.id);
                    }
                }
            }

            // Now we have array with trackers indexes, add it to request parameter "trackers"
            if (trackersIndexes.length) {
                $.ajax({
                    url: [apiUrl, "tracker", "get_states"].join("/"),
                    data: {
                        hash: sessionKey,
                        trackers: JSON.stringify(trackersIndexes)
                    },
                    dataType: "json",
                    success: update ? handleTrackersStatesUpdate : handleTrackersStates
                });
            }
        }

        // Check API response and build markers
        function handleTrackersStates(result) {
            if (result.success && result.states) {
                buildMarkers(result.states)
            }
        }

        // Check API response and update markers
        function handleTrackersStatesUpdate(result) {
            if (result.success && result.states) {
                updateMarkers(result.states)
            }
        }

        // Here we build markers for each tracker from his states that we just got from API
        function buildMarkers(trackersStates) {
            var stateId, state, location,
                locations = [];

            for (stateId in trackersStates) {
                state = trackersStates[stateId];

                // Tracker state contains several parameters, we need only coordinates from gps.location property
                // For more details see https://www.navixy.com/docs/developer/api/resources/tracker/get_state/
                location  = [state.gps.location.lat, state.gps.location.lng];


                // Collect all locations for map fitting
                locations.push(location);

                // Create markers and labels, save them in global value for further interaction
                // For more details see http://leafletjs.com/reference.html#marker
                trackersMarkers[stateId] = {
                    marker: L.marker(location).addTo(mapObject),
                    title: L.marker(location, {
                        icon: new L.DivIcon({
                            iconAnchor: [-15, 25],
                            html: ['<div class="tracker-title">' + trackersList[stateId].label + '</div>']
                        })
                    }).addTo(mapObject)
                };
            }

            // Pans the mp view to containing all markers on same screen
            mapObject.fitBounds(L.latLngBounds(locations), {padding: [10, 10]});
        }

        // We can update markers markers positions to new trackers states
        function updateMarkers(trackersStates) {
            var stateId, state, location,
                locations = [];

            for (stateId in trackersStates) {
                state = trackersStates[stateId];
                location  = [state.gps.location.lat, state.gps.location.lng];

                locations.push(location);

                // Update marker and label position to new state
                if (trackersMarkers[stateId] && trackersMarkers[stateId].marker) {
                    trackersMarkers[stateId].marker.setLatLng(location);
                    trackersMarkers[stateId].title.setLatLng(location);
                }
            }

            // Pans the mp view to containing all markers on same screen
            mapObject.fitBounds(L.latLngBounds(locations), {padding: [10, 10]});
        }

        // Build list of trackers
        function buildList() {
            var trackerId, tracker,
                blocked = false,
                listContainer = $("#trackersList");

            // Build list items html
            for (trackerId in trackersList) {
                tracker = trackersList[trackerId];
                blocked = tracker.source.blocked;
                listContainer.append('<li class="' + (blocked ? "blocked-tracker" : "") + '" role="' + tracker["id"] +'">-  ' + tracker["label"] + '</li>')
            }

            // Apply listeners to list items for pan map to marker when in selected in list
            listContainer.find("li:not(.blocked-tracker)").on("click", function (event) {
                var trackerId = $(event.target).attr("role");
                mapObject.setView(trackersMarkers[trackerId].marker.getLatLng(), 10);
            })
        }
    </script>
</body>
</html>

If you have more questions please contact our support team

Contacts

USA: +1 858 815 9045

Mexico: +52 334 1642158

UK: +44 808 1641499

Germany: +49 1573 5988250

Russia: +7 495 223 0427

Log in

Login

[clean-login]

CLOSE
Register

[clean-login-register]

CLOSE
Loading...