Build Malaysia Map Store Locator using TM ONE SmartMap

Blogs >

Build Malaysia Map Store Locator using TM ONE SmartMap

7 March 2022

Nowadays store locator on map is important for your visitors to easily locate or go to your store, office, or outlets. Knowing these needs, TM ONE offers SmartMap store locator where you can easily embed it into your website.

Store locator on map has been popularized thanks to Google Map.

How To Build Store Locator using SmartMap Portal

To use SmartMap you must first do a simple registration to get you API Key. After the registration you can include the JavaScript below into your website.

<!DOCTYPE html>
<html lang="en">  
  <head>  
    <meta charset="UTF-8" />  
    <title>TM One Leaflet Map Example</title>  
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"  
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>  
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"  
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>  
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"  
      integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"/>  
        
    <style>  
        #mapid {  
          height: 400px;  
          width: 600px;  
          position: absolute;  
          z-index: -1;  
        }  
      </style>  
  </head>  
  
  <body>  
    <div id="mapid"></div>  
    <script type="text/javascript">  

    const myMap = L.map('mapid', {  
    zoom: 12,  
    center: [3.11617494, 101.66576184],  
    });  
    myMap.attributionControl.setPrefix('TM SmartMap © 2021 Telekom Malaysia')  

    L.tileLayer('https://www.smartmap.tm.com.my/api/map/wmts?api_key={api_key}&request={request}&layer={layer}&format={format}&TILEMATRIXSET={TILEMATRIXSET}&TILEMATRIX={TILEMATRIXSET}:{z}&TILEROW={y}&TILECOL={x}',  
    {  
    api_key: "YOUR_API_KEY",  
    request: "GetTile",  
    layer: "Malaysia:TMOneSmartMap",  
    format: "image/png",  
    TILEMATRIXSET: "EPSG:3857"  
    }).addTo(myMap);  

    L.marker([3.11617494, 101.66576184])  
        .addTo(myMap)  
        .bindPopup('<b>Menara TM</b><br />3.11617494, 101.66576184.')  
        .openPopup();  
  
    L.marker([3.13192804, 101.62997424])  
        .addTo(myMap)  
        .bindPopup('<b>Menara TM One</b><br />3.13192804, 101.62997424.')  
        
    </script>  
  </body>  
</html>

Customize Drop Pin Design

SmartMap allows you to change your drop pin icon design and colors. You also can add additional text to your drop pin.

More icons can be found at https://fontawesome.com/v4/icons/

To use the AwesomeMarkers, add the following line inside <head> section.

    <link rel="stylesheet" href="https://xguaita.github.io/mtig-js/libs/awesome-markers/leaflet.awesome-markers.css"/> 
        <script src="https://xguaita.github.io/mtig-js/libs/awesome-markers/leaflet.awesome-markers.min.js">
        </script> 
     L.marker([3.11617494, 101.66576184], { 
        icon: L.AwesomeMarkers.icon({ 
             icon: "coffee", 
             prefix: "fa", 
             markerColor: "red" 
        })
     }).addTo(myMap) 

     L.marker([3.13192804, 101.62997424], { 
        icon: L.AwesomeMarkers.icon({ 
             icon: "shopping-bag", 
             prefix: "fa", 
             markerColor: "blue"
        })
     }).addTo(myMap)

Besides, you can add text at the marker as below.

L.marker([3.11617494, 101.66576184])
     .addTo(myMap)
     .bindPopup('<b>Menara TM</b><br />3.11617494, 101.66576184.')
     .openPopup();

See how TM One website using SmartMap to show it TM ONE Office across Malaysia

Further Information:

You can refer to our documentation page for further information at https://www.smartmap.tm.com.my/docs/api/#/ or you may contact our friendly support team at helpmap@tm.com.my .

Satellite Imagery as A Measure to Update SmartMap
Smartmap compares three different algorithms for detecting change on the ground using satellite imag...

Find Mosque Near You with TM ONE Malaysia Map - SmartMap
Find nearest mosque to you by using TM ONE SmartMap Malaysia map.

Geocode Address at SmartMap Portal and Load It to GIS Software
Geocoding and reverse geocoding data from Smartmap API can be used in GIS software, and a basemap la...

Blogs >