ola-maps-react
Version:
A simple react component to use Ola maps in your react applications
2 lines (1 loc) • 1.99 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@deck.gl/react"),a=require("react-map-gl"),l=require("maplibre-gl");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("maplibre-gl/dist/maplibre-gl.css");var i=r(e),n=r(t),o=r(a),s=r(l);const u=({zoom:t,center:a,heading:l,tilt:r,apiKey:u,children:d})=>{const[c,f]=e.useState({longitude:a.lng,latitude:a.lat,zoom:t,bearing:l,pitch:r}),[p,g]=e.useState(u||null),[m,h]=e.useState(null);return e.useEffect((()=>{if(!u)try{const e=(()=>{const e=process.env.REACT_APP_OLA_MAPS_API_KEY;if(!e)throw new Error("OlaMap API key not found. Please set the OLA_MAPS_API_KEY environment variable.");return e})();g(e)}catch(e){h(e.message)}}),[u]),e.useEffect((()=>{f({longitude:a.lng,latitude:a.lat,zoom:t,bearing:l,pitch:r})}),[t,a,l,r]),m?i.default.createElement("div",null,m):p?i.default.createElement("div",{style:{width:"100%",height:"100%",position:"relative"}},i.default.createElement(n.default,{viewState:c,onViewStateChange:({viewState:e})=>f(e),controller:{doubleClickZoom:!1},layers:[]},i.default.createElement(o.default,{mapLib:s.default,mapStyle:"https://api.olamaps.io/tiles/vector/v1/styles/default-light-standard/style.json",transformRequest:(e,t)=>({url:e+="https://api.olamaps.io/tiles/vector/v1/styles/default-light-standard/style.json"===e?`?api_key=${p}`:`&api_key=${p}`,resourceType:t})},d))):i.default.createElement("div",null,"Loading...")};u.defaultProps={zoom:15,center:{lat:13.1362,lng:78.1291},heading:0,tilt:0};exports.Map=u,exports.Marker=({position:e,name:t,children:a})=>i.default.createElement(o.default,{latitude:e.lat,longitude:e.lng},a||i.default.createElement("div",{style:{textAlign:"center"}},i.default.createElement("img",{src:"https://raw.githubusercontent.com/niranjanjgowda/SVGs/c846a45a60572886c1a418ff29f827ae09fdb188/poi.svg",alt:"POI Icon",style:{width:"24px",height:"24px"}}),t&&i.default.createElement("div",null,t)));