[{"data":1,"prerenderedAt":572},["ShallowReactive",2],{"page-\u002Fguides\u002Fog-images":3},{"id":4,"title":5,"body":6,"description":565,"extension":566,"meta":567,"navigation":115,"path":568,"seo":569,"stem":570,"__hash__":571},"content\u002F4.guides\u002F19.og-images.md","OpenGraph Images",{"type":7,"value":8,"toc":559},"minimark",[9,43,55,60,70,195,198,302,306,460,472,476,500,533,537,555],[10,11,12,13,17,18,22,23,26,27,34,35,38,39,42],"p",{},"The ",[14,15,16],"code",{},"\u002Fog\u002F{style}"," endpoint renders a ",[19,20,21],"strong",{},"social-card image"," from a map style using the native MapLibre renderer. It defaults to ",[19,24,25],{},"1200×630"," — the size recommended by the ",[28,29,33],"a",{"href":30,"rel":31},"https:\u002F\u002Fogp.me\u002F",[32],"nofollow","OpenGraph protocol"," for ",[14,36,37],{},"og:image"," — so the output drops straight into a ",[14,40,41],{},"\u003Cmeta property=\"og:image\">"," tag.",[10,44,45,46,50,51,54],{},"It reuses the same native rendering pipeline as ",[28,47,49],{"href":48},"\u002Fguides\u002Fstatic-images","Static Map Images","; ",[14,52,53],{},"\u002Fog"," is a thin, social-card-shaped preset over it.",[56,57,59],"h2",{"id":58},"basic-usage","Basic Usage",[61,62,67],"pre",{"className":63,"code":65,"language":66},[64],"language-text","GET \u002Fog\u002F{style}?center={lat},{lng}&zoom={zoom}\n","text",[14,68,65],{"__ignoreMap":69},"",[61,71,75],{"className":72,"code":73,"language":74,"meta":69,"style":69},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Default 1200x630 PNG centered on San Francisco\ncurl \"http:\u002F\u002Flocalhost:8080\u002Fog\u002Fprotomaps-light?center=37.8,-122.4&zoom=10\" -o og.png\n\n# Fit a bounding box instead of a center\ncurl \"http:\u002F\u002Flocalhost:8080\u002Fog\u002Fprotomaps-light?bounds=-122.5,37.7,-122.3,37.9\" -o og.png\n\n# JPEG output\ncurl \"http:\u002F\u002Flocalhost:8080\u002Fog\u002Fprotomaps-light?center=37.8,-122.4&zoom=10&format=jpeg\" -o og.jpg\n\n# WebP output\ncurl \"http:\u002F\u002Flocalhost:8080\u002Fog\u002Fprotomaps-light?center=37.8,-122.4&zoom=10&format=webp\" -o og.webp\n","bash",[14,76,77,86,110,117,123,139,144,150,167,172,178],{"__ignoreMap":69},[78,79,82],"span",{"class":80,"line":81},"line",1,[78,83,85],{"class":84},"sHwdD","# Default 1200x630 PNG centered on San Francisco\n",[78,87,89,93,97,101,104,107],{"class":80,"line":88},2,[78,90,92],{"class":91},"sBMFI","curl",[78,94,96],{"class":95},"sMK4o"," \"",[78,98,100],{"class":99},"sfazB","http:\u002F\u002Flocalhost:8080\u002Fog\u002Fprotomaps-light?center=37.8,-122.4&zoom=10",[78,102,103],{"class":95},"\"",[78,105,106],{"class":99}," -o",[78,108,109],{"class":99}," og.png\n",[78,111,113],{"class":80,"line":112},3,[78,114,116],{"emptyLinePlaceholder":115},true,"\n",[78,118,120],{"class":80,"line":119},4,[78,121,122],{"class":84},"# Fit a bounding box instead of a center\n",[78,124,126,128,130,133,135,137],{"class":80,"line":125},5,[78,127,92],{"class":91},[78,129,96],{"class":95},[78,131,132],{"class":99},"http:\u002F\u002Flocalhost:8080\u002Fog\u002Fprotomaps-light?bounds=-122.5,37.7,-122.3,37.9",[78,134,103],{"class":95},[78,136,106],{"class":99},[78,138,109],{"class":99},[78,140,142],{"class":80,"line":141},6,[78,143,116],{"emptyLinePlaceholder":115},[78,145,147],{"class":80,"line":146},7,[78,148,149],{"class":84},"# JPEG output\n",[78,151,153,155,157,160,162,164],{"class":80,"line":152},8,[78,154,92],{"class":91},[78,156,96],{"class":95},[78,158,159],{"class":99},"http:\u002F\u002Flocalhost:8080\u002Fog\u002Fprotomaps-light?center=37.8,-122.4&zoom=10&format=jpeg",[78,161,103],{"class":95},[78,163,106],{"class":99},[78,165,166],{"class":99}," og.jpg\n",[78,168,170],{"class":80,"line":169},9,[78,171,116],{"emptyLinePlaceholder":115},[78,173,175],{"class":80,"line":174},10,[78,176,177],{"class":84},"# WebP output\n",[78,179,181,183,185,188,190,192],{"class":80,"line":180},11,[78,182,92],{"class":91},[78,184,96],{"class":95},[78,186,187],{"class":99},"http:\u002F\u002Flocalhost:8080\u002Fog\u002Fprotomaps-light?center=37.8,-122.4&zoom=10&format=webp",[78,189,103],{"class":95},[78,191,106],{"class":99},[78,193,194],{"class":99}," og.webp\n",[10,196,197],{},"Use it in your page head:",[61,199,203],{"className":200,"code":201,"language":202,"meta":69,"style":69},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cmeta property=\"og:image\" content=\"https:\u002F\u002Ftiles.example.com\u002Fog\u002Fprotomaps-light?center=37.8,-122.4&zoom=10\" \u002F>\n\u003Cmeta property=\"og:image:width\" content=\"1200\" \u002F>\n\u003Cmeta property=\"og:image:height\" content=\"630\" \u002F>\n","html",[14,204,205,242,272],{"__ignoreMap":69},[78,206,207,210,214,218,221,223,225,227,230,232,234,237,239],{"class":80,"line":81},[78,208,209],{"class":95},"\u003C",[78,211,213],{"class":212},"swJcz","meta",[78,215,217],{"class":216},"spNyl"," property",[78,219,220],{"class":95},"=",[78,222,103],{"class":95},[78,224,37],{"class":99},[78,226,103],{"class":95},[78,228,229],{"class":216}," content",[78,231,220],{"class":95},[78,233,103],{"class":95},[78,235,236],{"class":99},"https:\u002F\u002Ftiles.example.com\u002Fog\u002Fprotomaps-light?center=37.8,-122.4&zoom=10",[78,238,103],{"class":95},[78,240,241],{"class":95}," \u002F>\n",[78,243,244,246,248,250,252,254,257,259,261,263,265,268,270],{"class":80,"line":88},[78,245,209],{"class":95},[78,247,213],{"class":212},[78,249,217],{"class":216},[78,251,220],{"class":95},[78,253,103],{"class":95},[78,255,256],{"class":99},"og:image:width",[78,258,103],{"class":95},[78,260,229],{"class":216},[78,262,220],{"class":95},[78,264,103],{"class":95},[78,266,267],{"class":99},"1200",[78,269,103],{"class":95},[78,271,241],{"class":95},[78,273,274,276,278,280,282,284,287,289,291,293,295,298,300],{"class":80,"line":112},[78,275,209],{"class":95},[78,277,213],{"class":212},[78,279,217],{"class":216},[78,281,220],{"class":95},[78,283,103],{"class":95},[78,285,286],{"class":99},"og:image:height",[78,288,103],{"class":95},[78,290,229],{"class":216},[78,292,220],{"class":95},[78,294,103],{"class":95},[78,296,297],{"class":99},"630",[78,299,103],{"class":95},[78,301,241],{"class":95},[56,303,305],{"id":304},"query-parameters","Query Parameters",[307,308,309,328],"table",{},[310,311,312],"thead",{},[313,314,315,319,322,325],"tr",{},[316,317,318],"th",{},"Parameter",[316,320,321],{},"Type",[316,323,324],{},"Default",[316,326,327],{},"Description",[329,330,331,359,380,398,415,431],"tbody",{},[313,332,333,339,342,345],{},[334,335,336],"td",{},[14,337,338],{},"center",[334,340,341],{},"string",[334,343,344],{},"—",[334,346,347,350,351,354,355,358],{},[14,348,349],{},"lat,lng"," (e.g. ",[14,352,353],{},"37.8,-122.4","). Required if ",[14,356,357],{},"bounds"," is absent.",[313,360,361,366,369,374],{},[334,362,363],{},[14,364,365],{},"zoom",[334,367,368],{},"number",[334,370,371],{},[14,372,373],{},"10",[334,375,376,377,379],{},"Used with ",[14,378,338],{},".",[313,381,382,386,388,390],{},[334,383,384],{},[14,385,357],{},[334,387,341],{},[334,389,344],{},[334,391,392,395,396,379],{},[14,393,394],{},"minLng,minLat,maxLng,maxLat",". When present, overrides ",[14,397,338],{},[313,399,400,405,408,412],{},[334,401,402],{},[14,403,404],{},"width",[334,406,407],{},"u32",[334,409,410],{},[14,411,267],{},[334,413,414],{},"Image width in pixels. Capped at 4096.",[313,416,417,422,424,428],{},[334,418,419],{},[14,420,421],{},"height",[334,423,407],{},[334,425,426],{},[14,427,297],{},[334,429,430],{},"Image height in pixels. Capped at 4096.",[313,432,433,438,440,445],{},[334,434,435],{},[14,436,437],{},"format",[334,439,341],{},[334,441,442],{},[14,443,444],{},"png",[334,446,447,448,450,451,450,454,450,457,379],{},"One of ",[14,449,444],{},", ",[14,452,453],{},"jpg",[14,455,456],{},"jpeg",[14,458,459],{},"webp",[10,461,462,463,465,466,468,469,379],{},"Either ",[14,464,338],{}," or ",[14,467,357],{}," must be supplied; a request with neither returns ",[14,470,471],{},"400",[56,473,475],{"id":474},"requires-the-native-renderer","Requires the Native Renderer",[10,477,478,480,481,484,485,488,489,492,493,496,497,379],{},[14,479,53],{}," produces a rendered raster, so it needs the native MapLibre renderer and is gated by ",[14,482,483],{},"server.disable_render"," — exactly like ",[14,486,487],{},"\u002Fstyles\u002F{style}\u002Fstatic\u002F...",". When ",[14,490,491],{},"disable_render = true",", the route is ",[19,494,495],{},"not registered"," and returns ",[14,498,499],{},"404",[61,501,505],{"className":502,"code":503,"language":504,"meta":69,"style":69},"language-toml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[server]\ndisable_render = true  # \u002Fog and \u002Fstyles\u002F{style}\u002Fstatic\u002F... are removed\n","toml",[14,506,507,518],{"__ignoreMap":69},[78,508,509,512,515],{"class":80,"line":81},[78,510,511],{"class":95},"[",[78,513,514],{"class":91},"server",[78,516,517],{"class":95},"]\n",[78,519,520,524,526,530],{"class":80,"line":88},[78,521,523],{"class":522},"sTEyZ","disable_render ",[78,525,220],{"class":95},[78,527,529],{"class":528},"sfNiH"," true",[78,531,532],{"class":84},"  # \u002Fog and \u002Fstyles\u002F{style}\u002Fstatic\u002F... are removed\n",[56,534,536],{"id":535},"limits","Limits",[538,539,540,544],"ul",{},[541,542,543],"li",{},"Maximum dimensions: 4096×4096 pixels (enforced by the shared render options validator).",[541,545,546,547,549,550,549,552,554],{},"Default format is PNG; ",[14,548,453],{},"\u002F",[14,551,456],{},[14,553,459],{}," are also supported.",[556,557,558],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":69,"searchDepth":88,"depth":88,"links":560},[561,562,563,564],{"id":58,"depth":88,"text":59},{"id":304,"depth":88,"text":305},{"id":474,"depth":88,"text":475},{"id":535,"depth":88,"text":536},"Generate social-card map images (default 1200x630) from any style","md",{},"\u002Fguides\u002Fog-images",{"title":5,"description":565},"4.guides\u002F19.og-images","pZdHw40Umvtb-qk8K5hSBu2rrO_5V5Io8skAJTibCGQ",1794150613984]