Mapzone WebGL

Import Mapzone WebGL API to your project.

Installation

React

Import the library in your React project.

    npm install @mapzone/mapzone-gl-js

Import the library in your React component.

    import vietmapgl from "@mapzone/mapzone-gl-js/dist/vietmap-gl";
    import '@mapzone/mapzone-gl-js/dist/vietmap-gl.css';

Init the map in your component.

  const [map, setMap] = useState<vietmapgl.Map | null>(null);
    useEffect(() => {
    if (!mapContainerRef.current) return;
    
    // Get API key from environment variables
    const apiKey = import.meta.env.VITE_VIETMAP_API_KEY || '';
    
    const mapInstance = new vietmapgl.Map({
      container: mapContainerRef.current,
      style: MAPZONE_STYLE_URL, // Use the MapZone style URL
      center: [106.6755666, 10.7588867], // Vietnam centered
      zoom: 12,
    });
    
    mapInstance.addControl(new vietmapgl.NavigationControl(), 'top-right');
    
    // Wait for map to load
    mapInstance.on('load', () => {
      setMap(mapInstance);
    });
    
    // Clean up on unmount
    return () => {
      mapInstance.remove();
    };
  }, []);

Add Marker

    const marker = new vietmapgl.Marker()
    .setLngLat([106.6755666, 10.7588867])
    .addTo(map);

Add Popup

    const popup = new vietmapgl.Popup()
    .setLngLat([106.6755666, 10.7588867])
    .setHTML('<h1>Hello Vietmap</h1>')
    .addTo(map);

Move the map

    map.flyTo({
    center: [106.6755666, 10.7588867],
    zoom: 12,
    duration: 1000,
    });

HTML

Add the following code to your HTML file.

    <script src="https://unpkg.com/@mapzone/[email protected]/dist/vietmap-gl.js"></script>
    <link href="https://unpkg.com/@mapzone/[email protected]/dist/vietmap-gl.css" rel="stylesheet" />