templates/navigation/map.html.twig line 1

{% extends 'base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
          crossorigin=""/>
{% endblock %}

{% block body %}
<div class="container">
    <div class="row justify-content-center">
        <ul class="items">
            <li class="item">
                <label class="check"><input type="checkbox" data-value="hotels" checked><span>Hôtels</span></label>
            </li>
            <li class="item">
                <label class="check"><input type="checkbox" data-value="restaurants" checked><span>Restaurants</span></label>
            </li>
            <li class="item">
                <label class="check"><input type="checkbox" data-value="others" checked><span>Caves et shopping</span></label>
            </li>
            <li class="item">
                <label class="check"><input type="checkbox" data-value="activities" checked><span>Activités touristiques</span></label>
            </li>
            <li class="item">
                <label class="check"><input type="checkbox" data-value="sites" checked><span>Sites et monuments</span></label>
            </li>
        </ul>
    </div>
    <div id="mapid"></div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
            integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
            crossorigin=""></script>
    <script>
        $(function() {
            $('.items input').on('change', function() {
                $('.' + $(this).attr('data-value')).fadeToggle(200);
            })

            $(window).scroll(function() {
                if (0 === $(window).scrollTop()) {
                    $('#button').removeClass('show');
                } else {
                    $('#button').addClass('show');
                }
            });

            $('#button').on('click', function (e) {
                e.preventDefault();
                $('html, body').animate({scrollTop:0}, '300');
            })

            $('.carousel-indicator').first().addClass('active').attr('aria-current', true);
            $('.carousel-item').first().addClass('active');

            initMap();
        })

        var geojsonMarkerOptionsActivities = {
            radius: 8,
            fillColor: "#9BCAFE",
            color: "#fff",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8,
            iconSize: 0,
            className: "activities"
        };

        var geojsonMarkerOptionsHotels = {
            radius: 8,
            fillColor: "#525ca3",
            color: "#fff",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8,
            iconSize: 0,
            className: "hotels"
        };

        var geojsonMarkerOptionsOthers = {
            radius: 8,
            fillColor: "#9BCAFE",
            color: "#fff",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8,
            iconSize: 0,
            className: "others"
        };

        var geojsonMarkerOptionsRestaurants = {
            radius: 8,
            fillColor: "#525ca3",
            color: "#fff",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8,
            iconSize: 0,
            className: "restaurants"
        };

        var geojsonMarkerOptionsSites = {
            radius: 8,
            fillColor: "#525ca3",
            color: "#fff",
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8,
            iconSize: 0,
            className: "sites"
        };
        
        async function initMap() {
            var mymap = L.map('mapid').setView([47.383333, 0.683333], 9);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                center: [47.383333, 0.683333],
                minZoom: 9,
                maxZoom: 17,
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(mymap);
            
            let response = await fetch('get/features', {
                headers: {'Content-type': 'application/json'}
            })
    
            if (response.ok) {
                let geojsonFeatureCollection = await response.json();
                L.geoJSON(geojsonFeatureCollection, {
                    pointToLayer: function (feature, latlng) {
                        console.log(feature);
                        if ('activities' === feature.properties.type || 'touristics-activities' === feature.properties.type) {
                            var marker = L.circleMarker(latlng, geojsonMarkerOptionsActivities);
                        }
                        if ('hotels' === feature.properties.type) {
                            var marker = L.circleMarker(latlng, geojsonMarkerOptionsHotels);
                        }
                        if ('others' === feature.properties.type) {
                            var marker = L.circleMarker(latlng, geojsonMarkerOptionsOthers);
                        }
                        if ('restaurants' === feature.properties.type) {
                            var marker = L.circleMarker(latlng, geojsonMarkerOptionsRestaurants);
                        }
                        if ('sites' === feature.properties.type) {
                            var marker = L.circleMarker(latlng, geojsonMarkerOptionsSites);
                        }
                        return marker;
                    },
                    onEachFeature: onEachFeature
                }).addTo(mymap);
            } else {
                alert("HTTP-Error: " + response.status);
            }
        }

        function onEachFeature(feature, layer) {
            if (feature.properties && feature.properties.reference) {
                layer.on('click',function(){
                    let url = 'show/' + feature.properties.reference;
                    window.location = url;
                })
            }
        }
    </script>
{% endblock %}