[{"data":1,"prerenderedAt":711},["ShallowReactive",2],{"page-\u002Fguides\u002Ffile-drop":3},{"id":4,"title":5,"body":6,"description":703,"extension":704,"meta":705,"navigation":706,"path":707,"seo":708,"stem":709,"__hash__":710},"content\u002F4.guides\u002F10.file-drop.md","Drag & Drop File Visualization",{"type":7,"value":8,"toc":684},"minimark",[9,13,18,21,26,176,183,187,253,262,278,282,286,308,312,332,336,339,360,364,367,387,390,394,401,458,501,511,515,518,522,525,585,592,596,655,659,680],[10,11,12],"p",{},"The built-in map viewer supports drag-and-drop file visualization. Drop files directly onto the map to instantly see your data as styled overlays — with client-side parsing for lightweight formats and streaming server upload for database\u002Fraster formats.",[14,15,17],"h2",{"id":16},"supported-formats","Supported Formats",[10,19,20],{},"tileserver-rs supports 9 geospatial file formats, split between client-side and server-side processing:",[22,23,25],"h3",{"id":24},"client-side-parsed-in-the-browser","Client-Side (parsed in the browser)",[27,28,29,48],"table",{},[30,31,32],"thead",{},[33,34,35,39,42,45],"tr",{},[36,37,38],"th",{},"Format",[36,40,41],{},"Extensions",[36,43,44],{},"Parser",[36,46,47],{},"Processing",[49,50,51,79,99,119,139,157],"tbody",{},[33,52,53,60,70,76],{},[54,55,56],"td",{},[57,58,59],"strong",{},"GeoJSON",[54,61,62,66,67],{},[63,64,65],"code",{},".geojson",", ",[63,68,69],{},".json",[54,71,72,75],{},[63,73,74],{},"destr"," (safe JSON parse)",[54,77,78],{},"Web Worker",[33,80,81,86,91,97],{},[54,82,83],{},[57,84,85],{},"CSV",[54,87,88],{},[63,89,90],{},".csv",[54,92,93,96],{},[63,94,95],{},"papaparse"," (lat\u002Flng detection)",[54,98,78],{},[33,100,101,106,111,117],{},[54,102,103],{},[57,104,105],{},"Shapefile",[54,107,108],{},[63,109,110],{},".zip",[54,112,113,116],{},[63,114,115],{},"shpjs"," (zero-copy transfer)",[54,118,78],{},[33,120,121,126,131,136],{},[54,122,123],{},[57,124,125],{},"KML",[54,127,128],{},[63,129,130],{},".kml",[54,132,133],{},[63,134,135],{},"@tmcw\u002Ftogeojson",[54,137,138],{},"Main thread",[33,140,141,146,151,155],{},[54,142,143],{},[57,144,145],{},"GPX",[54,147,148],{},[63,149,150],{},".gpx",[54,152,153],{},[63,154,135],{},[54,156,138],{},[33,158,159,164,169,174],{},[54,160,161],{},[57,162,163],{},"PMTiles",[54,165,166],{},[63,167,168],{},".pmtiles",[54,170,171],{},[63,172,173],{},"pmtiles",[54,175,138],{},[10,177,178,179,182],{},"Heavy file parsing (GeoJSON, CSV, Shapefile) runs in a dedicated ",[57,180,181],{},"web worker"," to keep the map UI responsive during large file processing.",[22,184,186],{"id":185},"server-side-uploaded-and-served-as-tile-sources","Server-Side (uploaded and served as tile sources)",[27,188,189,200],{},[30,190,191],{},[33,192,193,195,197],{},[36,194,38],{},[36,196,41],{},[36,198,199],{},"Description",[49,201,202,217,235],{},[33,203,204,209,214],{},[54,205,206],{},[57,207,208],{},"MBTiles",[54,210,211],{},[63,212,213],{},".mbtiles",[54,215,216],{},"SQLite-based vector tile archive",[33,218,219,224,232],{},[54,220,221],{},[57,222,223],{},"SQLite",[54,225,226,66,229],{},[63,227,228],{},".sqlite",[63,230,231],{},".db",[54,233,234],{},"Treated as MBTiles",[33,236,237,242,250],{},[54,238,239],{},[57,240,241],{},"COG",[54,243,244,66,247],{},[63,245,246],{},".tif",[63,248,249],{},".tiff",[54,251,252],{},"Cloud Optimized GeoTIFF",[10,254,255,256,261],{},"These formats are streamed to the server via the ",[257,258,260],"a",{"href":259},"\u002Fapi\u002Fendpoints#file-upload-endpoints","upload API",", registered as temporary tile sources, and served back as regular vector\u002Fraster tiles.",[263,264,266],"callout",{"type":265},"info",[10,267,268,269,272,273,277],{},"Server-side uploads require ",[63,270,271],{},"upload_dir"," to be configured. See ",[257,274,276],{"href":275},"\u002Fgetting-started\u002Fconfig#file-uploads","Configuration"," for setup.",[14,279,281],{"id":280},"how-it-works","How It Works",[22,283,285],{"id":284},"client-side-flow-geojson-kml-gpx-csv-shapefile-pmtiles","Client-Side Flow (GeoJSON, KML, GPX, CSV, Shapefile, PMTiles)",[287,288,289,293,296,299,302,305],"ol",{},[290,291,292],"li",{},"Drop a file onto the map viewer",[290,294,295],{},"File type is detected from the extension",[290,297,298],{},"File contents are read and sent to a web worker (or parsed on the main thread for KML\u002FGPX\u002FPMTiles)",[290,300,301],{},"Parsed GeoJSON features are auto-styled with unique colors",[290,303,304],{},"A new MapLibre source and layers are added to the map",[290,306,307],{},"The camera auto-zooms to fit the data extent",[22,309,311],{"id":310},"server-side-flow-mbtiles-sqlite-cog","Server-Side Flow (MBTiles, SQLite, COG)",[287,313,314,316,323,326,329],{},[290,315,292],{},[290,317,318,319,322],{},"File is streamed to ",[63,320,321],{},"POST \u002Fapi\u002Fupload"," (chunked, no full-file buffering)",[290,324,325],{},"Server writes chunks to disk, validates the file, and registers it as a tile source",[290,327,328],{},"Client fetches TileJSON metadata for the new source",[290,330,331],{},"Vector layers are auto-styled and added to the map",[14,333,335],{"id":334},"auto-styling","Auto-Styling",[10,337,338],{},"Each dropped file gets a unique color from an 8-color palette. Layers are created based on geometry type:",[340,341,342,348,354],"ul",{},[290,343,344,347],{},[57,345,346],{},"Polygons"," — fill layer + outline stroke",[290,349,350,353],{},[57,351,352],{},"LineStrings"," — line layer with configurable width",[290,355,356,359],{},[57,357,358],{},"Points"," — circle layer with radius",[14,361,363],{"id":362},"overlay-management","Overlay Management",[10,365,366],{},"The overlay panel (visible after dropping files) lets you:",[340,368,369,375,381],{},[290,370,371,374],{},[57,372,373],{},"Toggle visibility"," — show\u002Fhide individual overlays with the eye icon",[290,376,377,380],{},[57,378,379],{},"Remove overlays"," — delete overlays with the trash button (also cleans up server uploads)",[290,382,383,386],{},[57,384,385],{},"See metadata"," — file name, format badge, and feature count per overlay",[14,388,276],{"id":389},"configuration",[22,391,393],{"id":392},"enable-server-side-uploads","Enable Server-Side Uploads",[10,395,396,397,400],{},"Add the following to your ",[63,398,399],{},"config.toml",":",[402,403,408],"pre",{"className":404,"code":405,"language":406,"meta":407,"style":407},"language-toml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[server]\nupload_dir = \"\u002Fdata\u002Fuploads\"\nupload_max_size_mb = 500\n","toml","",[63,409,410,426,446],{"__ignoreMap":407},[411,412,415,419,423],"span",{"class":413,"line":414},"line",1,[411,416,418],{"class":417},"sMK4o","[",[411,420,422],{"class":421},"sBMFI","server",[411,424,425],{"class":417},"]\n",[411,427,429,433,436,439,443],{"class":413,"line":428},2,[411,430,432],{"class":431},"sTEyZ","upload_dir ",[411,434,435],{"class":417},"=",[411,437,438],{"class":417}," \"",[411,440,442],{"class":441},"sfazB","\u002Fdata\u002Fuploads",[411,444,445],{"class":417},"\"\n",[411,447,449,452,454],{"class":413,"line":448},3,[411,450,451],{"class":431},"upload_max_size_mb ",[411,453,435],{"class":417},[411,455,457],{"class":456},"sbssI"," 500\n",[27,459,460,472],{},[30,461,462],{},[33,463,464,467,469],{},[36,465,466],{},"Option",[36,468,199],{},[36,470,471],{},"Default",[49,473,474,486],{},[33,475,476,480,483],{},[54,477,478],{},[63,479,271],{},[54,481,482],{},"Directory for uploaded files",[54,484,485],{},"-",[33,487,488,493,496],{},[54,489,490],{},[63,491,492],{},"upload_max_size_mb",[54,494,495],{},"Maximum upload file size in MB",[54,497,498],{},[63,499,500],{},"500",[263,502,504],{"type":503},"warning",[10,505,506,507,510],{},"Uploaded sources are ",[57,508,509],{},"session-only"," — they persist until deleted or the server restarts. They are not saved to the config file.",[22,512,514],{"id":513},"client-side-formats-no-config-needed","Client-Side Formats (No Config Needed)",[10,516,517],{},"GeoJSON, KML, GPX, CSV, Shapefile, and PMTiles files are processed entirely in the browser. No server configuration is required for these formats.",[14,519,521],{"id":520},"upload-api","Upload API",[10,523,524],{},"The file drop feature uses three REST endpoints under the hood:",[27,526,527,539],{},[30,528,529],{},[33,530,531,534,537],{},[36,532,533],{},"Endpoint",[36,535,536],{},"Method",[36,538,199],{},[49,540,541,556,570],{},[33,542,543,548,553],{},[54,544,545],{},[63,546,547],{},"\u002Fapi\u002Fupload",[54,549,550],{},[63,551,552],{},"POST",[54,554,555],{},"Upload a file (streaming multipart)",[33,557,558,562,567],{},[54,559,560],{},[63,561,547],{},[54,563,564],{},[63,565,566],{},"GET",[54,568,569],{},"List all uploaded sources",[33,571,572,577,582],{},[54,573,574],{},[63,575,576],{},"\u002Fapi\u002Fupload\u002F{id}",[54,578,579],{},[63,580,581],{},"DELETE",[54,583,584],{},"Remove an upload and delete the file",[10,586,587,588,591],{},"See the ",[257,589,590],{"href":259},"API reference"," for full details.",[14,593,595],{"id":594},"tips","Tips",[340,597,598,604,627,649],{},[290,599,600,603],{},[57,601,602],{},"Large GeoJSON files"," are parsed in a web worker, so the map stays interactive even during multi-MB file processing",[290,605,606,609,610,612,613,66,616,619,620,623,624,626],{},[57,607,608],{},"Shapefile uploads"," must be ",[63,611,110],{}," archives containing ",[63,614,615],{},".shp",[63,617,618],{},".dbf",", and ",[63,621,622],{},".shx"," files — standalone ",[63,625,615],{}," files are rejected with a helpful error message",[290,628,629,632,633,66,636,66,639,66,642,66,645,648],{},[57,630,631],{},"CSV files"," need columns containing latitude and longitude values — the parser auto-detects common column names (",[63,634,635],{},"lat",[63,637,638],{},"latitude",[63,640,641],{},"lng",[63,643,644],{},"longitude",[63,646,647],{},"lon",", etc.)",[290,650,651,654],{},[57,652,653],{},"PMTiles files"," are loaded directly via an object URL — no server upload needed",[14,656,658],{"id":657},"next-steps","Next Steps",[340,660,661,667,673],{},[290,662,663,666],{},[257,664,665],{"href":259},"API Endpoints"," — Upload API reference",[290,668,669,672],{},[257,670,276],{"href":671},"\u002Fgetting-started\u002Fconfig"," — Enable upload directory",[290,674,675,679],{},[257,676,678],{"href":677},"\u002Fguides\u002Fdocker","Docker Deployment"," — Volume mounts for upload persistence",[681,682,683],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":407,"searchDepth":428,"depth":428,"links":685},[686,690,694,695,696,700,701,702],{"id":16,"depth":428,"text":17,"children":687},[688,689],{"id":24,"depth":448,"text":25},{"id":185,"depth":448,"text":186},{"id":280,"depth":428,"text":281,"children":691},[692,693],{"id":284,"depth":448,"text":285},{"id":310,"depth":448,"text":311},{"id":334,"depth":428,"text":335},{"id":362,"depth":428,"text":363},{"id":389,"depth":428,"text":276,"children":697},[698,699],{"id":392,"depth":448,"text":393},{"id":513,"depth":448,"text":514},{"id":520,"depth":428,"text":521},{"id":594,"depth":428,"text":595},{"id":657,"depth":428,"text":658},"Drop geospatial files onto the map viewer for instant visualization","md",{},true,"\u002Fguides\u002Ffile-drop",{"title":5,"description":703},"4.guides\u002F10.file-drop","nAdMZwq-bOYbFJPrIrvXBov71rx2FnFHjgblkNpQX80",1794150613894]