31:T4ed,{ clearMap(map); addSource(map, "properties", propertyFeatures); addLayer(map, "propertyLayer", { type: "circle", source: "properties", paint: { "circle-radius": 8, "circle-stroke-width": 2, "circle-color": "red", "circle-stroke-color": "white" } }); addListener(map, "click", "propertyLayer", (e) => { // Copy coordinates array. const coordinates = e.features[0].geometry.coordinates.slice(); const properties = e.features[0].properties; // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(getPopup(properties)) .addTo(map); }); // Change the cursor to a pointer when the mouse is over the places layer. addListener(map, "mouseenter", "propertyLayer", () => { map.getCanvas().style.cursor = "pointer"; }); // Change it back to a pointer when it leaves. addListener(map, "mouseleave", "propertyLayer", () => { map.getCanvas().style.cursor = ""; }); }32:[{"id":"fd195ca0d5ad17333ce81bf62025c8c9092673607c7971e4a07f60330824e6d6ea5031dd6557dc9cf97f59d3848c79e32e24f465fb16daae90f3c7a90b58807b","href":"https://static.observableusercontent.com/files/fd195ca0d5ad17333ce81bf62025c8c9092673607c7971e4a07f60330824e6d6ea5031dd6557dc9cf97f59d3848c79e32e24f465fb16daae90f3c7a90b58807b","name":"corporate_sfr_properties202205041359.csv","type":"text/csv","lastModified":1651724407744.178,"size":16593064}] 2f:{"title":"Single-family homes owned by large corporate landlords in North Carolina","cells":[{"id":0,"value":"# Single-family homes owned by large corporate landlords in North Carolina\n\nAn interactive map to view single-family homes in North Carolina owned by large corporate landlords (only those that own at least 100 properties are shown). Data from Security for Sale, an analysis by The News & Observer and The Charlotte Observer (data) (story).\n\nPan and zoom the map to see properties (shown as red circles). Click on a property to reveal a tooltip with the home's details.","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"viewof map = makeMap(\n [-79.82875650710008, 35.417155819210464],\n 6.094302655390971\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"import {\n makeMap,\n addSource,\n addLayer,\n mapboxgl,\n clearMap,\n addListener\n} from \"@freedmand/vector-map\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"propertyFeatures = {\n return {\n type: \"FeatureCollection\",\n features: corporateProperties.map((property) => ({\n type: \"Feature\",\n properties: {\n ...property\n },\n geometry: {\n type: \"Point\",\n coordinates: [property.lng, property.lat]\n }\n }))\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"corporateProperties = FileAttachment(\n \"corporate_sfr_properties202205041359.csv\"\n).csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"function escapeHtml(text) {\n const textNode = document.createTextNode(text);\n const div = document.createElement(\"div\");\n div.appendChild(textNode);\n return div.innerHTML;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"function getPopup(property) {\n return `

\n \n \n \n \n \n \n \n${Object.entries(property)\n .map(\n ([key, value]) =>\n ``\n )\n .join(\"\\n\")}\n \n

Property	Value
${escapeHtml(key)}	${escapeHtml(value)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}