Right Click Is Disabled...

Author name: Ankesh Maradia

GPS/GSM based tracking system

The combination of Hardware and Software has always fascinated me. This brings me to one of very interesting Software-Hardware combo which most of us are using in our day to day life. By far you might have got idea about what I am talking about – “GPS based tracking system”. GPS based tracking system is one of the most widely used IoT solution right now.

Below figure 1 explains the concept of GPS/GSM based tracking system.

Figure 1: Concept of GPS/GSM based tracking system

Tracker – Hardware

Let us take a look at what things are involved to make a tracker (hardware) :

  1. GPS (Global Positioning System) module helps us to get the coordinates (latitude and longitude) of the tracker, but we need one more technology to transfer the tracker data to our system.
  2. GSM (Global System for Mobile communication) module is used to transfer the tracker data to any system in cloud.
  3. GSM needs an internet enabled SIM card to transfer data.
  4. A firmware program installed on the tracker which uses GPS and GSM to capture and transfer data.

GPS tracker provides data about vehicle condition (such ignition status, harsh breaking, speed), event (such as geofence alerts, speed alerts, ignition alerts, door alerts) as per configuration on tracker and of course location of the tracker.

Some of the GPS trackers also provide feature to immobilize the connected vehicle/any other connected system. And stores data locally when GSM network is not available for data transfer. More advanced GPS trackers provides lot more information about vehicle condition and driving behavior.

Tracking platform – Software

Let us take a look at what things are involved to make a tracking platform (software):

Listener service – this services listens for incoming data from tracker. Once data is received the listener service processes the data and stores the data into data store. Service can also generate various notifications such as over speed, ignition status.
Web Application – the application retrieves data from datastore and displays on User Interface.
Mobile Application – the application retrieves data from datastore via APIs and displays on User Interface.

The web/mobile application helps to track multiple trackers at the same time.

Applications of Tracking System

The implementation of tracking systems results in productivity, efficiency and safety improvements. Below are some areas where tracking system can be easily applied :

  1. Fleet management & tracking
  2. Tracking school bus
  3. Theft protection by locating stolen vehicle
  4. Personal tracking
  5. Child safety, keep an eye on your child
  6. Tracking product delivery
  7. Any many more, as this technology can be applied pretty much everywhere which requires tracking

GPS/GSM based tracking system Read More »

Create Mobile Responsive Web map Application Using Leaflet.js

Leaflet.Js is an open-source, lightweight, mobile-friendly javascript library created by Vladimir Agafonkin. In which you can implement map content on different map tiles like google-maps, OpenStreetMap, Mapbox, Maptiler, and your custom tile layer also using lots of plugins available in leafletjs.Com and also develop our own plugin by publishing on their Github repository. We can implement it in vanilla javascript, and its framework like react, angular, and Vue.

Features of Leaflet.js :

  1. It supports the WMS layer, Geojson layer, vector layer, tile layers, and also supports other types of layers using their supported plugin.
  2. It supports creating markers on the map with its events. Also, create a custom marker as our choice using images or create an SVG marker.
  3. Use different map tiles(like OpenStreetMap, Google Map, Mapbox, bing), and easy to change its tiles.
  4. It supports clustering, declustering Mechanism. Also, add a heatmap on the map.
  5. Add vector layers on the map like point, circle, polygon, polyline, SVG, canvas, circle marker, path and etc.
  6. It supports creating custom control on maps, adding image overlays, video overlays on maps, animate marker showing tooltip.
  7. Customizing all the map elements using javascript.

How To Use Leaflet.js:

For use Leaflet.js . It has to include Leaflet.js (CSS and Js) which is available on https://leafletjs.com/examples/quick-start so include a library.

Mapping Text

Mapping Image

In setView, It contains two parameter LatLng(first is latitude, second is longitude). So Above Value shows the LatLng of New Delhi.Zoom level.

TileLayer contains the URL of the map-tile in which the Map is shown. and the parameter json block use for Setting its property.

For Google Maps:-

L.tileLayer(‘http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}’,{maxzoom: 18,subdomains: [‘mt0’, ‘mt1’, ‘mt2’, ‘mt3’],}).addTo(map);
L.tileLayer(‘http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}’,{maxzoom: 18,subdomains: [‘mt0’, ‘mt1’, ‘mt2’, ‘mt3’],}).addTo(map);

Adding markers and vector layer on the map.


Here is a basic overview of how to use a leaflet and its elements.it is pretty easy .just put elements and then add them to view.


1. Lightweight. only weighting 39KB.
2. Fast performance.
3. Easy to implement.
4. Open source and freely available
5. Easy to change map (as only the URL of tile layer should be changed).
6. Powerful API, and plugins
7. Easy customization.
8. Support on multiple js frameworks.


1. The developer should be familiar with javascript.
2. In some base layers, it should cost(like Mapbox).
3. It needs to use GIS programming for setting up information.
4. customization takes more effort on elements sometimes.

Create Mobile Responsive Web map Application Using Leaflet.js Read More »