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
(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.
For other markets, 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
    };
	    
    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

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
zoom 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