Location

Examples

On OctoberCMS you can use or jumplink-location partial to add a location on any page with your options you wish. You can also overwrite this partial for your customized theme:

{% partial "jumplink-location"
handle="your-unique-map-id"
title="Your location title"
iconName="your-custom-markericon.svg"
color="normal"
lat=53.89070744133484
lon=8.666458725929
zoom=18
iconAnchor="[12, 12]"
iconSize="[24, 24]"
popupText="Your customers name"
popupAddLat=0.00005 %}

You just need a initialize the map in JavaScript with:

jumplink.initLeadlet("your-unique-map-id")

You not need to use the partial / snippet for that, you can write your own html, just replace the {{values}} with your own. All data attributes are parsed inside our jumplink.initLeadlet("your-unique-map-id") function, you can write your own function, if you wish:

<div class="w-100 h-400"
    id="map-your-unique-map-id"
    data-lat="{{lat}}"
    data-lon="{{lon}}"
    data-zoom="{{zoom}}"
    data-marker-icon="{{("assets/images/" ~ iconName) | theme}}"
    data-icon-anchor="{{iconAnchor}}"
    data-icon-size="{{iconSize}}"
    data-popup-text="{{popupText}}"
    data-popup-add-lat="{{popupAddLat}}"
></div>