map.html

---
layout: page
title: Map
---

<div class="section-title ">
    <h1 class="custom-h1">HuaQiangBei Map (WORK IN PROGRESS)</h1>
</div>
<p class="content-text add-padding-b">
    This is an attempt to map some of the fundamental places in the Shenzhen electronic market. <br> <br>
    The green pins are amongst the most fundamental points, they can be clicked to see images + info. <br> <br>
    Note: your GPS position should appear on the map, but it might not be accurate (or even wrong).
</p>


<div id='container'></div>


<div class="section-title ">
    <h2 class="custom-h1">Acknowledgements</h2>
</div>
<p class="content-text add-padding-b">

    This map exists thanks to other repos/lists, including these:
    <ul> <li>
        <a href="https://github.com/samyk/ScalableHCI.github.io/blob/map-images/map.html">https://github.com/samyk/ScalableHCI.github.io/blob/map-images/map.html</a>
    </li> <li>
        <a href="https://github.com/ScalableHCI/HQB-map">https://github.com/ScalableHCI/HQB-map</a>
    </li> <li>
        <a href="http://dangerousprototypes.com/docs/File:Hqb-map-front.png">http://dangerousprototypes.com/docs/File:Hqb-map-front.png"</a>
    </li> </ul>


    It evolves often so pull requests are very welcome: <br>
    <a href="https://github.com/ScalableHCI/ScalableHCI.github.io/blob/main/map.htmla">https://github.com/ScalableHCI/ScalableHCI.github.io/blob/main/map.html</a>

 <br>
 <br>

    Other great maps exist, for example:
    <ul> <li>
        <a href="https://github.com/Seeed-Studio/MakerCamp/blob/main/map/assets/Makerfaire_HQB_Guide_2025.pdf">https://github.com/Seeed-Studio/MakerCamp/blob/main/map/assets/Makerfaire_HQB_Guide_2025.pdf</a>
    </li> <li>
        <a href="https://bunniefoo.com/bunnie/essential/essential-guide-shenzhen-web.pdf">https://bunniefoo.com/bunnie/essential/essential-guide-shenzhen-web.pdf</a>
    </li> <li>
        <a href="https://www.seeedstudio.com/document/pdf/Shenzhen%20Map%20for%20Makers.pdf">https://www.seeedstudio.com/document/pdf/Shenzhen%20Map%20for%20Makers.pdf</a>
    </li> </ul>
</p>


<!-- Map Script -->
<script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=5a4fd49047dd9371da70daf8dd3be257"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        // Initialize Map
        var map = new AMap.Map('container', {
            resizeEnable: true,
            center: [114.085413, 22.544441],
            zoom: 16,
            lang: 'en'
        });

        // Geolocation Plugin
        AMap.plugin('AMap.Geolocation', function () {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,
                timeout: 10000,
                buttonPosition: 'RB',
                buttonOffset: new AMap.Pixel(10, 20),
                zoomToAccuracy: true,
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition(function (status, result) {
                if (status == 'complete') {
                    onComplete(result)
                } else {
                    onError(result)
                }
            });
        });

        function onComplete(data) {
            // Optional: Update UI with location success
        }

        function onError(data) {
            // Optional: Update UI with location error
        }

        var allMarkers = [
            // Main parts of the symposium tour
            {
                position: [114.08756800938518, 22.54132787092848],
                title: "1) SEG Plaza (L1 + L2 mostly)",
                info: "Electronic components (L1), dev boards + HQB book (L2), etc.",
                images: ["./assets/map/seg_tower.jpg", "./assets/map/seg.jpg", "./assets/map/seg_mj.jpg"]
            },
            {
                position: [114.08703588869457, 22.542319149371928],
                title: "2) Stickers (L2)",
                info: "Here you can even get custom hologram stickers!",
                images: ["./assets/map/stickers.jpg"]
            },
            {
                position: [114.08699608938642, 22.54260653405832],
                title: "3) HQB Museum",
                info: "Great to see how Shenzhen/HQB grew in just a couple of decades.",
                images: ["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTMvrH4V4jB60KjY1pnXVSa6mAm3J-YKtS70A&s"]
            },
            {
                position: [114.08727150078714, 22.543751959061424],
                title: "4) Phone repair alley (L1) + smart glasses (L2) + shanzhai (L3)",
                info: "The repair alley is a bit hidden on the left of L1",
                images: ["./assets/map/shanzhai_summary.jpg"]
            },
            {
                position: [114.08609341194385, 22.541957426813916],
                title: "5) International LED building (L5)",
                info: "There are also lots of cool gadgets on L2 and SMD parts on L1",
                images: ["./assets/map/led_building1.jpg", "./assets/map/led_building2.jpg"]
            },
            {
                position: [114.08610502002784, 22.540922825684046],
                title: "6) Components (L1) + Laptop repair shops (higher floors)",
                info: "Becoming a gadget mall, but has a lot more (PCB analysis, etc)",
                images: ["./assets/map/pcb_analysis.jpg", "./assets/map/smart_glasses2.jpg"]
            },
            {
                position: [114.08645752677745, 22.540228545425126],
                title: "A) Second Hand Components Recycling Basement",
                info: "NO PHOTO HERE: they disassemble and sort parts, you can access it from the metro.",
                images: ["./assets/map/recycle.jpg", "./assets/map/recycle_out.jpg"]
            },
            {
                position: [114.08988797480194, 22.54003721690049],
                title: "B) Smartphones + wearables parts (L2 and more)",
                info: "NO PHOTO HERE: iPhone/Watch haptics, EarPod batteries, iPad screens, etc => hidden elevator!",
                images: ["./assets/map/smartphone_parts.jpg", "./assets/map/smartphone_parts2.jpg"]
            },
            {
                position: [114.09071551556049, 22.540106938214265],
                title: "C) Tool Brothers (L1)",
                info: "Fancy soldering tools there, they speak English!",
                images: ["./assets/map/tools_brothers.jpg"]
            },

            // Extra:
            {
                position: [114.08498483992268, 22.541137251425685],
                title: "Passive component reels",
                images: []
            },
            {
                position: [114.08491519141874, 22.541748362962036],
                title: "Tool building 4th floor",
                images: []
            },
            {
                position: [114.08793505444521, 22.542196699994776],
                title: "Shipping alley",
                images: []
            },
            {
                position: [114.08812285265032, 22.542046376628377],
                title: "Survelance market L5+L6",
                images: []
            },
            {
                position: [114.08807277312897, 22.5425956342888],
                title: "Survelance market L5+L6",
                images: []
            },
            {
                position: [114.08707568800273, 22.542031764685536],
                title: "Cameras L2+L3",
                images: []
            },
            {
                position: [114.0880815250345, 22.541283224249533],
                title: "Wearables Mall",
                images: []
            },

            // General locations
            {
                position: [114.085413, 22.544441],
                title: "HuaQiangBei station",
                images: []
            },
            {
                position: [113.813974, 22.624361],
                title: "Shenzhen Bao'an International Airport",
                anchor: 'bottom-left',
                images: []
            },
            {
                position: [113.941527, 22.311526],
                title: "Hong Kong International Airport",
                labelOffset: [-80, 20],
                images: []
            }
        ];

        // --- HELPER FUNCTIONS ---

        // Helper function to create info window content with images and info
        function createInfoWindowContent(title, images, info) {
            var content = '<div id="infowindow-content-' + Date.now() + '" class="infowindow-content">';
            content += '<h3 class="infowindow-title">' + title + '</h3>';

            if (info) {
                content += '<p class="infowindow-info">' + info + '</p>';
            }

            if (images && images.length > 0) {
                content += '<div class="infowindow-images-container">';
                images.forEach(function (imagePath, index) {
                    var uniqueId = 'img-' + Date.now() + '-' + index;
                    content += '<img id="' + uniqueId + '" src="' + imagePath + '" data-full-image="' + imagePath + '" ';
                    content += 'alt="' + title + '" class="thumbnail-image" ';
                    content += 'onclick="window.openImageModal(\'' + imagePath.replace(/'/g, "\\'") + '\')" />';
                });
                content += '</div>';
            }

            content += '</div>';
            return content;
        }

        // Helper function to create a green marker icon
        function createGreenMarkerIcon() {
            // Create a green marker using AMap Icon with URL-encoded SVG
            var svg = encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="25" height="34" viewBox="0 0 25 34"><path d="M12.5 0C5.596 0 0 5.596 0 12.5c0 7.904 12.5 21.5 12.5 21.5S25 20.404 25 12.5C25 5.596 19.404 0 12.5 0zm0 17c-2.485 0-4.5-2.015-4.5-4.5s2.015-4.5 4.5-4.5 4.5 2.015 4.5 4.5-2.015 4.5-4.5 4.5zm0 2.5C13.88 19.5 15 18.38 15 17s-1.12-2.5-2.5-2.5S10 15.62 10 17s1.12 2.5 2.5 2.5z" fill="#28a745"/></svg>');
            var icon = new AMap.Icon({
                size: new AMap.Size(25, 34),
                image: 'data:image/svg+xml,' + svg,
                imageOffset: new AMap.Pixel(0, 0),
                imageSize: new AMap.Size(25, 34)
            });
            return icon;
        }

        // Function to open image modal (attached to window for global access)
        window.openImageModal = function (imagePath) {
            var modal = document.getElementById('imageModal');
            var modalImg = document.getElementById('modalImage');

            if (!modal) {
                // Create modal if it doesn't exist
                modal = document.createElement('div');
                modal.id = 'imageModal';
                modal.className = 'image-modal';
                modal.onclick = window.closeImageModal;

                var imgContainer = document.createElement('div');
                imgContainer.className = 'image-modal-container';

                var img = document.createElement('img');
                img.id = 'modalImage';
                img.className = 'image-modal-image';

                var closeBtn = document.createElement('span');
                closeBtn.innerHTML = '&times;';
                closeBtn.className = 'image-modal-close';
                closeBtn.onclick = function (e) {
                    e.stopPropagation();
                    window.closeImageModal();
                };

                imgContainer.appendChild(closeBtn);
                imgContainer.appendChild(img);
                modal.appendChild(imgContainer);
                document.body.appendChild(modal);
            }

            modalImg = document.getElementById('modalImage');
            modalImg.src = imagePath;
            modal.classList.add('image-modal-visible');
            document.body.style.overflow = 'hidden'; // Prevent background scrolling
        };

        // Function to close image modal (attached to window for global access)
        window.closeImageModal = function () {
            var modal = document.getElementById('imageModal');
            if (modal) {
                modal.classList.remove('image-modal-visible');
                document.body.style.overflow = 'auto'; // Restore scrolling
            }
        };

        // Track currently open InfoWindow
        var currentInfoWindow = null;

        // Close modal and InfoWindow on Escape key
        document.addEventListener('keydown', function (event) {
            if (event.key === 'Escape') {
                // Close image modal if open
                window.closeImageModal();
                // Close InfoWindow if open
                if (currentInfoWindow) {
                    currentInfoWindow.close();
                    currentInfoWindow = null;
                }
            }
        });

        // Helper function to add click handler to marker
        function addMarkerClickHandler(marker, title, images, info) {
            if ((!images || images.length === 0) && !info) {
                return;
            }

            var infoWindow = new AMap.InfoWindow({
                content: createInfoWindowContent(title, images, info),
                offset: new AMap.Pixel(0, -30)
            });

            marker.on('click', function () {
                if (currentInfoWindow && currentInfoWindow !== infoWindow) {
                    currentInfoWindow.close();
                }
                infoWindow.open(map, marker.getPosition());
                currentInfoWindow = infoWindow;

                setTimeout(function () {
                    var amapInfoWindow = document.querySelector('.amap-info-window');
                    if (amapInfoWindow) {
                        var scrollableDiv = amapInfoWindow.querySelector('.infowindow-content');
                        if (scrollableDiv) {
                            var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
                            var maxHeight = Math.min(viewportHeight * 0.8, 600);
                            scrollableDiv.style.setProperty('max-height', maxHeight + 'px');
                            scrollableDiv.offsetHeight;
                        }
                    }
                }, 300);
            });

            infoWindow.on('close', function () {
                if (currentInfoWindow === infoWindow) {
                    currentInfoWindow = null;
                }
            });
        }

        // Helper function to create marker with optional green color
        function createMarkerWithColor(position, labelConfig, hasImages, isClickable) {
            var markerOptions = {
                map: map,
                position: position,
                label: labelConfig
            };

            if (hasImages) {
                markerOptions.icon = createGreenMarkerIcon();
            }

            var marker = new AMap.Marker(markerOptions);
            return marker;
        }

        // --- MARKER CREATION LOOP ---
        allMarkers.forEach(function (markerData) {
            var images = markerData.images || [];
            var hasImages = images && images.length > 0;
            var info = markerData.info || null;
            var hasInfo = !!info;
            var isClickable = hasImages || hasInfo;

            var labelOffset = markerData.labelOffset || [20, 20];

            var labelConfig = {
                offset: new AMap.Pixel(labelOffset[0], labelOffset[1]),
                content: markerData.title
            };

            if (markerData.anchor) {
                labelConfig.anchor = markerData.anchor;
            }

            var marker = createMarkerWithColor(
                markerData.position,
                labelConfig,
                hasImages,
                isClickable
            );

            if (isClickable) {
                addMarkerClickHandler(marker, markerData.title, images, info);
            }
        });
    });
</script>

<style>
    /* Container heights */
    #container {
        min-height: 800px;
        height: 100%;
        width: 100%;
    }

    /* Style for info window thumbnail images */
    .amap-info-content .thumbnail-image {
        display: inline-block;
        vertical-align: top;
    }

    /* Markers with images (green) should show pointer cursor */
    .amap-marker {
        cursor: pointer;
    }

    /* Ensure InfoWindow can scroll */
    .amap-info-window {
        max-height: 80vh !important;
        overflow: visible !important;
        position: relative !important;
    }

    .amap-info-content {
        max-height: 80vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        position: relative !important;
    }

    /* Ensure InfoWindow container sizes to content */
    .amap-info-window-content-wrapper {
        height: auto !important;
        max-height: 80vh !important;
    }

    /* Make sure the scrollable div inside has proper constraints */
    .amap-info-content>.infowindow-content {
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    /* InfoWindow content styles */
    .infowindow-content {
        padding: 10px;
        max-width: min(520px, 90vw);
        width: min(520px, 90vw);
        min-width: 280px;
        min-height: fit-content;
        max-height: 80vh;
        height: auto;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
    }

    .infowindow-title {
        margin: 0 0 10px 0;
        font-size: 16px;
        font-weight: bold;
        flex-shrink: 0;
    }

    .infowindow-info {
        margin: 0 0 10px 0;
        font-size: 14px;
        color: #666;
        line-height: 1.4;
        flex-shrink: 0;
    }

    .infowindow-images-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start;
        flex: 1;
        min-height: 0;
    }

    /* Thumbnail image styles */
    .thumbnail-image {
        flex: 1 1 240px;
        min-width: 200px;
        max-width: calc(100% - 10px);
        height: 240px;
        object-fit: cover;
        border-radius: 4px;
        cursor: pointer;
        border: 2px solid #ddd;
        transition: transform 0.2s, border-color 0.2s;
    }

    .thumbnail-image:hover {
        transform: scale(1.05);
        border-color: #007bff;
    }

    /* Modal styles */
    .image-modal {
        display: none;
        position: fixed;
        z-index: 10000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        cursor: pointer;
        animation: fadeIn 0.3s;
    }

    .image-modal-visible {
        display: block;
    }

    .image-modal-container {
        position: relative;
        margin: auto;
        padding: 20px;
        max-width: 90%;
        max-height: 90%;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
    }

    .image-modal-image {
        max-width: 100%;
        max-height: 85vh;
        object-fit: contain;
        border-radius: 8px;
        animation: zoomIn 0.3s;
    }

    .image-modal-close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
        z-index: 10001;
        line-height: 1;
    }

    .image-modal-close:hover {
        color: #fff;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes zoomIn {
        from {
            transform: scale(0.8);
        }

        to {
            transform: scale(1);
        }
    }
</style>