Tencent Maps JSAPI GL Development
Paste the following prompt into your AI chat to install this skill:
Please install @tencent-adm/tencentmap-jsapi-gl-skill using https://skillhub.cn/install/skillhub.md.
About this skill
Problem
Tencent Maps JSAPI GL development is not only about creating a map instance. Teams often run into exposed Keys, inconsistent coordinate systems, wrong extra library loading, uncertain visualization data formats, and missing HTML error handling for container absence, CDN failure, or unsupported WebGL. This skill organizes those constraints into documentation, examples, and a safe workflow.
How It Works
- Classify the request as base maps or data visualization, then search
references/jsapigl/docs/orreferences/visualization/docs/. - Confirm classes, properties, events, and parameters using docs such as markers, heatmaps, arc lines, models, or GeoJSON/MVT layers.
- Locate runnable HTML examples from 129 JS API demos and 44 visualization demos to validate data shape.
- Handle Keys by saving a user-supplied Key, guiding users to a temporary Key when needed, or switching candidates on failure.
- When generating HTML, check
map.qq.com/api/gljsloading, fixed container size,TMapnamespace, and proxying guidance for plaintext Key risk.
Boundaries and Notes
Use it for Tencent Maps JSAPI GL, not other map SDKs. Coordinates should be GCJ-02; convert WGS-84 or BD09 first. Load extra libraries with the libraries URL parameter, such as model, weather, or visualization. Browsers need WebGL support, and generated code should handle missing containers, CDN errors, and unsupported browsers.
Use Cases
- Frontend engineers add markers, info windows, and custom DOM overlays to a page with Tencent Maps JSAPI GL, validating parameters against demos.
- Data product engineers render store locations and sales as heatmap, scatter, or trajectory layers while checking data formats and layering.
- Full-stack developers move Keys behind an Nginx proxy to avoid plaintext exposure in HTML and run the HTML key-safety check.
- Frontend engineers add fallback messages for missing map containers, CDN load failures, and unsupported WebGL browsers after generating map HTML.
Best For
- Frontend engineers building web map pages: they need TMap marker, control, and info-window APIs with examples.
- Data or GIS engineers creating BI map dashboards: they need data formats and events for heatmap, arc, and area layers.
- Full-stack engineers hardening map pages: they want JSAPI Keys proxied instead of embedded in HTML.
- Product engineers maintaining internal tools: they need HTML map pages with error handling and fixed layout.
Related Skills
A systematic code error fixing skill that follows a five-step workflow: Reproduce, Isolate, Understand, Fix, Verify, to help developers resolve code errors.
Supports inline SVG/HTML rendering and Mermaid code output, covering common technical diagram creation like architecture and flow diagrams.
Publish HTML, static assets, or build output as a public link, with account management, update, deletion, and AI safety review.
A comprehensive browser automation guide covering navigation, interaction, multi-tab management, and data collection, tailored for domestic web ecosystems and tools like Playwright/Selenium.