Kolo Image Widget

If you need to present map with a precise location on your page there are few ways you can do that:

1. you have to add kolo-widget script to your page
2. kolo-image-widget

Kolo widget script

Kolo widget script will is a javascript code that needs to be added to your page. You should do it only once.

<script async src="https://beta.kolo.it/widget.js" charset="UTF-8"></script> 

Kolo image widget

If you add name="kolo-location" and data-kolo-link="[link_id]" to your image tag, like this:

<img name="kolo-location" data-kolo-link="560242338a2bc67bd7000002" src="..." class="..."></img>

Kolo location widget will be automatically added to the image:

1. you will see Kolo logo over image (signalizing it is kolo-image-widget and not just a simple image)
2. when you hover over image you’ll see the nearest address
3. if you click on the image you’ll see the location on a map
4. if you click on the map you’ll be redirected to Kolo with more details about particular link associated to that image.

Map is automatically adjusted to your image dimensions and position.

For example:

if you present your image on your page like this:

<img style="margin-left:25px;" class="img-responsive img-thumbnail" name="kolo-location" data-kolo-link="560242338a2bc67bd7000002" src="/assets/images/Croatia_Dubrovnik.jpg" width="500px">

Kolo location-map will adjust to it’s position and it’s dimensions:

You can adjust data-kolo-zoom and data-kolo-type too:

<img style="margin-left:25px;" class="img-responsive img-thumbnail" name="kolo-location" data-kolo-zoom="11" data-kolo-type="satellite" data-kolo-link="560242338a2bc67bd7000002" src="/assets/images/Croatia_Dubrovnik.jpg" width="500px">

And remember we are in “beta”, please comment and report any problems that you might experience while using our product.

Thank you

Kolo development team