const ACCESS_TOKEN = props.accessToken || "pk.eyJ1IjoiZWpsYnJhZW0iLCJhIjoiY2xrbmIwaW53MGE0NTNtbGsydWd2MmpyZSJ9.m1ZfEqv2fGet2zblGknT8A"; const styleUrl = props.styleUrl || "mapbox://styles/mapbox/streets-v12"; // see https://docs.mapbox.com/api/maps/styles/#mapbox-styles const center = props.center || [-87.6298, 41.8781]; // starting position [lng, lat] const zoom = props.zoom || 9; // starting zoom const markers = props.markers || []; // map markers, array of objects that look like: { lng: -87.641, lat: 41.874 } const code = ` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet"> <script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script> <style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } .marker { background-image: url('https://humans.nearverselabs.com/Human.png'); background-size: cover; width: 27px; height: 34px; border-radius: 50%; cursor: pointer; } </style> </head> <body> <div id="map"></div> <script> mapboxgl.accessToken = "${ACCESS_TOKEN}"; const map = new mapboxgl.Map({ container: 'map', // container ID style: '${styleUrl}', center: [${center[0]}, ${center[1]}], zoom: ${zoom} }); // Function to populate markers to the map function populateMarkers() { const markersData = ${JSON.stringify(markers)}; console.log(markersData,"==>markersData"); const el = document.createElement('div'); el.className = 'marker'; markersData.forEach(marker => { new mapboxgl.Marker(el) .setLngLat([marker.longitude, marker.latitude]) .setPopup( new mapboxgl.Popup({ offset: 25 }) // add popups .setHTML( <div style="padding: 20px;"> tiltle </div> ) ).addTo(map); }); } populateMarkers(); </script> </body> </html> `; const Container = styled.div` height: 100vh; `; return ( <Container> <iframe className="w-100 h-100" srcDoc={code} /> </Container> );