manifest / unclassified / rewind-3d-route-map-for-elementor

Rewind 3D Route Map for Elementor

Cinematic tilted 3D map with an animated route, info card and fly-in. Works out of the box with free OpenFreeMap tiles, or with your Mapbox account. Elementor widget plus shortcode.

by jakirulislambd19 · github.com/jakirmithunbd/rewind-3d-route-map-for-elementor · website

★ 0stars

0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/jakirmithunbd/rewind-3d-route-map-for-elementor/archive/refs/heads/main.zip

Readme github.com/jakirmithunbd/rewind-3d-route-map-for-elementor ↗

Cinematic tilted 3D map with an animated route, info card and fly-in. Works out of the box with free OpenFreeMap tiles, or with your Mapbox account.

Description

Rewind 3D Route Map turns the flat map on your contact page into a tilted, three-dimensional scene: building volumes, a soft sky, and a route that draws itself from the motorway exit to your front door while the camera follows. An info card with your address and a “Plan your route” button floats over the map. It is the premium-agency map, without writing a line of code.

Out of the box it uses MapLibre GL JS (bundled, open source) with free OpenFreeMap tiles: no account, no API key, no usage limits. Switch the engine to Mapbox if you want its “Standard” style with modelled trees and landmarks.

Key features

Animated route – add the points of a drive to your door; the line draws itself, a glowing marker travels along it and the camera follows, then lands on the building
Info card overlay – small label, title, address with pin icon, description and a directions button, positioned left or right, bottom on phones
Landmark labels – “Next to the Ramada Hotel” pills that fade in along the way
Note pill – e.g. “Example route from the motorway”
3D buildings and sky – extruded buildings in your own colour and a soft horizon haze on MapLibre; Mapbox Standard’s 3D and trees on Mapbox
Markers – pulsing accent dot, classic pin, or your logo, with an optional popup
Fly-in without a route – glides from a wide start view to the final tilted view
Slow drift after arrival: gentle rotation with a very slow zoom and tilt
Fallback card – if the map cannot load (old browser, blocked scripts, tile outage) visitors see the address, a Google Maps button and “Try again”, never an empty box
Interaction controls – decorative (never captures page scroll) or interactive with zoom, compass and fullscreen buttons
Style tab – height per device, border radius, border, shadow, accent colour, card and note styling, fades
Seven Mapbox styles and three OpenFreeMap styles, or a custom style URL
Lazy loading – the map is created only when it is about to become visible
Shortcode – [rewind_3d_map] for use outside Elementor
Accessible – keyboard-operable marker when a popup is enabled, reduced-motion preference respected, labelled map region

Requirements

WordPress 6.5 or later
PHP 7.4 or later
Elementor 3.5 or later (free version is enough)
Optional: a free Mapbox account and public access token, only for the Mapbox engine

Elementor is declared through the Requires Plugins header, so WordPress will not activate this plugin until Elementor is installed and active.

External services

Nothing is loaded and no data is sent until a visitor scrolls a map into view. Depending on the engine chosen by the site owner, the visitor’s browser then connects to one of the following services.

OpenFreeMap (default engine)

Map styles, fonts and vector tiles are requested from tiles.openfreemap.org. OpenFreeMap is a free, open project serving OpenStreetMap data; no account or key is needed. Requests contain the map area being viewed, the visitor’s IP address and browser user agent, as with any web request. The plugin does not send anything else.

Project: https://openfreemap.org/
Map data: © OpenStreetMap contributors, https://www.openstreetmap.org/copyright

The MapLibre GL JS rendering library (BSD-3-Clause) is bundled with the plugin; no code is loaded from a CDN.

Mapbox (optional engine)

When the Mapbox engine is selected, the browser loads the Mapbox GL JS library and stylesheet from api.mapbox.com and requests styles, tiles, fonts and 3D model data from api.mapbox.com and events.mapbox.com. These requests include the site’s Mapbox access token, the map area being viewed, and the visitor’s IP address and user agent. Mapbox uses this to serve the map and meter usage against the site owner’s account.

Mapbox GL JS is licensed by Mapbox under its own terms and is therefore not bundled; it is loaded from Mapbox as part of the service, like the Google Maps JavaScript API is loaded from Google. Developers who prefer to self-host it can use the rw3dm_mapbox_gl_js_url and rw3dm_mapbox_gl_css_url filters.

Google Maps (on click only)

The “Plan your route”, “Get directions” and fallback buttons open Google Maps directions in a new tab. No request to Google is made until the visitor clicks.

The plugin itself does not collect, store or transmit any visitor data to the plugin author or anyone else. Site owners in the EU should mention the chosen map provider in their privacy policy. Because the map loads only when scrolled into view, it can also be placed behind a consent gate by any cookie-consent plugin that blocks scripts by handle (rw3dm-maplibre-gl or rw3dm-mapbox-gl).

Installation

Install and activate Elementor if you have not already.
Upload the plugin folder to /wp-content/plugins/ or install it from the Plugins screen, then activate it.
Go to Settings → 3D Map, enter your default address and coordinates, and save. The free MapLibre engine is selected by default; nothing else is needed.
Edit a page with Elementor, search the widget panel for 3D Map, and drop it into a full-width container.
Optional: enable Info Card and Route Line in the widget for the full animated experience.

Frequently Asked Questions

Is it really free?

Yes. The default engine uses OpenFreeMap, which is free for any amount of traffic and needs no account. Mapbox is optional and includes 50,000 free map loads per month.

How do I get the route points?

Open https://geojson.io, draw a line from the motorway exit to your building, and copy the coordinate pairs into the Route Line repeater in the same order. Latitude first, then longitude. Or right-click points one by one in Google Maps.

How do I find my coordinates?

Open Google Maps, right-click your building and click the numbers that appear. Google shows latitude first, then longitude.

Can I match my brand colours?

Set the accent colour in the Style tab; it drives the pulsing dot, the travelling marker, the card label and the button. The route line and glow colours are in the Route Line section. Building colour is under Map Options → Scene.

The map area is empty.

With the MapLibre engine this should not happen; the fallback card appears within ten seconds if tiles cannot load. With the Mapbox engine, check that a token is saved under Settings → 3D Map and that its URL restrictions include your domain.

Can I use it without Elementor?

The widget needs Elementor, but the shortcode works anywhere:

[rewind_3d_map lat="52.33" lng="4.77" address="Sloterweg 303, Badhoevedorp" card="yes" card_title="You will find us here" route="yes" route_points="52.3315,4.7665;52.3345,4.7605;52.3331,4.7695" height="560px" radius="32px"]

Every widget option has a matching attribute (same names as in the widget). Route points are lat,lng pairs separated by semicolons; landmark labels use labels="Text|lat|lng|0.55;…".

Does it work with page caching?

Yes. The output is plain HTML plus a JSON configuration; the map is created in the visitor’s browser.