https://libregl.vercel.app/assets/geolocate-B2wuANwE.js

1import{p as r,ac as i,a3 as l,k as c,al as d,j as e,n as t,o as u,Z as h}from"./app-BH05hVYy.js";const p={class:"markdown-body"},m={title:"GeolocateControl",metadata:{title:"GeolocateControl",description:"The GeolocateControl allows users to center the map on their current location."},meta:[{property:"og:title",content:"GeolocateControl"}]},v="",k=r({__name:"geolocate",setup(g,{expose:n}){return i({title:"GeolocateControl",meta:[{property:"og:title",content:"GeolocateControl"}]}),n({frontmatter:{title:"GeolocateControl",metadata:{title:"GeolocateControl",description:"The GeolocateControl allows users to center the map on their current location."},meta:[{property:"og:title",content:"GeolocateControl"}]},excerpt:void 0}),(f,o)=>{const a=l("example"),s=l("wrapper");return h(),c(s,{frontmatter:m},{default:d(()=>[e("div",p,[o[0]||(o[0]=e("p",null,[t("The "),e("em",null,"GeolocateControl"),t(" allows users to center the map on their current location.")],-1)),o[1]||(o[1]=e("p",null,"It adds a button to the map interface, which when clicked, uses the browser’s geolocation API to obtain the user’s position and pans the map to that location.",-1)),o[2]||(o[2]=e("p",null,"This control is particularly useful for applications that involve user-specific location data, such as local search, tracking, or navigation.",-1)),o[3]||(o[3]=e("p",null,[e("strong",null,"Reference"),t(": "),e("a",{href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/GeolocateControl"},"GeolocateControl")],-1)),o[4]||(o[4]=e("h2",{id:"usage",tabindex:"-1",class:"heading group relative flex items-center capitalize tracking-tight -ml-4 pl-4"},[e("a",{class:"header-anchor",href:"#usage"},[e("div",{"aria-hidden":"true",class:"absolute items-center group-hover:flex hidden mr-1 -left-2 top-0 bottom-0 m-auto"},[e("svg",{class:"w-5 h-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M7 20l4-16m2 16l4-16M6 9h14M4 15h14"})])])]),t(" Usage")],-1)),o[5]||(o[5]=e("p",null,[t("The "),e("em",null,"GeolocateControl"),t(" is simple to integrate, and it provides an intuitive way for users to interact with the map based on their real-time geographic location.")],-1)),o[6]||(o[6]=e("p",null,"You can customize its position on the map, and the control will automatically zoom and center the map once the user’s location is found.",-1)),u(a,{id:"controls/geolocate"}),o[7]||(o[7]=e("h2",{id:"api",tabindex:"-1",class:"heading group relative flex items-center capitalize tracking-tight -ml-4 pl-4"},[e("a",{class:"header-anchor",href:"#api"},[e("div",{"aria-hidden":"true",class:"absolute items-center group-hover:flex hidden mr-1 -left-2 top-0 bottom-0 m-auto"},[e("svg",{class:"w-5 h-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M7 20l4-16m2 16l4-16M6 9h14M4 15h14"})])])]),t(" API")],-1)),o[8]||(o[8]=e("h3",{id:"props",tabindex:"-1",class:"heading group relative flex items-center capitalize tracking-tight -ml-4 pl-4"},[e("a",{class:"header-anchor",href:"#props"},[e("div",{"aria-hidden":"true",class:"absolute items-center group-hover:flex hidden mr-1 -left-2 top-0 bottom-0 m-auto"},[e("svg",{class:"w-5 h-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M7 20l4-16m2 16l4-16M6 9h14M4 15h14"})])])]),t(" Props")],-1)),o[9]||(o[9]=e("p",null,[t("The "),e("em",null,"GeolocateControl"),t(" component’s props.")],-1)),o[10]||(o[10]=e("table",null,[e("thead",null,[e("tr",null,[e("th",null,"Prop"),e("th",null,"Description"),e("th",null,"Type")])]),e("tbody",null,[e("tr",null,[e("td",null,"position"),e("td",null,"A position defintion for the control to be placed, can be in one of the corners of the map. When two or more controls are places in the same location they are stacked toward the center of the map."),e("td",null,[e("em",null,"Optional"),t(),e("a",{href:"https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/ControlPosition"},"ControlPosition")])]),e("tr",null,[e("td",null,"positionOptions"),e("td",null,[t("A Geolocation API "),e("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions"},"PositionOptions"),t(" object.")]),e("td",null,[e("em",null,"Optional"),t(),e("code",{class:""}

1,"{ enableHighAccuracy: false, timeout: 6000 }")])]),e("tr",null,[e("td",null,"fitBoundsOptions"),e("td",null,[t("A options object to use when the map is panned and zoomed to the user’s location. The default is to use a "),e("code",{class:""},"maxZoom"),t(" of 15 to limit how far the map will zoom in for very accurate locations.")]),e("td",null,[e("em",null,"Optional"),t(),e("a",{href:"https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/FitBoundsOptions"},"FitBoundsOptions"),t(" default is "),e("code",{class:""},"{ maxZoom: 15 }")])]),e("tr",null,[e("td",null,"trackUserLocation"),e("td",null,[t("If "),e("code",{class:""},"true"),t(" the "),e("code",{class:""},"GeolocateControl"),t(" becomes a toggle button and when active the map will receive updates to the user’s location as it changes.")]),e("td",null,[e("em",null,"Optional"),t(),e("code",{class:""},"boolean"),t(" default is "),e("code",{class:""},"false")])]),e("tr",null,[e("td",null,"showAccuracyCircle"),e("td",null,[t("By default, if "),e("code",{class:""},"showUserLocation"),t(" is "),e("code",{class:""},"true"),t(", a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user’s location. Set to "),e("code",{class:""},"false"),t(" to disable. Always disabled when "),e("code",{class:""},"showUserLocation"),t(" is "),e("code",{class:""},"false"),t(".")]),e("td",null,[e("em",null,"Optional"),t(),e("code",{class:""},"boolean"),t(" default is "),e("code",{class:""},"true")])]),e("tr",null,[e("td",null,"showUserLocation"),e("td",null,[t("By default a dot will be shown on the map at the user’s location. Set to "),e("code",{class:""},"false"),t(" to disable.")]),e("td",null,[e("em",null,"Optional"),t(),e("code",{class:""},"boolean"),t(" default is "),e("code",{class:""},"true")])])])],-1)),o[11]||(o[11]=e("h3",{id:"events",tabindex:"-1",class:"heading group relative flex items-center capitalize tracking-tight -ml-4 pl-4"},[e("a",{class:"header-anchor",href:"#events"},[e("div",{"aria-hidden":"true",class:"absolute items-center group-hover:flex hidden mr-1 -left-2 top-0 bottom-0 m-auto"},[e("svg",{class:"w-5 h-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[e("path",{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M7 20l4-16m2 16l4-16M6 9h14M4 15h14"})])])]),t(" Events")],-1)),o[12]||(o[12]=e("p",null,[t("The "),e("em",null,"GeolocateControl"),t(" component’s events.")],-1)),o[13]||(o[13]=e("table",null,[e("thead",null,[e("tr",null,[e("th",null,"Name"),e("th",null,"Description"),e("th",null,"Params")])]),e("tbody",null,[e("tr",null,[e("td",null,[e("code",{class:""},"@trackuserlocationend")]),e("td",null,[e("strong",null,"Event"),t(),e("code",{class:""},"trackuserlocationend"),t(" of type "),e("a",{href:"https://maplibre.org/maplibre-gl-js/docs/API/classes/Event"},"Event"),t(" will be fired when the "),e("code",{class:""},"GeolocateControl"),t(" changes to the background state, which happens when a user changes the camera during an active position lock. This only applies when "),e("code",{class:""},"trackUserLocation"),t(" is "),e("code",{class:""},"true"),t(". In the background state, the dot on the map will update with location updates but the camera will not.")]),e("td",null,"-")]),e("tr",null,[e("td",null,[e("code",{class:""},"@trackuserlocationstart")]),e("td",null,[e("strong",null,"Event"),t(),e("code",{class:""},"trackuserlocationstart"),t(" will be fired when the GeolocateControl changes to the active lock state, which happens either upon first obtaining a successful Geolocation API position for the user (a geolocate event will follow), or the user clicks the geolocate button when in the background state which uses the last known position to recenter the map and enter active lock state (no geolocate event will follow unless the users’s location changes).")]),e("td",null,"-")]),e("tr",null,[e("td",null,[e("code",{class:""},"@userlocationlostfocus")]),e("td",null,[e("strong",null,"Event"),t(),e("code",{class:""},"userlocationlostfocus"),t(" will be fired when the GeolocateControl changes to the background state, which happens when a user changes the camera during an active position lock. This only applies when trackUserLocation is true. In the background state, the dot on the map will update with location updates but the camera will not.")]),e("td",null,"-")]),e("tr",null,[e("td",null,[e("code",{class:""},"@userlocationfocus")]),e("td",null,[e("strong",null,"Event"),t(),e("code",{class:""},"userlocationfocus"),t(" will be fired when the GeolocateControl changes to the active lock state, which happens upon the user clicks the geolocate button when in the background state which uses the last known position to recenter the map and enter active lock state.")]),e("td",null,"-")]),e("tr",null,[e("td",null,[e("code",{class:""},"@geolocate")]),e("td",null,[e("strong",null,"Event"),t(),e("code",{class:""},"geolocate"),t(" will be fired on each Geolocation API position update which returned as success. "),e("code",{class:""},"data"),t(" - The returned "),e("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/Position"},"Position"),t(" object from the callback in "),e("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition"},"Geolocation.getCurrentPosition()"),t(" or "),e("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition"},"Geolocation.watchPosition()"),t(".")]),e("td",null,"-")]),e("tr",null,[e("td",null,[e("code",{class:""}

1,"@error")]),e("td",null,[e("strong",null,"Event"),t(),e("code",{class:""},"error"),t(" will be fired on each Geolocation API position update which returned as an error. "),e("code",{class:""},"data"),t(" - The returned "),e("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/PositionError"},"PositionError"),t(" object from the callback in "),e("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition"},"Geolocation.getCurrentPosition()"),t(" or "),e("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition"},"Geolocation.watchPosition()"),t(".")]),e("td",null,"-")]),e("tr",null,[e("td",null,[e("code",{class:""},"@outofmaxbounds")]),e("td",null,[e("strong",null,"Event"),t(),e("code",{class:""},"outofmaxbounds"),t(" will be fired on each Geolocation API position update which returned as success but user position is out of map "),e("code",{class:""},"maxBounds"),t(". "),e("code",{class:""},"data"),t(" - The returned "),e("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/Position"},"Position"),t(" object from the callback in "),e("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition"},"Geolocation.getCurrentPosition()"),t(" or "),e("a",{href:"https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition"},"Geolocation.watchPosition()"),t(".")]),e("td",null,"-")])])],-1))])]),_:1})}}});

1export{k as default,v as excerpt,m as frontmatter};