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.
Accessibility for OpenStreetmap widget
Tab / Shift-Tab keyboard keys to move between links and controls
Enter / Space keyboard keys to open link or activate control
Escape to exit OSM
Using 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.
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.
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
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 © <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, | Map style: © <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… and display the map fullscreen.
Apply styles to map and tooltip title
Apply styles to the map as well as to the tooltip title and content.
Hello..
can add my own icon on the map ?
thank you
Hello,
Unfortunately no, you cannot add your own icons
Rgds
Hi, I’m trying to use the openstreet map, but no matter how many markers I add, The defaault paris one is still there….is there any way to remove it? Thanks
Hi Fernando,
Tab: Content, section: Map
Make sure you have selected the ‘Search an address’ toggle to display the central marker at the default position you want to display.
The central marker is ‘Paris’ by default but if you choose the ‘Locate the visitor’ toggle, the widget must position the central marker near the city where your IP address is registered.
And then you can add other markers.
Rgds
Hi,
the map appears above the navigation bar
Hi,
I don’t really understand your comment but you can send me a URL