Code Archive

This page features a selection of unique, practical, and occasionally unconventional code I've developed across research, teaching, and personal projects. Feel free to explore, use, and adapt any of the code shared here.

If you use or build on any of these tools in your work, please cite me appropriately—citation details are included with each project, or you can reference my work as:

Sofia Kaloper, 2025, "Code Archive", sofiakaloper.com, https://www.sofiakaloper.com/code.

This HTML code creates an interactive Leaflet map with Google Places Autocomplete and Esri Leaflet feature layers within a Qualtrics survey, allowing respondents to select their home location by clicking an assessor parcel polygon or searching an address. Users can identify their home location either by clicking a parcel on the map or by typing an address into the search box. When a parcel is selected, a draggable marker is placed and key metadata is extracted from the underlying polygon (the selected polygon ID, pre-calculated first and second order neighbors). To prevent overloading Qualtrics, polygons are only displayed when the map is zoomed in (zoom level ≥ 15), and their visibility toggles based on zoom level and average polygon size. An autocomplete search bar leverages Google Maps API for address lookup, and an error message ensures users select a location before submitting. The building layer and API key should be added manually to activate the full functionality.

<!DOCTYPE html><html><head>    <title>What is your current home address?</title>    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />    <style>        #map { height: 600px; width: 100%; }        #search-box { margin-bottom: 10px; }        .error-message { color: red; font-weight: bold; display: none; }        span, input, button {            font-size: 18px;        }        .parcel-label {            background-color: transparent !important;            border: none !important;            box-shadow: none !important;            font-weight: bold;            color: black;        }    </style></head><body>    <strong style="font-size: 20px;">What is your current home address?</strong>    <div>        <br />        <span style="font-size: 20px;">To select your home address, you may either click on a property or enter an address in the search bar. Once you select a location, a pin will appear in the center of the selected property, indicating that the location has been marked. The properties will only appear once the map is zoomed in and will disappear when zoomed out.</span>    </div>    <div id="search-box">        <input type="text" id="address-input" placeholder="Enter address" />        <button onclick="geocodeAddress()">Search</button>    </div>    <div id="map"></div>    <div id="error-message">Please select a location by clicking or searching!</div>
        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>    <script src="https://unpkg.com/esri-leaflet@3.0.4/dist/esri-leaflet.js"></script>    <script src="https://unpkg.com/@turf/turf/turf.min.js"></script>        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY_HERE&libraries=places"></script>
    <script>        // Initialize map centered on Santa Barbara, CA        var map = L.map('map').setView([34.4208, -119.6982], 13);        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {            attribution: '© OpenStreetMap contributors'        }).addTo(map);
        var marker = null;        var polygonsVisible = false;
        // Set up address autocomplete        const addressInput = document.getElementById('address-input');        const autocomplete = new google.maps.places.Autocomplete(addressInput);
        autocomplete.addListener('place_changed', function () {            const place = autocomplete.getPlace();            if (place.geometry) {                const latLng = {                    lat: place.geometry.location.lat(),                    lng: place.geometry.location.lng()                };                moveMarker(latLng, true);            }        });
        // Save selected location as Qualtrics embedded data        function updateCoordinates(latLng) {            Qualtrics.SurveyEngine.setEmbeddedData('droppedMarkerLat', latLng.lat);            Qualtrics.SurveyEngine.setEmbeddedData('droppedMarkerLng', latLng.lng);            Qualtrics.SurveyEngine.setEmbeddedData('LocationMarked', 'true');        }
        // Drop or move a marker, recenter map, check for polygon match        function moveMarker(latLng, forceZoomIn = false) {            if (marker) {                marker.setLatLng(latLng);            } else {                marker = L.marker(latLng, { draggable: true }).addTo(map);                marker.on('moveend', function (e) {                    const newLatLng = e.target.getLatLng();                    updateCoordinates(newLatLng);                    if (map.getZoom() < 17) {                        map.setView(newLatLng, 17);                    }                    checkPolygon(newLatLng);                });            }
            updateCoordinates(latLng);            if (forceZoomIn && map.getZoom() < 17) {                map.setView(latLng, 17);            } else if (forceZoomIn) {                map.panTo(latLng);            }
            checkPolygon(latLng);        }
        // Define parcel polygon layer (replace with your own FeatureServer URL)        const buildingLayer = L.esri.featureLayer({            url: 'YOUR_FEATURE_LAYER_URL_HERE',            style: () => ({                color: "#0000FF",                weight: 0.5,                opacity: 1,                fillColor: "#0000FF",                fillOpacity: 0.1            }),            onEachFeature: function (feature, layer) {                const code = feature.properties?.parcel_cod || "";                const centroidCoords = turf.centroid(feature).geometry.coordinates;                const centroidLatLng = [centroidCoords[1], centroidCoords[0]];
                layer.bindTooltip(code, {                    permanent: true,                    direction: 'center',                    className: 'parcel-label'                }).openTooltip();
                layer.on('click', function (e) {                    moveMarker(e.latlng, true);                });            }        });
        // Identify if clicked point intersects any polygon; store keys as Qualtrics data        function checkPolygon(latLng) {            if (map.getZoom() < 15) return;
            buildingLayer.query().contains(L.latLng(latLng.lat, latLng.lng)).run(function (error, featureCollection) {                if (error) return;
                if (featureCollection.features.length > 0) {                    const feature = featureCollection.features[0];                    if (!feature.properties || !feature.properties.key_) return;
                    const selectedKey = feature.properties.key_.trim();                    const selectedKeyFirst = feature.properties.keyfirst?.trim() || "";                    const selectedKeySecond = feature.properties.keysecond?.trim() || "";
                    Qualtrics.SurveyEngine.setEmbeddedData('selectedKey', selectedKey);                    Qualtrics.SurveyEngine.setEmbeddedData('selectedKeyFirst', selectedKeyFirst);                    Qualtrics.SurveyEngine.setEmbeddedData('selectedKeySecond', selectedKeySecond);
                    const centroid = turf.centroid(feature.geometry);                    const centroidLatLng = {                        lat: centroid.geometry.coordinates[1],                        lng: centroid.geometry.coordinates[0]                    };                    if (marker) marker.setLatLng(centroidLatLng);                } else {                    Qualtrics.SurveyEngine.setEmbeddedData('selectedKey', '');                    Qualtrics.SurveyEngine.setEmbeddedData('selectedKeyFirst', '');                    Qualtrics.SurveyEngine.setEmbeddedData('selectedKeySecond', '');                }            });        }
        // Show/hide parcel layer depending on zoom and polygon size        function toggleLayerVisibility() {            const zoomLevel = map.getZoom();            let zoomThreshold = 17;
            buildingLayer.query().within(map.getBounds()).run(function (error, featureCollection) {                if (error) return;
                if (featureCollection.features.length > 0) {                    let totalArea = 0;                    featureCollection.features.forEach(feature => {                        const area = turf.area(feature.geometry);                        totalArea += area;                    });                    const avgArea = totalArea / featureCollection.features.length;
                    if (avgArea > 10000) {                        zoomThreshold = 14;                    } else if (avgArea > 1000) {                        zoomThreshold = 17;                    } else {                        zoomThreshold = 17;                    }                }
                if (zoomLevel >= zoomThreshold && !polygonsVisible) {                    map.addLayer(buildingLayer);                    polygonsVisible = true;                } else if (zoomLevel < zoomThreshold && polygonsVisible) {                    map.removeLayer(buildingLayer);                    polygonsVisible = false;                }            });        }
        map.on('zoomend moveend', function () {            toggleLayerVisibility();            if (marker && map.getZoom() >= 15) {                checkPolygon(marker.getLatLng());            }        });
        // Prevent user from submitting without selecting a location        Qualtrics.SurveyEngine.addOnPageSubmit(function () {            if (!Qualtrics.SurveyEngine.getEmbeddedData('LocationMarked')) {                Qualtrics.SurveyEngine.setEmbeddedData('LocationMarked', 'false');                document.getElementById('error-message').style.display = 'block';            } else {                document.getElementById('error-message').style.display = 'none';            }        });
        // Search and place marker based on address string        function geocodeAddress() {            const address = document.getElementById('address-input').value;            if (!address) return;
            const geocoder = new google.maps.Geocoder();            geocoder.geocode({ address: address }, function (results, status) {                if (status === 'OK') {                    const location = results[0].geometry.location;                    const latLng = { lat: location.lat(), lng: location.lng() };                    moveMarker(latLng, true);                } else {                    alert("Geocode was not successful for the following reason: " + status);                }            });        }    </script></body></html>

This code creates a confirmation map within a Qualtrics survey, displaying the home location previously selected by respondents as a highlighted parcel polygon. It queries an ArcGIS feature layer to display the corresponding parcel polygon in orange when the coordinates match a polygon, warning users if no polygon is found or if coordinates are invalid. A toggle button allows switching between OpenStreetMap and Esri satellite imagery for better visualization. The code also checks if the selected parcel intersects with a chipping program zone layer, storing the result as Qualtrics embedded data. Display logic and multiple-choice answers enable users to confirm the location or return to the original mapping question to reselect.

<span style="font-size: 20px;"> This is the location you have marked as your current home location in the previous question, please confirm this selection.<br /><br /><span style="font-size: 20px;"><i>(Please note,</i><em> the property boundaries shown may be slightly shifted relative to your real property boundaries due to inaccuracies in our base map data. If you feel the property boundary is correct, please mark "the property shown in the map is correct" and move on to the next question.)</em></span><br /> 
<head>    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />    <style>        #map { height: 400px; width: 100%; }        #toggleMap { margin: 10px; padding: 10px; }    </style></head><body>    <div id="toggleMap">        <button id="toggleButton">Switch to Satellite View</button>    </div>    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>    <script src="https://unpkg.com/esri-leaflet@3.0.4/dist/esri-leaflet.js"></script>
    <script>        var homeMap = L.map('map').setView([34.4208, -119.6982], 13);
        // Add OpenStreetMap base layer by default        var openStreetMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'        }).addTo(homeMap);
        // Esri satellite view basemap        var satelliteLayer = L.esri.basemapLayer('Imagery');
        // Variable for the highlighted polygon (user’s selected parcel)        var homePolygonLayer = null;
        // Chipping program zone layer – replace with your own feature service URL        var chippingLayer = L.esri.featureLayer({            url: 'YOUR_CHIPPING_FEATURE_LAYER_URL_HERE', // 🔁 Replace with your ArcGIS feature layer URL            style: {                color: 'transparent',                fillOpacity: 0            }        }).addTo(homeMap);
        function showHomePolygon() {            var lat = parseFloat(Qualtrics.SurveyEngine.getEmbeddedData('droppedMarkerLat'));            var lng = parseFloat(Qualtrics.SurveyEngine.getEmbeddedData('droppedMarkerLng'));
            if (!isNaN(lat) && !isNaN(lng)) {                var latLng = L.latLng(lat, lng);                homeMap.setView(latLng, 16);
                // Parcel polygon layer – replace with your own feature service URL                var buildingLayer = L.esri.featureLayer({                    url: 'YOUR_BUILDING_POLYGON_LAYER_URL_HERE' // 🔁 Replace with your ArcGIS parcel feature layer URL                });
                buildingLayer.query().contains(latLng).run(function(error, featureCollection) {                    if (featureCollection.features.length > 0) {                        var feature = featureCollection.features[0];
                        if (homePolygonLayer) {                            homeMap.removeLayer(homePolygonLayer);                        }
                        homePolygonLayer = L.geoJSON(feature.geometry, {                            style: {                                color: 'orange',                                weight: 2,                                fillOpacity: 0.5                            }                        }).addTo(homeMap);
                        homeMap.fitBounds(homePolygonLayer.getBounds());                        checkInChippingZone(feature.geometry);                    } else {                        alert("No polygon found at the selected location.");                    }                });            } else {                alert("Invalid coordinates. Please ensure a location has been marked.");            }        }
        function checkInChippingZone(homeGeometry) {            var homeLayer = L.geoJSON(homeGeometry);            var centroid = homeLayer.getBounds().getCenter();
            chippingLayer.query().intersects(centroid).run(function(error, featureCollection) {                var isInChippingZone = featureCollection.features.length > 0;                Qualtrics.SurveyEngine.setEmbeddedData('isInchippingZone', isInChippingZone ? 'true' : 'false');            });        }
        var isStreetMap = true;        document.getElementById("toggleButton").onclick = function() {            if (isStreetMap) {                homeMap.removeLayer(openStreetMapLayer);                satelliteLayer.addTo(homeMap);                this.innerHTML = "Switch to Street View";            } else {                homeMap.removeLayer(satelliteLayer);                openStreetMapLayer.addTo(homeMap);                this.innerHTML = "Switch to Satellite View";            }            isStreetMap = !isStreetMap;        };
        showHomePolygon();    </script></body>