Embedding EV range display on your own website

Enhance your website by showcasing the range of electric vehicles (EVs) on a map — now available at no cost and with minimal effort!

How to setup iframe

<iframe id="rangeCalculator" src="https://evnavigation.com/embedded/rangev1_1.html?mapstyle=light&carid=36&deflat=48.864716&deflon=2.349014" allow="geolocation"/>

Result

Parameters

carid
id of the car in our database e.g. 451 (list of available car ids)
mapstyle (optional)
light or dark
deflat (optional)
default latitude
deflon (optional)
default longitude
fillclr (optional)
fill color of the UI elements
rangeouterclr (optional)
color of the outer range polygon
rangeinnerclr (optional)
color of the inner range polygon
temp (optional)
temperature value used by the range calculation
initLocation (optional)
switch to get the location at page load [0 or 1] (enabled by default)

Post-Load Features

carid
dynamically update the displayed car by sending a new car ID
document.getElementById('rangeCalculator').contentWindow.postMessage({ carid: newCarId }, '*');
temp
update the temperature value, which will reflect in the range calculations within the iframe
document.getElementById('rangeCalculator').contentWindow.postMessage({ temp: newTemp }, '*');
lat, lon
change the displayed location by sending latitude and longitude coordinates
document.getElementById('rangeCalculator').contentWindow.postMessage({ lat: newLat, lon: newLon }, '*');