Open Street Map Particle

Extend the design of the advanced heading particle with different styles for headings to create beautiful typography. See how Heading can be designed beautifully on Demo Page.

# Open Street Map Package contents

Files Description
jlopenstreetmap.yaml Contains the Open Street Map particle settings.

jlopenstreetmap.html.twig The Twig file to pull information, settings.
leaflet.css Contains the Leaflet CSS.

leaflet.js Contains the Leaflet library for mobile-friendly interactive maps.

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Requirements Openstreet map requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.

Go to Template/Theme Settings > select the Layout to add Open Street Map particle (i.e: Home) -> Layout tab -> Drag and drop the Open Street Map Particle from Particles panel (left corner) to the section you want to display the particle.


Settings Description
Items List Map items to appear. You can add new items to the collection using the plus + icon
Map Settings Common settings for Map Style
Map Height Make sure the map container has a defined height.
Zoom Default zoom for maps.
Max Zoom Default MAX zoom for maps.
Show Zoom Controls Show Zoom Controls navigation.
Scroll Wheel Zoom Enable/Disable Scroll Wheel Zoom.
Show Popup Show Popup content on load.
Double Click Zoom If enabled, your maps will zoom with a double click.
Dragg Map dragging handler (by both mouse and touch).
Access Token Map box access token, Leave field default or request an access token here in order to use tiles from Mapbox
Box Shadow Select the image’s box shadow size.
Hover Box Shadow Select the image’s box shadow size on hover.
Display Contributors Display Map contributors
CSS Classes CSS class name for the particle.

Items You can add new items to the collection using the plus + icon

Settings Description
Note Use the name of a place or address to find lat long coordinates here
Latitude Enter latitude for maps.
Name Enter longitude for maps.
Text in Popup Enter the popup’s content.
Popup Width Enter the popup’s content width.
Custom Markers Icon Custom Map Icon.
Custom Markers shadow icon Custom the map shadow icon.

Learn more how to custom icon and shadow icon here.

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>