Theme Components

Maps with multiple points

Maps that are used in the category listings show multiple points/markers. Also, popup windows are automatically attached to these points. To display this type of map, you need to provide your list of points in a GeoJSON file. These files will contain location data together with accompanying data like title, description, image path, etc. See below the links to the particular GeoJSON files used in this theme.

Map with multiple points - venues

GeoJSON file used to generate this map: restaurants-geojson.json

// Create an example category map
createListingsMap({
    mapId: 'categoryMap',
    markerPath: 'img/marker.svg',
    markerPathHighlight: 'img/marker-hover.svg',
    jsonFile: 'js/restaurants-geojson.json',
    imgBasePath: 'img/photo/'
});

Map with multiple points - rentals

GeoJSON file used to generate this map: rooms-geojson.json

// Create an example category map for rentals - text labels with price, different popup style
createListingsMap({
    mapId: 'categoryMap2',
    markerPath: 'img/marker.svg',
    markerPathHighlight: 'img/marker-hover.svg',            
    jsonFile: 'js/rooms-geojson.json',
    mapPopupType: 'rental',
    useTextIcon: true,
    imgBasePath: 'img/photo/'
});   

Maps with a single marker

Maps used on the detail pages do not contain popups and do not use a GeoJSON file. You pass all the data to the JavaScript function.

Single-marker map

// Create an example detail map for venue
createDetailMap({
    mapId: 'detailMap',
    mapCenter: [40.732346, -74.0014247],
    markerShow: true,
    markerPosition: [40.732346, -74.0014247],
    markerPath: 'img/marker.svg',
})    

Single-marker map, circle instead of the marker

// Create an example detail map for rentals - show circle instead of the marker
createDetailMap({
    mapId: 'detailMap2',
    mapZoom: 14,
    mapCenter: [40.732346, -74.0014247],
    circleShow: true,
    circlePosition: [40.732346, -74.0014247]
})        

Initialize the slider via .swiper-init and data-swiper attribute.

<!-- Slider main container-->
<div class="swiper-container swiper-container-mx-negative swiper-init" data-swiper='{"slidesPerView":3,"spaceBetween":20,"loop":true,"roundLengths":true,"breakpoints":{"991":{"slidesPerView":2},"565":{"slidesPerView":1}},"pagination":{"el":".swiper-pagination","clickable":true,"dynamicBullets":true}}'>
    <!-- Additional required wrapper-->
    <div class="swiper-wrapper pb-5">
        <!-- Slides-->
        <div class="swiper-slide h-auto px-2">
            Slide ...
        </div>
        <div class="swiper-slide h-auto px-2">
            Slide ...
        </div>
        <div class="swiper-slide h-auto px-2">
            Slide ...
        </div>
    </div>
    <!-- If we need pagination-->
    <div class="swiper-pagination"></div>
</div>

Or use JavaScript

var itemsSlider = new Swiper('.items-slider', {
    slidesPerView: 4,
    spaceBetween: 20,
    loop: true,
    roundLengths: true,
    breakpoints: {
        1200: {
            slidesPerView: 3
        },
        991: {
            slidesPerView: 2
        },
        565: {
            slidesPerView: 1
        }
    },

    // If we need pagination
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        dynamicBullets: true
    },
});