Adventures in self-hosted mapping

// make some GeoJSON out of a list of locations. extra credit if you can
// navigate the riddle of what these locations may represent...

const raw_data = `Alaska 60.7938 -145.1080
Hawaii 19.8261 -155.4701
Vandenberg 34.7482 -120.5224
Shriever 38.8013 -104.5241
Greenland 64.1885 -51.6305
New Hampshire 42.9476 -71.6212
USNO Washington 38.9217 -77.0664
Cape Canaveral 28.4685 -80.5544
Ecuador -0.8867 -80.4261
Uruguay -34.7620 -55.8979
Ascension -7.9721 -14.4027
South Africa -26.5470 27.7835
United Kingdon 50.4631 -4.9707
Bahrain 26.0344 50.5616
Diego Garcia -7.2721 72.3677
South Korea 37.4548 126.7639
Guam 13.5897 144.9133
Kwajalein 8.7198 167.7331
Australia -35.3473 139.0051
New Zealand -39.2609 177.8659`;

const locations = (() => {
    const locs = [];
    raw_data.split("\n").forEach(line => {
        const elems  = line.split(" ");
        const lon = elems.pop();
        const lat = elems.pop();
        const name = elems.join(" ");
        const id = elems.join("_").toLowerCase();
        locs.push({
            geometry: { type: "Point", coordinates: [+lon, +lat] },
            properties: { name: name, id: id, logo: null }
        });
    })
    return {type: "FeatureCollection", features: locs};
})();

// a world map that can be panned, zoomed, etc. populated with some GeoJSON locations

class WorldMap {
    constructor(container) {
        // some styling etc.
        const aspect_ratio = window.screen.width > 760 ? 1.95 : 5.0 / 4.0;
        this.width = container.offsetWidth;
        this.height = this.width / aspect_ratio;
        this.transition_duration = 750;
        this.strokew = 0.7;
        this.marker_sz = 30;
        this.max_zoom = 30;

        // state
        this.current_country = null;
        this.zoom_k = 1;
        this.container = container;

        // some countries have special cases where the bounding box is too large
        // to be intuitive to the user (e.g., US territories, france and French
        // Guiana). for these countries we manually set a bounding box from
        // locations ([lon, lat] pairs) determined via google maps. (right
        // click, copy the location, paste here. no need to swap lat/lon, doing
        // that in the code below). this is used in the zoomToCountry function
        // defined below. the key is the country id as defined in the TopoJSON
        // file.
        this.customBoundingBoxes = (() => {
            const bb = (...points) => { return {
                type: "Feature",
                geometry: {type: "MultiPoint", coordinates: points.map((a) => {a.reverse(); return a;})}
            }};
            return {
                // United States
                840: bb([71.35253039479932, -167.41389563354986],
                        [60.18225380131154, -61.79225460292338],
                        [32.11086453205738, -119.20365476385375],
                        [24.874180405201567, -78.0859741811507]),
                // France
                250: bb([51.37034230578915, -7.821973431466914],
                        [51.55494178546891, 9.675957786795102],
                        [42.40029510491933, -7.06477226868229],
                        [43.05326072126442, 10.15332373724628]),
                // FIXME: NZ and Russia a buggy. can figure out later.
                // New Zealand
                // 554: bb([-33.19099961925115, 165.93883885459462],
                //         [-33.288351540876796, -176.25255765026654],
                //         [-47.28455694272225, 161.84169608969995],
                //         [-49.14568317580644, -179.0227848606215]),
                // Russia
                // 643: bb([76.73361439287555, 20.821061437976958],
                //         [77.779934101647, -167.61643657067302],
                //         [40.08907500026038, 33.125749080799196],
                //         [40.902842935876706, 136.2542161934248]),
            };
        })();
    }

    async load(topofile, locations) {
        // load the world map and locations
        const topo = await d3.json(topofile);
        this.shapes = topojson.feature(topo, topo.objects.countries);
        this.locations = locations;

        // the zoom object
        this.zoom = d3.zoom()
            .scaleExtent([1, this.max_zoom])
            .on("zoom", (event) => { // this is called on every zoom or pan
                const {transform} = event;
                // transform everything in the svg
                this.g.attr("transform", transform);
                this.zoom_k = transform.k;
                // scale stroke-width of the countries
                this.countries.attr("stroke-width", this.strokew / transform.k);
                // scale back the markers
                this.markers.attr("transform", (d, i, n) => {
                    // undo the global scale
                    const scale = 1/transform.k;
                    // re-project the marker back onto the globe
                    const lon = d.geometry.coordinates[0];
                    const lat = d.geometry.coordinates[1];
                    var proj = this.projection([lon, lat]);
                    // compute the proper shift value and set the new transform property
                    proj = [proj[0] - scale * this.marker_sz / 2, proj[1] - scale * this.marker_sz];
                    return `translate(${proj.join(",")}) scale(${scale})`
                })
                // change the cursor
                const pan = event.type === "zoom" && event?.sourceEvent?.type === "mousemove";
                if (pan) {
                    this.svg.style("cursor", "grabbing");
                } else {
                    this.svg.style("cursor", "zoom-in");
                }
                // update the info bar
                this.updateControlArea();
            })
            .on("end", () => { this.svg.style("cursor", "default") });

        // the tooltip (a regular floating html element)
        this.tooltip = d3.select(this.container)
            .append("div")
            .style("opacity", 0)
            .style("position", "absolute")
            .classed("tooltip", true);
        this.tooltip.append("img").attr("id", "tooltip-logo");
        this.tooltip.append("div").attr("id", "tooltip-text");

        // zoom indicator and reset button
        this.ctrl_area = d3.select(this.container)
            .append("span")
            .classed("ctrl-area", true)
        this.ctrl_area.append("span")
            .attr("id", "ctrl-area-zoom");
        this.ctrl_area.append("button")
            .attr("id", "ctrl-area-reset")
            .text("Reset")
            .on("click", this.reset.bind(this));
        this.updateControlArea();

        // Create the SVG container
        this.svg = d3.create("svg")
            .classed("map-content", true)
            .attr("viewBox", `0 0 ${this.width} ${this.height}`)
            .call(this.zoom)
            .on("click", this.reset.bind(this));

        // create the projection function
        this.projection = d3.geoNaturalEarth1()
            .fitSize([this.width, this.height], this.shapes);
        this.geoGenerator = d3.geoPath()
            .projection(this.projection);

        // group to hold everything
        this.g = this.svg.append("g");

        // add the countries
        this.countries = this.g.selectAll("path")
            .data(this.shapes.features)
            .join("path")
            .attr("d", d => this.geoGenerator(d))
            .classed("country", true)
            .attr("stroke-width", this.strokew)
            .on("click", (event, feature) => {
                if (!event.target)
                    return;
                if (this.current_country == feature) {
                    return this.reset();
                } else {
                    this.current_country = feature;
                }
                this.makeLocationActive(null);
                this.makeCountryActive(event.target);
                event.stopPropagation();
                this.zoomToCountry(feature);
            })
            .on("mouseover", (event, feature) => {
                this.tooltip.select("#tooltip-text").text(feature.properties.name);
                this.tooltip.select("#tooltip-logo").style("display", "none");
                const rect = this.tooltip.node().getBoundingClientRect();
                this.tooltip
                    .transition()
                    .duration(200)
                    .style("opacity", 0.9)
                    .style("left", 5 + "px")
                    .style("top", (this.height - rect.height - 5) + "px");
            })
            .on("mouseout", (event, feature) => {
                this.tooltip
                    .transition()
                    .duration(200)
                    .style("opacity", 0);
            });

        // add markers

        // first get an svg symbol for the marker (some inkscape magic, stolen
        // from
        // https://nohat.cc/f/svg-pin-map/freesvgorg50742-202109140328.html, see
        // img/gallery/map-pin-dennis2.svg)
        var map_pin = this.svg.append("symbol")
            .attr("id", "map-pin")
            .attr("width", 35)
            .attr("height", 35)
            .attr("viewBox", "0 0 35 35");
        map_pin.append("path")
            .attr("d", "M 10.464044,3.7408996 C 8.9682449,5.3372942 8.031323,7.6627881 " +
                  "8.0677035,9.8501619 c 0.075952,4.5709571 2.1363335,6.3012991 " +
                  "5.4312295,12.5923621 1.186882,2.76832 2.425634,5.697555 3.603791,10.54899 " +
                  "0.163729,0.715622 0.323403,1.380336 0.397275,1.437925 0.07383,0.05765 " +
                  "0.233541,-0.60944 0.397278,-1.325066 1.178154,-4.851435 2.41691,-7.778338 " +
                  "3.603791,-10.546655 3.294897,-6.291066 5.355236,-8.02142 5.43123,-12.5923771 " +
                  "C 26.968682,7.7779671 26.029441,5.4501537 24.533638,3.8537591 22.824933,2.0301486 " +
                  "20.247679,0.68054565 17.499999,0.62410832 14.752323,0.56763688 12.172749,1.9172891 " +
                  "10.464044,3.7408996 Z")
            .attr("style", "fill: var(--mark-bg-fill); stroke: var(--mark-bg-stroke); stroke-width: 0.313686; stroke-miterlimit: 4;")
        map_pin.append("circle")
            .attr("r", "3.6088443")
            .attr("cy", "10.020082")
            .attr("cx", "17.5")
            .attr("style", "fill: var(--mark-fg-fill); stroke-width: 0;")

        this.markers = this.g.selectAll(".mark")
            .data(this.locations)
            .enter()
            .append("use")
            .attr("class", "mark")
            .attr('width', this.marker_sz)
            .attr('height', this.marker_sz)
            .attr("href", "#map-pin")
            .attr("transform", (d) => {
                const lon = d.geometry.coordinates[0];
                const lat = d.geometry.coordinates[1];
                var proj = this.projection([lon, lat]);
                // shift so that the marker is pointing to the point
                proj = [proj[0] - this.marker_sz/2, proj[1] - this.marker_sz];
                return `translate(${proj.join(",")}) scale(1)`
            })
            .on("mouseover", (event, feature) => {
                this.svg.style("cursor", "pointer");
                this.moveTooltipToLocation(feature, event.target, 100);
            })
            .on("mouseout", (event) => {
                this.svg.style("cursor", "default");
                this.tooltip
                    .transition()
                    .duration(100)
                    .style("opacity", 0);
            })
            .on("click", (event, feature) => {
                event.stopPropagation();
                this.makeLocationActive(feature, event.target);
            });

        // set up the location sections (need to add a class attribute)
        this.locations.forEach((g) => {
            d3.select("#outline-container-" + g.properties.id)
                .attr("class", "location-info");
        });

        return this.svg;
    }

    // reset the svg container to the default view, deselect any current active countries of locations
    reset() {
        this.current_country = null;
        this.makeCountryActive(null);
        this.makeLocationActive(null);
        this.svg.transition()
            .duration(this.transition_duration)
            .call(this.zoom.transform,
                  d3.zoomIdentity
                  .translate(0, 0)
                  .scale(1));
    }

    // make a current location active, i.e., display it and not any others
    makeLocationActive(feature, dom_elem) {
        const id = feature ? feature.properties.id : null;
        this.locations.forEach((g) => {
            const cid = g.properties.id; // this is the CUSTOM_ID property
            if (id === cid) {
                // find the country this location is in and make it active
                const parentCountry = this.countries.filter((d) => {
                    return d3.geoContains(d, feature.geometry.coordinates);
                });
                if (parentCountry.size() > 0) {
                    this.makeCountryActive(parentCountry.node());
                    this.current_country = parentCountry.datum();
                    this.zoomToCountry(parentCountry.datum());
                    this.moveTooltipToLocation(feature, dom_elem, 0);
                }
            }
        });
    }

    // elem is a DOM element (so we need the actual country path here)
    makeCountryActive(elem) {
        // first make all countries and locations inactive
        d3.selectAll(".country").classed("active", false);
        // make one active
        if (elem) {
            d3.select(elem).classed("active", true);
        }
    }

    // feature is the actual GeoJSON datum
    zoomToCountry(feature) {
        // get the bounding box of the country
        const [[x0, y0], [x1, y1]] = this.geoGenerator.bounds(this.customBoundingBoxes[+feature.id] || feature);
        // compure the scale factor
        var k = Math.min(12, 0.9 / Math.max((x1 - x0) / this.width, (y1 - y0) / this.height));
        // compute the translation
        var [t_x, t_y] = [-(x0 + x1) / 2, -(y0 + y1) / 2];
        // apply the transform on the SVG object
        this.svg.transition()
            .duration(this.transition_duration)
            .call(this.zoom.transform,
                  d3.zoomIdentity
                  .translate(this.width / 2, this.height / 2)
                  .scale(k)
                  .translate(t_x, t_y),
                  d3.pointer(event, this.svg.node()));
    }

    updateControlArea() {
        // set the zoom level
        this.ctrl_area.select("#ctrl-area-zoom")
            .text("🔍: " + (this.zoom_k * 100).toFixed(0) + "%");
        // update the position
        const rect = this.ctrl_area.node().getBoundingClientRect();
        this.ctrl_area
            .style("top", (this.height - rect.height - 5) + "px")
            .style("left", (this.width - rect.width - 5) + "px")
    }

    moveTooltipToLocation(feature, dom_elem, duration) {
        // set the tooltip contents before getting its width
        if (feature.properties.logo) {
            this.tooltip.select("#tooltip-logo")
                .style("display", "block")
                .style("height", (Math.min(this.height/6, 60) - 10) + "px")
                .style("width", "auto")
                .attr("src", feature.properties.logo);
        }
        this.tooltip.select("#tooltip-text").text(feature.properties.name)

        // compute a fixed position for the tooltip
        const rect = this.tooltip.node().getBoundingClientRect();
        this.tooltip
            .transition()
            .duration(duration)
            .style("top", (this.height - rect.height - 5) + "px")
            .style("left", 5 + "px")
            .style("opacity", 0.9);
    }
}

#d3-map-container {
    position: relative;
    margin-top: 10px;
    margin-bottom: 0px;

    width: calc(100% - 2px); /* don't ask */
}

:root {
    --map-fg-color: var(--main-bg-color);
    --map-bg-color: #c6dbe9;
}

/* this directly styles the svg element */
.map-content {
    border: solid;
    border-width: 1px;
    border-radius: 5px;
    padding: 0;

    background-color: var(--map-bg-color);

    .country {
        stroke: var(--map-bg-color);
        fill: var(--map-fg-color);
    }

    .country:hover, .country.active {
        fill: var(--code-bg-color);
    }

    /* style the map markers. need to use CSS variables for this... */
    use.mark {
        /* the mark "background" */
        --mark-bg-fill: #ff4646;
        --mark-bg-stroke: #d73534;
        /* the little circle in the mark */
        --mark-fg-fill: #590000;
    }

    use.mark:hover {
        /* the mark "background" */
        --mark-bg-fill: #590000;
        --mark-bg-stroke: #d73534;
        /* the little circle in the mark */
        --mark-fg-fill: #ff4646;
    }
}

.tooltip, .ctrl-area {
    font-family: "Charter", "serif";
    font-size: 12pt;
}

.tooltip {
    background-color: var(--map-fg-color);
    stroke: var(--main-fg-color);

    display: flex;
    flex-direction: column;
    text-align: center;

    border: solid;
    border-width: 1px;
    border-radius: 5px;

    padding: 3px 5px 3px 5px;

}

/* the control area */
.ctrl-area {
    position: absolute;
    display: inline-flex;
    gap: 0.5rem;
    opacity: 0.9;
    align-items: center;

    background-color: var(--map-fg-color);
    stroke: var(--main-fg-color);

    border: solid;
    border-width: 1px;
    border-radius: 5px;

    padding: 3px 5px 3px 5px;

    button {
        background-color: var(--code-bg-color);
        color: var(--main-fg-color);
        margin-right: 0.4rem;
        border-color: var(--main-fg-color);
        border-style: solid;
        border-width: 1px;
        border-radius: 4px;
        padding: 0.2rem;
        font-family: inherit;
        font-size: inherit;
    }

    button:hover
    {
        background-color: var(--main-bg-color);
        transition-duration: 0.2s;
    }

}

const d3Container = document.getElementById("d3-map-container")
const d3Map = new WorldMap(d3Container);
document.addEventListener("DOMContentLoaded", async () => {
    d3Map.load("/res/countries-50m.json", locations.features)
    .then(svg => {
        d3Map.makeLocationActive(null);
        d3Container.append(svg.node());
    });
})