Yatmo logo

Plugins documentation


Introduction

Yatmo plugins have been designed for real estate websites: our company can provide a map with the most important points of interest for this sector and a summary of the nearest places with the travel distance + duration.

If you need more customization and you don't want to use our plugins, Yatmo is a REST API with a documentation available here (depending on the country):
https://be.yatmo.com/swagger
https://fr.yatmo.com/swagger
https://nl.yatmo.com/swagger
https://lu.yatmo.com/swagger
https://de.yatmo.com/swagger
https://ch.yatmo.com/swagger
https://es.yatmo.com/swagger
https://it.yatmo.com/swagger
https://pt.yatmo.com/swagger
https://ie.yatmo.com/swagger
(A license key is needed to test it)

How to get a license #back to top

For Belgian market, you can contact our exclusive reseller Immovlan and for the Luxembourg market, you can contact our exclusive reseller Immotop.
For other markets, you can take a subscription on our website or you can contact us at info yatmo . com (without spaces).

Map plugin #back to top


Hello world - #back to top

<script type="text/javascript">
    yatmoConfig = {
        licenseKey: 'xxxxxxxxxxxxxxxxxx',
        language: 'EN',
        country: 'BE',
        container: 'map',
        center: [4.3442926,50.8510525],
        zoom: 16,
		routeFrom: {
			latitude: 50.8510525,
			longitude: 4.3442926
		},
        mapStyle: 1,
        fullScreenButton: true,
        userAddresses: {
            userId: 'userId',
            startingLatitude: 50.8520525,
            startingLongitude: 4.3442926
        },
        isochrone: {
		    latitude: 50.8510525,
			longitude: 4.3442926
		}
    };
	    
    function LoadMap(map){
        var marker = new mapboxgl.Marker({ color: 'red' }).setLngLat(map.getCenter()).addTo(map);
    }
</script>
<script type="text/javascript" src ="https://map.yatmo.com/script.js" ></script>

Important points #back to top

Our map is based on Mapbox GL JS (current version: v1.11.0) but we host our own map tiles: that means we are not using the data from MapBox but you can customize our map (drawing a circle, etc.) thanks to their documentation if needed. You can't modify everything: for example, you need to keep our map style if you want to use our map tiles.

Your own CSS rules can have an impact on our map, especially the "info window" when you click on a pin point:
Pin map example
It is possible you have to play a little bit with your own CSS to fix potential side effects if it's not looking good.

If you want to show these information in a different way (your own pin icons, using your own map with our points of interest, etc.): do not hesitate to contact us to discuss how to directly use our API instead of our plugin.

You have to name the object "yatmoConfig" exactly like that and same for the function "loadMap": our plugin expects to find them.

JSON required parameters:

Property name Value
licenseKey Your licenseKey (see "How to get a license" if you don't have yet a valid license key for Yatmo)
language Language ISO code (see "Countries & Languages"): used to translate the interface (mouse over on POI icon) or the title of the info window when you click on a pin map.
country Country ISO code (see "Countries & Languages")
container Id of the DIV where you want your map. Example:
<div id="map"></div>
center Array with 2 decimal numbers: [longitude, latitude]
zoom Integer between 1 and 24


Optional parameters:

Property name Value
routeFrom Object with 2 properties (latitude and longitude): if you want to enable our route module to show the travel times to POIs or calculate a route + travel time to an address.
mapStyle Integer value corresponding to "style xxx" in the dropdown next to the map sample in this page (by default, the map is using style 1).
fullScreenButton Boolean value (true by default) to add a button to offer a full screen mode.
useSmallButtons Boolean value (false by default) to hide the labels in the categories filters buttons.
userAddresses Object with 3 properties: "userId" to set an unique user ID to let your own users to save their favorite addresses easily + starting latitude/longitude (corresponds to the location of the property or the center of a circle)
isochrone Object with 2 properties: starting latitude/longitude (corresponds to the location of the property or the center of a circle) to calculate the center of the isochrones.

Map in IFRAME #back to top

Same map than with the plugin but in an iframe (no need to use JavaScript, as easy to add as the Youtube embedded code: you can easily put the iframe line in your blog, etc.).
You have less customization possibilities but it's the quickest to integrate for simple scenarios.


Hello world - #back to top

<iframe
height="500"
width="500"
src ="https://map.yatmo.com/iframe.html?licenseKey=xxxxxxxxxxxxxxxxxx&language=EN&country=BE&longitude=4.3135979&latitude=50.8346645&routeFromLongitude=4.3135979&routeFromLatitude=50.8346645&zoom=16"
frameborder="0"
allowfullscreen>
</iframe>

Required parameters #back to top

Other iframe attributes depend on your website integration (size of the iframe, etc.)

Attribute name Value
licenseKey Your licenseKey (see "How to get a license" if you don't have yet a valid license key for Yatmo)
language Language ISO code (see "Countries & Languages"): used to translate the interface (mouse over on POI icon) or the title of the info window when you click on a pin map.
country Country ISO code (see "Countries & Languages")
latitude The latitude value of your real estate property
longitude The longitude value of your real estate property
routeFromLatitude + routeFromLongitude With these 2 parameters, you will enable our route module to show the travel times to POIs or calculate a route + travel time to an address.
zoom Integer between 1 and 24

Summary plugin #back to top


Hello world - #back to top

<script type="text/javascript">
    yatmoSummaryConfig = {
        licenseKey: 'xxxxxxxxxxxxxxxxxx',
        language: 'EN',
        country: 'BE',
        container: 'summary',
        latitude: 50.8520525,
        longitude: 4.3442926
    };
    </script>
    <script type="text/javascript" src="https://map.yatmo.com/summary.js"></script>

Important points #back to top

The first call can be slow: if it is the first time we receive a request for a latitude/longitude pair, we need to calculate the distance between the real estate property and the nearest points of interest. For all the next calls, the performance will be very good!

Your own CSS rules can have an impact on our summary.
It is possible you have to play a little bit with your own CSS to fix potential side effects if it's not looking good.

Our plugin is supposed to be responsive: according to your website, you may have to do some small fixes.

If you want to show these information in a different way (your own icons, in a different design than a table, etc.): do not hesitate to contact us to discuss how to directly use our API instead of our plugin.

You have to name the object "yatmoSummaryConfig" exactly like that: our plugin expects to find it.

JSON required parameters:

Property name Value
licenseKey Your licenseKey (see "How to get a license" if you don't have yet a valid license key for Yatmo)
language Language ISO code (see "Countries & Languages"): used to translated the tooltips visible when your mouse is over an icon or a distance label.
country Country ISO code (see "Countries & Languages")
container Id of the DIV where you want your summary. Example:
<div id="summary"></div>
latitude The latitude value of your real estate property
longitude The longitude value of your real estate property

Summary as text plugin #back to top

Example:


Hello world - #back to top

<script type="text/javascript">
    yatmoSummaryTextConfig = {
        licenseKey: 'xxxxxxxxxxxxxxxxxx',
        language: 'EN',
        country: 'BE',
        latitude: 50.833816,
		longitude: 4.3043771,
        beginStrongTag: '<strong>',
        endStrongTag: '</strong>'
    };

    function addSummaryTextWithTitles(paragraphs, titles, alternativeTitlesStreet, alternativeTitlesCity, titlesIcons){
        paragraphs.forEach((paragraph, index) => {
            if (titles.length > 0){
                var titleToUse = '';
                switch(index){ // We expose 3 arrays for titles
                case 0:
                    // This one contains the title with the city name inside (so it's nice to use it for the first paragraph)
                    // (If undefined, just use the normal title because the precise location couldn't be detected)
                    if(alternativeTitlesCity[index] == undefined) {
                        titleToUse = titles[index];
                    }
                    else {
                        titleToUse = alternativeTitlesCity[index];
                    }
                    break;
                case 1:
                    // This one contains the street name if we can detect it (so it's nice to use it for the second paragraph if the address is not private of course...)
                    // (If undefined, just use the normal title because the precise location couldn't be detected)
                    if(alternativeTitlesStreet[index] == undefined) {
                        titleToUse = titles[index];
                    }
                    else {
                        titleToUse = alternativeTitlesStreet[index];
                    }
                    break;
                default:
                    titleToUse = titles[index]; // "Default" title (without additional information)
                    break;
                }

                var faIcon = '';
                switch(titlesIcons[index]){ // Here we used Font Awesome icons for the demo, it's just a option ==> thanks to the array "titlesIcons", you can know which icon you can associate to a title (these keys won't change)
                    case 'education':
                        faIcon = 'fa-graduation-cap';
                        break;
                    case 'shopping':
                        faIcon = 'fa-shopping-basket';
                        break;
                    case 'transports':
                        faIcon = 'fa-car';
                        break;
                    case 'publictransports':
                        faIcon = 'fa-bus';
                        break;
                    case 'cities':
                        faIcon = 'fa-city';
                        break;
                }
			
                $('#summaryTextSample').append('<h3><i class="fa ' + faIcon + '" aria-hidden="true"></i> ' + titleToUse + '</h3>');
            }
				                
            $('#summaryTextSample').append('<p>' + paragraph + '</p>');
        });
    }
    </script>
    <script type="text/javascript" src="https://map.yatmo.com/summary-text.js"></script>

Important points #back to top

The first call can be slow: if it is the first time we receive a request for a latitude/longitude pair, we need to calculate the distance between the real estate property and the nearest points of interest. For all the next calls, the performance will be very good!

You just have to give the needed parameters and implement the function "addSummaryTextWithTitles" to add the different paragraphs where you want in your page (everything is already translated in the given language in the settings).

You have to name the object "yatmoSummaryTextConfig" exactly like that: our plugin expects to find it and same for the function "addSummaryTextWithTitles".

JSON required parameters:

Property name Value
licenseKey Your licenseKey (see "How to get a license" if you don't have yet a valid license key for Yatmo)
language Language ISO code (see "Countries & Languages"): used to translated the tooltips visible when your mouse is over an icon or a distance label.
country Country ISO code (see "Countries & Languages")
latitude The latitude value of your real estate property
longitude The longitude value of your real estate property

Countries & Languages #back to top

These countries with their corresponding languages are currently supported:

Country Supported languages
BE EN, FR, NL
FR EN, FR
NL EN, NL
LU EN, DE, FR, PT
CH EN, DE, FR, IT
DE EN, DE
IT EN, IT
ES EN, ES, CA
PT EN, PT