Open Street Map Particle

  • Tony
  • 8 April 2020
  • 1 Comment
  • Docs
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.

Mapbox deprecated support for Mapbox Studio Classic styles on June 1st, 2020. Starting from OpenStreetMap particle version 2.1.4, you can design your own maps with MapBox Studio then add the Style URL directly via particle to present your map style.

Generate Style URL

You can create your custom map style following this tutorial then click share and copy your Style URL.

Click Here to see full image size

Settings

Open Street Map 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, creating access token here with the Tokens API in order to use the MAP style from Mapbox.
Style URL Design your own maps with Mapbox Studio then add the Style URL to present your map style.
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
Longitude Enter longitude for maps.
Latitude Enter latitude 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

Comments

Leave a Reply

You must be logged in to post a comment.