How to add OpenStreetMap to elementor

OpenStreetMap for the free version of Elementor is a new widget that will allow you to create amazing interactive Maps without authentication or other API key.
It is a global mapping project that you can implement by following this tutorial.

Table of Contents

Activate the component OpenStreetMap

The plugin Elementor is installed and active.

The plugin EAC components is installed and active.

From the settings panel (EAC Advanced) you have to drag & drop the ‘OpenStreetMap‘ icon on the panel preview.

Define the location and center the map

By default the map is centerred on Paris.

By activating ‘Locate the visitor‘, the system will search for their location by their IP address but for mobiles, the location accuracy of the city is relative to the IP addresses distributed by the mobile operators
The title is automatically filled in with the information of the place.

The ‘Search an address‘ toggle displays a powerful search engine.
Enter an address in the corresponding field, format ‘street, city, country’ and press the ‘Search’ button.
If the system finds the coordinates of the place name it will display the latitude and longitude of the location in the appropriate fields and reload the widget.
You can then enter the title and content of the tooltip.

OSM map default
OSM map IP adresse

Add markers and tooltip content

In the Markers section, you can add more than one marker to Elementor OpenStreetMap Widget.
As for centering the map, you have the same search engine to display the marker at the address indicated.
Of course you can directly enter the coordinates in the corresponding fields.
In the second tab enter the title and content of the tooltip as well as the choice of the type of associated icon.

OSM marker adresse

Import a marker set from a file or url

First the data you want to import must be in the geoJSON format whether it originates from a file or a URL.
Example for France multiple secure sites can generate geoJSON compliant files: géoDatamine

Markers are automatically grouped into clusters relative to zoom level.

To import a set of markers you must first activate the toggle button ‘Import markers’ and select the origin of the source.

If the origin of the source is a file, it must be located in the directory ‘/includes/config/osm/markers and must have the extension ‘json‘ and select in the list ‘Select file’ the previously copied file.

If the source origin is a URL, the query result must be geoJSON compliant.

 

The ‘Keywords‘ field allows you to enhance the content of the tooltip of markers by associating the properties of the source and their labels as they will appear in the tooltip.
Use the pipe character ‘|’ to differentiate the property from its label and insert only one pair per line.

 

And to finish select the icon that will be associated with each marker.

Keywords for the the file ‘paris-cinemas.json’

com_nom|Town
name|Name
marque|Brands
cinema3d|3D
nb_screens|Number of screens
capacity|Capacity
wheelchair|Wheelchair
phone|Phone
website|Web site
OSM import markers

Edit list of tiles and overlays

To add/remove the list of tiles/overlays, you need to modify with a plain text editor the ‘osmTiles.json‘ file located in the ‘/includes/config/osm’ directory.
You must follow rules to be sure that the data will be recognized by the system.
After modifying the file, you can verify that the content is valid using an online tool like this one.

Entry “osm_basic” is mandatory, it should not be deleted.
The name of each entry must be unique in the file.
Property “url” is mandatory.
Property “options:title” is mandatory and must be unique in the file. This is the name that appears in the control.
Property “options:type” is mandatory and can take the values “tile” or “overlay” to differentiate between basemaps and overlays.

"osm_basic": { <==  entry mandatory
    ....
},
"Trails_mtb": { <== name must be unique
	"url": "https://tile.waymarkedtrails.org/mtb/{z}/{x}/{y}.png",
	"options": {
		"title": "Trail MTB",  <== title must be unique
		"type": "overlay",  <== 'tile' or 'overlay'
		"maxZoom": 18,
		"attribution": "Map data &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, | Map style: &copy; <a href='https://waymarkedtrails.org'>waymarkedtrails.org</a> (<a href='https://creativecommons.org/licenses/by-sa/3.0/'>CC-BY-SA</a>)"
	}
} <== last member no comma

Add your own icon sets

You can add your own icons to reuse them in maps.
At first you must copy the icon files in the directory ‘/assets/images/osm-icons’.
Then you have to modify with a plain text editor the file ‘osmIcons.json‘ under the directory ‘/includes/config/osm’.

Entry “default.png”is mandatory.
Each line corresponds to an entry in the icon directory with:
the name of the file and its extension
the ‘title‘ label used in the list of icons
the ‘sizes‘ of the icon “width,height” which will be used for display. This allows you to use icons of different sizes.

After modifying the file, you can verify that the content is valid using an online tool like this one.

{
	"default.png": { "title": "Default", "sizes": "50,50" },
	"default_1.png": { "title": "Default 1", "sizes": "33,44" },
	"accessible.png": { "title": "Accessibility", "sizes": "45,45" },
	"automotive.png": { "title": "Automotive", "sizes": "33,44" },
	...
	"transport.png": { "title": "Transport", "sizes": "33,44" } <== last member no comma
}

Define settings and modify controls

The ‘Settings‘ section groups the zoom level, the height of the map and allows you to select the default layer to display.
You can allow the system to display the best zoom level by selecting the ‘Auto zoom‘ toggle.
With the section ‘Controls‘ you can modify the general behavior of the controls. Zoom position, zoom with the mouse wheel, dragging map…

OSM-settings
OSM controls

Apply styles to map and tooltip title

Apply styles to the map as well as to the tooltip title and content.

OSM styles

2 thoughts on “How to add OpenStreetMap to elementor”

Leave a Comment