Plot ATM locations on a map and embed on your website

Consider that you are an engineer working for the technical support team in a bank. And you were asked to host a web map of the ATM locations under your branch. This same map should be later available to dynamically visualize the transactions associated with each ATM in a quantitative representation. In this article, you will learn how to plot atm/shop locations on map and embed it on your website.

There are limited GIS software and online tools where you can do this job. Most of them are limited to any single service, ie., either creating a map or hosting the map on a website, but IGISMap allows you to do both. IGISMap is a GIS based web platform providing multiple GIS applications that are most important in the field of geospatial analytics. The peculiarity of IGISMAP in the GIS Industry is its UI/UX which helps the user to perform effortless geospatial operations. GIS tools of IGISMAP allow you to Add Your Data, Create Your Data, Map Your Data, Style Your Data, Process Your Data, and Analyze Your Data, and additionally, it helps you to share your Data privately or publicly.

How to Plot ATM/shop locations on map

Create Point Data tool of IGISMap is a powerful GIS tool to plot point vector data to represent locations and point objects with single latitude and longitude values. Using Create Point Data tool, we can create an interactive map of ATM locations like the following.

Map of ATM Locations
Map of ATM Locations

Lets walk through each step of the Create Point Data tool to create a map like this and share with your team.

  • First, you need to log in to IGISMap from https://map.igismap.com/. If you haven’t signed up for IGISMap, click the Sign Up button to create an IGISMap account.
  • After Logging In, you will be directed to the dashboard of your IGISMap account.
  • From the dashboard, click on the Create Point Data tab to open the tool as shown below.
plot the atm/shop location on map
Create Point Data tool

Add Name and Attribute Fields for Your GIS Data

In this section, add the name of the data as ‘ATM Locations’ and add attribute fields to store more information about the locations we plot. Let’s add ‘id’ and ‘street’ as the attribute fields in the data table.

For the street field, let’s give ‘Null’ as the default value, thus every time an ATM location is plotted and if the street information is not added in the field ‘Street’ for that point, ‘Null’ will be saved for that point location.

Create Point Data - Add Data Information - plot the atm/shop location on map
Add Data Information

Start Plotting Points for the ATM Locations

After saving the data information, Add Points step will open, where we can start plotting the ATM locations as points, in the form of pins. IGISMap provides you with three features for plotting points: Drop Points, Search Address, and Lat Lon Values.

  • Let’s select the Drop Points option and zoom to the location with the desired ATM Machine to plot a pin in that specific location on the map
Create Point Data - Add Points - Drop Points - plot the atm/shop location on map
Add Points – Drop Points
  • Search Address option opens a search address box, where you can enter an address and choose the right option from the dropdown list, then click the Plot button to plot a point on that location.
Create Point Data - Add Points - Search Address - plot the atm/shop location on map
Add Points – Search Address
  • Lat Lon Values will open two boxes to enter latitude and longitude values of the location you want to plot, Plot Location button in this option will plot a pin at the location you have entered.
Create Point Data - Add Points - Lat Lon Values - plot the atm/shop location on map
Add Points – Lat Lon Values

Also, a popup will open for entering attribute values in each attribute field for that atm location when a point is plotting. Click the Submit button to Submit the save the attribute entries. You can choose to delete the point you plotted by clicking the Delete Point button. Or Else you can close to click Skip to close the popup. You can disable the default opening of this popup using the toggle button.

Create Point Data - Add Points - Enable/Disable Popup

But we can open this popup anytime while plotting, by simply clicking on an existing pin.

After plotting every desired ATM location for our data, click the Save and Publish button to publish your data in the map.

Review and Edit the Datatable of the ATM Location Data

After the atm location is published, Show/Edit data table section will be open. Here you can edit the attribute values entered for each point location after clicking the button in the data table along each row in the data table. You can also choose to delete a point by clickingbutton.

Create Point Data - Show/Edit Datatable - plot the atm/shop location on map
Datatable

Options to edit or delete the attribute fields are also available in this step along with the option to add new attribute fields to this data. If you thought of adding more points to the data of ATM Locations, select the Back button to go to the Add Points section, where you can add more points and make changes to the already published data.

Option to update the data table as bulk is available in this section. Where the whole data table can be downloaded in Excel format using Download Datatable button. And to make the changes outside IGISMap, then upload the edited/updated spreadsheet file using Upload Datatable button and integrate with the same point data of ATM locations. 

After making all the changes in the datatable, let’s move to the styling section by clicking the Next button.

Style Your ATM Location Points

A map will become more meaningful if appropriate icons and colors are used to visualize the features of the map. In IGISMap styling options, Bubble Style and Icon Style are provided for point GIS data. 

In Icon Styling, IGISMap provides two more options – Basic and Category styling. For now, let’s make it simple by providing an appropriate pin icon for styling the ATM location points. And apply it on the ATM Locations data as follows.

Create Point Data - Edit Style - plot the atm/shop location on map
Edit Style

Embed Your ATM Locations Map in a Website

As the data is created completely and styled appropriately, let’s embed the map of ATM Locations in a website. For this, click the button at the top right, where you will reach the UI to control the sharing of this map.

Share Map - plot the atm/shop location on map
Share Map

Once the components are enabled and disabled as desired. After that click the Next button to proceed to the step of copying the iframe link to embed in a website.

Share Map - Embed Map
Share Map – Embed Map
Link to Embed Map - plot the atm/shop location on map
Link to Embed Map

Copy the HTML code link and embed it on your website. Thus the map will be available as interactive as below.

Afterward merge the data table of the ATM Locations with the transaction data of each ATMs. Furthermore, for quantitative visualization, we can use Bubble Style. The style will apply automatically to your website. So with the following steps, you can plot atm/shop locations on a map and embed them on your website.

Check our article on Bubble Style

Create Charts with Map

How to Share Map Publicly

For free Gis Data visit

Create a Map