How to use OpenStreetMap on JEA

[Enr62]

Hi, instead of the maps of the various properties automatically generated by Google Map, I would like to use the OpenStreetMap maps, but if there are no API Keys (as with Google Map) to insert into JEA, how should I proceed?
Thanks for your help!

[ilhooq]

Hi @Enr62 ,

First of all, you have to understand the template override in Joomla,

Then, make an override of components/com_jea/views/property/tmpl/default.php in your template and edit the file default.php.

Place this code where you want to see the map :

<?php echo $this->loadTemplate('leaflet') ?>

Then, create a new file default_leaflet.php at the same level with this code :

defined('_JEXEC') or die;

$latitude  = floatval($this->row->latitude);
$longitude = floatval($this->row->longitude);

if (empty($latitude) || empty($longitude)) return;

$this->document->addScript('https://unpkg.com/[email protected]/dist/leaflet.js');
$this->document->addStyleSheet('https://unpkg.com/[email protected]/dist/leaflet.css');

$title = addslashes($this->row->title);

$script = <<<EOD
jQuery(function() {

    var map = L.map('jea_property_map').setView([$latitude, $longitude], 16);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    L.marker([$latitude, $longitude]).addTo(map)
        .bindPopup('{$this->row->ref} - {$title}')
        .openPopup();
});

EOD;

$this->document->addScriptDeclaration($script);
?>

<div id="jea_property_map"></div>

[simonevio]

Hello Ilhooq, thanks for your help, I used this code to get openstreet map in property view.
It's possible to use Openstreet Map also in geolocalized search layout? I think I need a different code.
Thanks!