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 icon = ` <svg width="27" height="34" viewBox="0 0 27 34" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M9.18848 17.4881C9.18848 16.2516 10.187 15.2492 11.4187 15.2492H17.1665C18.3982 15.2492 19.3967 16.2516 19.3967 17.4881V31.7611C19.3967 32.9976 18.3982 34 17.1665 34H11.4187C10.187 34 9.18848 32.9976 9.18848 31.7611V17.4881Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M17.1665 15.8169H11.4187C10.4993 15.8169 9.75393 16.5651 9.75393 17.4881V31.7611C9.75393 32.6841 10.4993 33.4324 11.4187 33.4324H17.1665C18.0859 33.4324 18.8313 32.6841 18.8313 31.7611V17.4881C18.8313 16.5651 18.0859 15.8169 17.1665 15.8169ZM11.4187 15.2492C10.187 15.2492 9.18848 16.2516 9.18848 17.4881V31.7611C9.18848 32.9976 10.187 34 11.4187 34H17.1665C18.3982 34 19.3967 32.9976 19.3967 31.7611V17.4881C19.3967 16.2516 18.3982 15.2492 17.1665 15.2492H11.4187Z" fill="#323232"></path><path d="M9.73924 27.2597V21.4476H19.4372C18.7067 24.428 14.3515 27.4206 9.73924 27.2597Z" fill="#7E7E7E" fill-opacity="0.45"></path><path d="M8.48168 14.7069C8.48168 16.5487 6.83615 18.0417 4.80628 18.0417C2.77642 18.0417 1.13089 16.5487 1.13089 14.7069C1.13089 12.8651 2.77642 11.372 4.80628 11.372C6.83615 11.372 8.48168 12.8651 8.48168 14.7069Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.80628 17.4741C6.579 17.4741 7.91623 16.1825 7.91623 14.7069C7.91623 13.2312 6.579 11.9396 4.80628 11.9396C3.03357 11.9396 1.69634 13.2312 1.69634 14.7069C1.69634 16.1825 3.03357 17.4741 4.80628 17.4741ZM4.80628 18.0417C6.83615 18.0417 8.48168 16.5487 8.48168 14.7069C8.48168 12.8651 6.83615 11.372 4.80628 11.372C2.77642 11.372 1.13089 12.8651 1.13089 14.7069C1.13089 16.5487 2.77642 18.0417 4.80628 18.0417Z" fill="#323232"></path><path d="M19.6492 14.7069C19.6492 16.5487 21.2947 18.0417 23.3246 18.0417C25.3545 18.0417 27 16.5487 27 14.7069C27 12.8651 25.3545 11.372 23.3246 11.372C21.2947 11.372 19.6492 12.8651 19.6492 14.7069Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M23.3246 17.4741C21.5519 17.4741 20.2147 16.1825 20.2147 14.7069C20.2147 13.2312 21.5519 11.9396 23.3246 11.9396C25.0973 11.9396 26.4346 13.2312 26.4346 14.7069C26.4346 16.1825 25.0973 17.4741 23.3246 17.4741ZM23.3246 18.0417C21.2947 18.0417 19.6492 16.5487 19.6492 14.7069C19.6492 12.8651 21.2947 11.372 23.3246 11.372C25.3545 11.372 27 12.8651 27 14.7069C27 16.5487 25.3545 18.0417 23.3246 18.0417Z" fill="#323232"></path><path d="M23.7487 13.7253C23.7487 20.1935 20.3273 23.7638 14.1404 23.7638C7.95347 23.7638 4.3822 20.1935 4.3822 13.7253C4.3822 7.25719 7.95347 0.2068 14.1404 0.2068C20.3273 0.2068 23.7487 7.25719 23.7487 13.7253Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M20.857 20.7768C22.3542 19.213 23.1832 16.8634 23.1832 13.7253C23.1832 10.5808 22.3494 7.31081 20.7875 4.84511C19.2306 2.38743 16.9876 0.77444 14.1404 0.77444C11.2908 0.77444 9.00933 2.39008 7.41517 4.85005C5.81668 7.31671 4.94764 10.5854 4.94764 13.7253C4.94764 16.8571 5.81073 19.2063 7.34439 20.7721C8.87678 22.3367 11.1542 23.1962 14.1404 23.1962C17.1261 23.1962 19.3631 22.3371 20.857 20.7768ZM14.1404 23.7638C20.3273 23.7638 23.7487 20.1935 23.7487 13.7253C23.7487 7.25719 20.3273 0.2068 14.1404 0.2068C7.95347 0.2068 4.3822 7.25719 4.3822 13.7253C4.3822 20.1935 7.95347 23.7638 14.1404 23.7638Z" fill="#323232"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M14.2147 15.6862C14.3647 15.7297 14.4511 15.8871 14.4077 16.0377C14.1491 16.9351 14.0136 17.407 13.9966 18.2488C14.2619 18.3452 14.5563 18.3754 15.0526 18.3713C15.2088 18.37 15.3364 18.496 15.3377 18.6527C15.339 18.8095 15.2134 18.9376 15.0573 18.9389C14.4302 18.9441 14.0216 18.8995 13.59 18.6922C13.4918 18.6451 13.4293 18.5455 13.4293 18.4362C13.4293 17.39 13.5841 16.8528 13.8633 15.8841L13.8645 15.8799C13.9079 15.7293 14.0647 15.6426 14.2147 15.6862Z" fill="#323232"></path><path d="M10.1123 16.4841C10.1123 17.1913 9.68401 17.7646 9.15564 17.7646C8.62728 17.7646 8.19895 17.1913 8.19895 16.4841C8.19895 15.7769 8.62728 15.2036 9.15564 15.2036C9.68401 15.2036 10.1123 15.7769 10.1123 16.4841Z" fill="#323232"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M9.94521 17.4747C9.752 17.7333 9.47429 17.9065 9.15564 17.9065C8.83699 17.9065 8.55928 17.7333 8.36607 17.4747C8.17289 17.2161 8.05759 16.8654 8.05759 16.4841C8.05759 16.1027 8.17289 15.752 8.36607 15.4935C8.55928 15.2349 8.83699 15.0616 9.15564 15.0616C9.47429 15.0616 9.752 15.2349 9.94521 15.4935C10.1384 15.752 10.2537 16.1027 10.2537 16.4841C10.2537 16.8654 10.1384 17.2161 9.94521 17.4747ZM9.15564 17.7646C9.68401 17.7646 10.1123 17.1913 10.1123 16.4841C10.1123 15.7769 9.68401 15.2036 9.15564 15.2036C8.62728 15.2036 8.19895 15.7769 8.19895 16.4841C8.19895 17.1913 8.62728 17.7646 9.15564 17.7646Z" fill="#323232"></path><path d="M9.84104 16.1698C9.84104 16.3265 9.71446 16.4536 9.55831 16.4536C9.40217 16.4536 9.27559 16.3265 9.27559 16.1698C9.27559 16.013 9.40217 15.8859 9.55831 15.8859C9.71446 15.8859 9.84104 16.013 9.84104 16.1698Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M9.9824 16.1698C9.9824 16.4049 9.79253 16.5955 9.55831 16.5955C9.3241 16.5955 9.13423 16.4049 9.13423 16.1698C9.13423 15.9346 9.3241 15.744 9.55831 15.744C9.79253 15.744 9.9824 15.9346 9.9824 16.1698ZM9.55831 16.4536C9.71446 16.4536 9.84104 16.3265 9.84104 16.1698C9.84104 16.013 9.71446 15.8859 9.55831 15.8859C9.40217 15.8859 9.27559 16.013 9.27559 16.1698C9.27559 16.3265 9.40217 16.4536 9.55831 16.4536Z" fill="#323232"></path><path d="M20.2903 16.4841C20.2903 17.1913 19.862 17.7646 19.3337 17.7646C18.8053 17.7646 18.377 17.1913 18.377 16.4841C18.377 15.7769 18.8053 15.2036 19.3337 15.2036C19.862 15.2036 20.2903 15.7769 20.2903 16.4841Z" fill="#323232"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M20.1232 17.4747C19.93 17.7333 19.6523 17.9065 19.3337 17.9065C19.015 17.9065 18.7373 17.7333 18.5441 17.4747C18.3509 17.2161 18.2356 16.8654 18.2356 16.4841C18.2356 16.1027 18.3509 15.752 18.5441 15.4935C18.7373 15.2349 19.015 15.0616 19.3337 15.0616C19.6523 15.0616 19.93 15.2349 20.1232 15.4935C20.3164 15.752 20.4317 16.1027 20.4317 16.4841C20.4317 16.8654 20.3164 17.2161 20.1232 17.4747ZM19.3337 17.7646C19.862 17.7646 20.2903 17.1913 20.2903 16.4841C20.2903 15.7769 19.862 15.2036 19.3337 15.2036C18.8053 15.2036 18.377 15.7769 18.377 16.4841C18.377 17.1913 18.8053 17.7646 19.3337 17.7646Z" fill="#323232"></path><path d="M20.019 16.1698C20.019 16.3265 19.8925 16.4536 19.7363 16.4536C19.5802 16.4536 19.4536 16.3265 19.4536 16.1698C19.4536 16.013 19.5802 15.8859 19.7363 15.8859C19.8925 15.8859 20.019 16.013 20.019 16.1698Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M12.9676 20.0926C13.0884 19.9934 13.2665 20.0113 13.3654 20.1326C13.5512 20.3605 13.88 20.6232 14.2514 20.6974C14.5931 20.7656 15.0216 20.6855 15.4723 20.1326C15.5712 20.0113 15.7493 19.9934 15.8701 20.0926C15.991 20.1919 16.0088 20.3707 15.9099 20.492C15.3428 21.1879 14.7111 21.368 14.141 21.2541C13.6007 21.1462 13.1661 20.7844 12.9278 20.492C12.8289 20.3707 12.8467 20.1919 12.9676 20.0926Z" fill="#323232"></path><path d="M9.75393 19.4356C9.75393 19.8666 9.15268 20.2161 8.411 20.2161C7.66931 20.2161 7.06806 19.8666 7.06806 19.4356C7.06806 19.0045 7.66931 18.6551 8.411 18.6551C9.15268 18.6551 9.75393 19.0045 9.75393 19.4356Z" fill="#E8E8E8"></path><path d="M20.9215 19.4356C20.9215 19.8666 20.3202 20.2161 19.5785 20.2161C18.8369 20.2161 18.2356 19.8666 18.2356 19.4356C18.2356 19.0045 18.8369 18.6551 19.5785 18.6551C20.3202 18.6551 20.9215 19.0045 20.9215 19.4356Z" fill="#E8E8E8"></path><path d="M4.52355 11.6558C4.29168 8.52339 7.28011 1.90971 9.89529 1.27111C9.89529 1.27111 17.6702 -3.05364 21.5935 4.25123C25.5169 11.5561 23.0419 18.5132 23.0419 18.5132C20.9921 16.3845 21.8403 15.7002 21.5935 12.9752C17.2461 15.4164 13.288 14.8488 10.6021 12.2944C9.61256 14.3521 7.84555 14.7778 7.31603 14.7778C7.61956 16.5252 5.93717 18.0165 5.15968 18.4422C4.34627 16.4555 4.69644 14.5656 4.52355 11.6558Z" fill="#323232"></path><path d="M4.67989 6.74722C4.75008 3.03631 7.76678 0.0648573 11.464 0.0648573H16.8502C20.5308 0.0648573 23.5403 3.01049 23.6334 6.70414L23.7487 11.2757H4.59424L4.67989 6.74722Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M16.8502 0.632497H11.464C8.07488 0.632497 5.30958 3.35633 5.24524 6.75799L5.17052 10.7081H23.1687L23.0681 6.7185C22.9828 3.33266 20.2241 0.632497 16.8502 0.632497ZM23.6334 6.70414C23.5403 3.01049 20.5308 0.0648573 16.8502 0.0648573H11.464C7.76678 0.0648573 4.75008 3.03631 4.67989 6.74722L4.59424 11.2757H23.7487L23.6334 6.70414Z" fill="#323232"></path><path d="M9.75393 4.74788C9.75393 2.23989 11.7792 0.206767 14.2775 0.206767Lnan nanL14.2775 0.206767C16.7758 0.206767 18.801 2.23989 18.801 4.74788V11.2757H9.75393V4.74788Z" fill="#323232" fill-opacity="0.38"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2356 10.7081V4.74788C18.2356 2.55339 16.4635 0.774406 14.2775 0.774406C12.0915 0.774406 10.3194 2.55339 10.3194 4.74788V10.7081H18.2356ZM14.2775 0.206767C11.7792 0.206767 9.75393 2.23989 9.75393 4.74788V11.2757H18.801V4.74788C18.801 2.23989 16.7758 0.206767 14.2775 0.206767Z" fill="#323232"></path><path d="M-nan -nanC-nan -nan 0.253158 10.7538 0.565445 10.7538C0.565444 10.7538 0.565446 10.7538 0.565445 10.7538H23.6073V11.3214H0L-nan -nanZ" fill="#323232"></path></svg> `; 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('mapbox-icon.png'); background-size: cover; width: 50px; height: 50px; 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)}; const el = document.createElement('div'); el.className = 'marker'; el.innerHTML = ${icon}; markersData.forEach(marker => { new mapboxgl.Marker(el) .setLngLat([marker.lng, marker.lat]) .addTo(map); }); } populateMarkers(); </script> </body> </html> `; const Container = styled.div` height: 100vh; `; return ( <Container> <iframe className="w-100 h-100" srcDoc={code} /> </Container> );