Embedding Tracker Map in my Website

Hi Ruben, did you get your embedded view in Wordpress working? if so, would you share how you did that?

Hi,

Yes, i have!
What is your setup and what have you already done?
You first to configure Traccar to work with https

Hey Ruben, Thanks for the reply.
Oh, okay i havent got a https set up, i'll look in to doing that.

What i do have is an instance of Traccar server (v5.6) running locally (on prem) on a raspberry pi.
And have set up view only user, with as many restrictions as i can configure through the GUI, which i can access using the token for authentication.

Hi! Can someone share how did you connect traccar with wordpress?

Hi,

sorry for not answering, very busy.
You need to run traccar on HTTPS, because it isn't allowed in browser to load a HTTP page in an iframe when your website is on HTTPS.

These are all the commands installing the last time on my raspberry Pi 3

sudo mkdir /opt/traccar && cd /opt/traccar
sudo wget https://github.com/traccar/traccar/releases/download/v5.6/traccar-linux-arm-5.6.zip
sudo unzip traccar-linux-arm-5.6.zip
sudo rm -f traccar-linux-arm-5.6.zip
sudo ./traccar.run


sudo apt-get install ssl-cert apache2
sudo a2enmod ssl proxy_http proxy_wstunnel rewrite
sudo service apache2 restart

sudo nano /etc/apache2/sites-available/traccar.conf

replace the Content for the site configuration (replace demo.traccar.org with your domain):

<VirtualHost *:80>
  ServerName demo.traccar.org
  Redirect / https://demo.traccar.org/
</VirtualHost>
<IfModule mod_ssl.c>
        <VirtualHost _default_:443>

                ServerName demo.traccar.org
                ServerAdmin webmaster@localhost

         Header add Access-Control-Allow-Origin "*"
            Header edit Set-Cookie ^(.*)$ $1;HttpOnly;Secure;SameSite=None

                DocumentRoot /var/www/html

                ProxyPass /api/socket ws://localhost:8082/api/socket
                ProxyPassReverse /api/socket ws://localhost:8082/api/socket

                ProxyPass / http://localhost:8082/
                ProxyPassReverse / http://localhost:8082/

                SSLEngine on
                SSLCertificateFile /etc/ssl/certs/ssl-cert-snakeoil.pem
                SSLCertificateKeyFile /etc/ssl/private/ssl-cert-snakeoil.key

        </VirtualHost>
</IfModule>

Next, disable the default site and enable the newly added configuration:

sudo a2dissite 000-default
sudo a2ensite traccar
sudo a2enmod headers
sudo service apache2 restart
sudo service apache2 restart

//Set your firewall port 80 to the Raspberry
sudo apt install certbot python3-certbot-apache
sudo certbot --apache

Then use an iframe to show it on a page on WP

<iframe width="100%" height="500px" src="https://domain.com/?token=XXXXX"></iframe>

This should work!

Tnx Ruben! It does work with iframe now :)
Did You try with API to fetch specific data - I am trying to change overall visual look.

Hi Ivy,

glad it is working now. Took me a lot of research to make it work.
I didn't try to work with the API, i would like to let it zoom on the live location. Do not have time to make that work for now.