camper/web/static/map.js

(function () {
    'use strict';

    const container = document.getElementById('campground_map');
    container.style.height = '80vh';

    const svg = container.childNodes[0];
    svg.remove();

    const latLngBounds = L.latLngBounds([[0, 0], [1192, 1500]]);
    const map = L.map(container, {
        center: latLngBounds.getCenter(),
        minZoom: -2,
        maxZoom: 2,
        zoom: -1,
        scrollWheelZoom: false,
        //maxBounds: latLngBounds,
        //maxBoundsViscosity: 1.0,
        zoomSnap: 0,
        crs: L.CRS.Simple,
    });
    map.fitBounds(latLngBounds);
    L.svgOverlay(svg, latLngBounds).addTo(map);

    // from https://github.com/jkroso/parse-svg-path/
    const parse = (function () {
        'use strict';

        const length = {a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0}
        const segment = /([astvzqmhlc])([^astvzqmhlc]*)/ig;
        const number = /-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/ig;

        function parseValues(args) {
            const numbers = args.match(number)
            return numbers ? numbers.map(Number) : []
        }

        return function (path) {
            const data = []
            path.replace(segment, function (_, command, args) {
                let type = command.toLowerCase()
                args = parseValues(args)

                // overloaded moveTo
                if (type === 'm' && args.length > 2) {
                    data.push([command].concat(args.splice(0, 2)))
                    type = 'l'
                    command = command === 'm' ? 'l' : 'L'
                }

                while (true) {
                    if (args.length === length[type]) {
                        args.unshift(command)
                        return data.push(args)
                    }
                    if (args.length < length[type]) throw new Error('malformed path data')
                    data.push([command].concat(args.splice(0, length[type])))
                }
            })
            return data
        }
    })();

    function highlightAccommodation(e) {
        const layer = e.target;
        layer.setStyle({
            color: '#ffe673',
        });
        layer.bringToFront();
    }

    function resetHighlight(e) {
        const layer = e.target;
        layer.setStyle({
            color: 'transparent',
        });
    }

    // XXX: this is from the “parceles” layer.
    const ctm = [1, 0, 0, 1, 83.2784, 66.1766];

    function transform(x, y) {
        return [ctm[0] * x + ctm[2] * y + ctm[4], ctm[1] * x + ctm[3] * y + ctm[5]];
    }

    function setupFeatures(prefix, baseURI) {
        for (const campsite of Array.from(container.querySelectorAll(`[id^="${prefix}"]`))) {
            const label = campsite.id.substring(prefix.length);
            if (!label) {
                continue;
            }
            const path = campsite.firstElementChild;
            const commands = parse(path.getAttribute('d'));
            const points = [];
            const p0 = [0, 0];
            for (const cmd of commands) {
                switch (cmd[0]) {
                    case 'M':
                    case 'L':
                        const cmdM = transform(cmd[1], cmd[2]);
                        p0[0] = cmdM[0];
                        p0[1] = latLngBounds.getNorth() - cmdM[1];
                        break;
                    case 'm':
                    case 'l':
                        p0[0] += cmd[1];
                        p0[1] -= cmd[2];
                        break;
                    case 'C':
                        const cmdC = transform(cmd[5], cmd[6]);
                        p0[0] = cmdC[0];
                        p0[1] = latLngBounds.getNorth() - cmdC[1];
                        break;
                    case 'Z':
                    case 'z':
                        continue;
                    default:
                        console.error(cmd);
                }
                points.push([p0[1], p0[0]]);
            }
            console.log(points);
            const feature = L.polygon(points, {color: 'transparent'}).addTo(map);
            feature.on({
                mouseover: highlightAccommodation,
                mouseout: resetHighlight,
                click: function () {
                    window.location = `${baseURI}/${label}`;
                },
            })
        }
    }

    const language = document.documentElement.getAttribute('lang');
    setupFeatures('cp_', `/${language}/campsites`)
    setupFeatures('cr_', `/${language}/amenities`)
})();