Embedding Tracker Map in my Website
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.
Hi Ruben, did you get your embedded view in Wordpress working? if so, would you share how you did that?