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 .

Batch Geocode Service With TM ONE SmartMap & Visualize In QGIS
TM ONE SmartMap API as the geocoder to batch geocode and visualize in QGIS the data results.

Plan Your Itinerary with Trip Planner by TM One SmartMap
Plan your trip efficiently with Trip Planner by TM One SmartMap. Besides places to visit, our planne...

Evaluating Your Site Performance with TM One SmartMap
TM SmartMap Site Performance helps grow your business by ranking your physical outlets based on 3 cr...

Blogs >