Sorry, you need to enable JavaScript to visit this website.

My company location

Overview

In this tutorial you will learn how to add a TomTom map with a marker to your website. You can display your company location and show your clients where they can find you. You can add the address and image to the marker in order to make it more personalized.

Prerequisites

To start using the TomTom Maps SDK for Web, you need the following:

  • An SDK that can be downloaded from here: Downloads. Unzip it and save it in a folder. This tutorial assumes your folder is named ‘sdk’. If you choose another name, remember to change the provided paths to match.

    Check out the current file structure

    .
    └── sdk-tutorial
        └── sdk
            ├── LICENSE.txt
            ├── README.md
            ├── glyphs
            ├── images
            ├── map.css
            ├── mapbox-gl-js
            ├── sprites
            ├── styles
            ├── tomtom.min.js
            └── tomtom.min.js.map
        
  • API key

    Create your API key now

    To create a new API key you need to first register on the portal. Once you are logged in there are only two steps remaining:

    Create a new application in your Dashboard:

    Choose all the APIs:

    All set up. You can now click on your newly created app and copy your API key:

  • Coordinates

    How to find your company location coordinates?

    The simplest way for obtaining these coordinates is to go to api_explorer. First, click on Fuzzy Search and then on a Try it out button. Let's assume your company address is: '100 Century Center Ct 210, San Jose, CA 95112, USA'. You have to place it in a query field and clear other pre-populated fields, then scroll down and press the Execute button. Please take into account that you should not use special HTML characters (like '$','?',&','#') in address. In the response you can find section and there you can see that the very first item from the list of items matched your query. Look at the property below address fields. There you can see the data you need:

        <position>
        <lat>37.36729</lat>
        <lon>-121.91595</lon>
        </position>

Displaying a map

Below is a minimal HTML structure containing the JS code to initialize and display a TomTom map:

<!DOCTYPE html> 
<html> 
	<head> 
	<title>My map</title> 
        <link rel='stylesheet' type='text/css' href='sdk/map.css'/> 
        <script src='sdk/tomtom.min.js'></script> 
        <style>
          #map {
              height: 500px;
              width: 500px;
          }
        </style>
    </head> 
    <body> 
        <div id='map'></div> 
        <script> 
            var map = tomtom.L.map('map', {
                key: '<your-api-key>',
                basePath: '<your-tomtom-sdk-base-path>',
            });
        </script> 
    </body>
</html>

To run this example locally, create index.html file next to sdk folder. Then you can just copy the code above and paste it to the file you have just created. Replace ‘<your-api-key>‘ with the key you got before (in Prerequisites section). Replace ‘<your-tomtom-sdk-base-path>‘ with ‘<sdk>‘.

Then run index.html in your browser. Now you should see a map.

Displaying the company on the map

Now, let's place your company on the map.
Define a variable and set your company's coordinates (lat/lon) in an array:

    var speedyPizzaCoordinates = [37.36729, -121.91595]; 

Now add coordinates to the map initialization to focus it on your company:

    var map = tomtom.L.map('map', {
        key: '<your-api-key>',
        basePath: '<your-tomtom-sdk-base-path>',
        center: speedyPizzaCoordinates,
        zoom: 15
    });

Create a marker variable and add it to the map:

   var marker = tomtom.L.marker(speedyPizzaCoordinates).addTo(map);

Define a pop-up connected with your marker. Additionally let's make it open/visible to the user:

   marker.bindPopup('your company name, your company address').openPopup();

Now you should see the map with your company name and address in the pop-up. To separate first line from the second line, use a <br/> tag. You can also bold your company name to make the whole pop-up more clear:

   marker.bindPopup("<b>Speedy's pizza</b><br/>100 Century Center Ct 210, San Jose, CA 95112, USA");

Now you have your company location on the map!

See the result:

Customization

Optionally, you can do some more customization to make it look better. You used a default marker so far. Let's assume that you want to have a custom marker icon on the map for a pizza restaurant. First, create an img folder in your project, next to the sdk directory. Then, add the image you want to use as the marker to this folder. Here you can find custom marker used for this tutorial: pizza marker. Now you can go back to index.html. Before you defined marker in this way:

   var marker = tomtom.L.marker(speedyPizzaCoordinates).addTo(map);

Now, you need to set icon properties. In the marker definition add an icon with a path to your image and it's size. Assuming that your image is named 'pizza_marker.png', your new code will look like this:

    var marker = tomtom.L.marker(speedyPizzaCoordinates, {
	     icon: tomtom.L.icon({
	          iconUrl: 'img/pizza_marker.png',
             iconSize: [50, 75]
	      })
    }).addTo(map);

If you run your map now, you should see that your marker uses your image instead of default one. Depending on your image you may want icon placed centrally on the location or you may want to have it shifted so it will point at your company. Same applies to the pop-up - you may want to move it a bit up if you don't want to cover your company logo. If you want to solve these issues you should add iconAnchor and popupAnchor properties.

iconAnchor - the coordinates of the tip of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.

popupAnchor - the coordinates of the point from which pop-ups will open, relative to the icon anchor. TomTom Maps SDK for Web is based on Leaflet. You can read more about Icon type on Leaflet documentation.

    var marker = tomtom.L.marker(speedyPizzaCoordinates, {
	     icon: tomtom.L.icon({
	          iconUrl: 'img/pizza_marker.png',
             iconSize: [50, 75],
             iconAnchor: [17, 70],
             popupAnchor: [12, -80]
	      })
    }).addTo(map);

Now you need to add some content to your pop-up. Right now it looks like this:

    marker.bindPopup('your company name, your company address').openPopup();

Let's start by adding an image to your pop-up, so the customer can see your company's logo/photo. Add the image you want to use to the img folder, which is located next to sdk folder (the same way you did with the marker image before). Let's assume that you want to see in your pop-up:

  • your company's name
  • advertising text below it
  • your company's address
  • the image aligned to the right side

See the code below:

var customPopup = '<p style="display:inline">' +
    '<img src="img/pizza_oven_illustration.png"' +
    'alt="pizza oven" style="width:50%;float:right;padding-top:10px">' +
    '<div style="width:50%; height:100%; padding-top:10px">' +
    '<span style="font-size:18px">Speedy&#39s pizza</span></br>' +
    '<div><span style="color:grey">' +
    'In 30 minutes at your place!</span></div><br/>' +
    '<span>100 Century Center Ct 210, San Jose, CA 95112</br>USA</span></br>' +
    '</p>'

marker.bindPopup(customPopup).addTo(map).openPopup();

See the result!

As you can see, you can put all html code and styling to customPopup variable. Feel free to change the code and experiment a bit, until you achieve the appearance you like the most! Now you need to add the map to your website. Here you can find example how your map can be embedded on your page: GitHub.

You can find all the source code here: on GitHub.

Summary

In this tutorial you've learned:

  • how to put your company location on the map
  • how to make default marker and customized marker and put it on the map
  • how to make default pop-up and customized pop-up with text and image and add it to the map
  • how to embed the map and put it to your page