ola-maps-react/dist/index.es.js

A simple react component to use Ola maps in your react applications

import e,{useState as t,useEffect as l}from"react";import a from"@deck.gl/react";import i from"react-map-gl";import n from"maplibre-gl";import"maplibre-gl/dist/maplibre-gl.css";const r=({zoom:r,center:o,heading:s,tilt:c,apiKey:m,children:p})=>{const[d,g]=t({longitude:o.lng,latitude:o.lat,zoom:r,bearing:s,pitch:c}),[u,h]=t(m||null),[v,f]=t(null);return l((()=>{if(!m)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})();h(e)}catch(e){f(e.message)}}),[m]),l((()=>{g({longitude:o.lng,latitude:o.lat,zoom:r,bearing:s,pitch:c})}),[r,o,s,c]),v?e.createElement("div",null,v):u?e.createElement("div",{style:{width:"100%",height:"100%",position:"relative"}},e.createElement(a,{viewState:d,onViewStateChange:({viewState:e})=>g(e),controller:{doubleClickZoom:!1},layers:[]},e.createElement(i,{mapLib:n,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=${u}`:`&api_key=${u}`,resourceType:t})},p))):e.createElement("div",null,"Loading...")};r.defaultProps={zoom:15,center:{lat:13.1362,lng:78.1291},heading:0,tilt:0};const o=({position:t,name:l,children:a})=>e.createElement(i,{latitude:t.lat,longitude:t.lng},a||e.createElement("div",{style:{textAlign:"center"}},e.createElement("img",{src:"https://raw.githubusercontent.com/niranjanjgowda/SVGs/c846a45a60572886c1a418ff29f827ae09fdb188/poi.svg",alt:"POI Icon",style:{width:"24px",height:"24px"}}),l&&e.createElement("div",null,l)));export{r as Map,o as Marker};