Tango UI

0.9.9

Components

Tango Store

Tools

Update Log

MVP Verson: 0.9.9 beta

Get Started

Styles

Theme

Components

State management

Update Log

TangoMapViewer

1.1.0

This is a React map component based on OpenLayers, suitable for React and Next;
(Currently supported map service providers include Amap and OpenStreetMap),
and a unified interface is provided to facilitate developers to integrate map functions.

The maps shown in this document are for development and testing purposes only and are not suitable for production environments or commercial use. If you want to use them in a production environment, please be sure to apply for and use your own map service key! Go to the developer platform（AMap）

Full Demo

How to use？

1.Installation

npm i tango-map-cw @amap/amap-jsapi-loader

* If you want to use the OpenLayers basemap and implement more native OpenLayers features, you need to install additional:

npm i ol

After that, you can use it in TangoMapViewer. Tango-map-cw has exposed the native capabilities of ol to developers, and can directly call all native APIs.

2.Import

// React
import { TangoMapViewer } from "tango-map-cw";

// Next
import dynamic from "next/dynamic";

const TangoMapViewer = dynamic(
  () => import("tango-map-cw").then(mod => mod.TangoMapViewer),
  { ssr: false }
);

3.Usage

To properly call the API, please register as a developer on the AutoNavi Open Platform and apply for a web platform （JS API） key and security key. Go to the developer platform

// provide WGS84
const beijingGugong: [number, number] = [116.390741, 39.917351];

<TangoMapViewer
  provider="amap" // map provider，support amap and ol（OpenStreetMap）
  mapKey="your map key"
  center={beijingGugong}
  zoom={13} // the initial zoom ratio of the map, the zoom size of the map when loading（3-18）
  style={{ width: "600px", height: "400px" }}
/>

Create markers on the map

// provide WGS84

type Marker = {
  id: string | number;
  mark: [number, number]; // [lon, lat]，WGS84
  icon?: {
    url: string; // supports images, but not SVG
    size?: [number, number]; // width, height, icon size
  };
};

// makers array
const markers = [
  {
    id: "point 1",
    mark: [116.390741, 39.917351],
  },
  {
    id: "point 2",
    mark: [116.400741, 39.917351],
  },
  {
    id: "point 3",
    mark: [116.400741, 39.927351],
  },
];

// show on map
<TangoMapViewer
  provider="amap"
  mapKey="your map key"
  center={beijingGugong}
  zoom={13}
  style={{ width: "600px", height: "400px" }}
  markers={markers} // markers array
/>

Creating vector polylines on the map

// provide WGS84

type Line ={
  id: string | number;
  coordinates: number[][];
  strokeColor?: string;
  strokeWidth?: number;
  lineJoin?: "round" | "bevel" | "miter"; // polyline inflection point connection style
}

// array of node coordinates of the polyline
const allLines = [
  {
    id: "userLine1",
    coordinates: [
      [116.397128, 39.926],
      [116.404, 39.914],
      [116.388, 39.92],
      [116.406, 39.921],
      [116.39, 39.913],
      [116.397128, 39.926],
    ],
    strokeWidth: 4, // line width
    strokeColor: "blue", // line color
    lineJoin: "round", // polyline inflection point connection style
  },
];

// show on map
<TangoMapViewer
  provider="amap"
  mapKey="your map key"
  center={beijingGugong}
  zoom={13}
  style={{ width: "600px", height: "400px" }}
  line={allLines} // polylines array
/>

Get location on the map

* Your server must be HTTPS（or localhost）to use this feature, and users need to authorize browser location permissions

<TangoMapViewer
  provider="amap"
  mapKey="your map key"
  center={beijingGugong}
  zoom={13}
  style={{ width: "600px", height: "400px" }}
  location // get the current location and display the positioning button
  onLocate={(data) => { // positioning success callback
    console.log("data ==> ", data);
  }}
/>

* check the print information of successful positioning in the browser console

TangoMapViewer Props

Props	Type	Value	Description	Default Value
provider	String	amap \| ol	map provider（Next support amap，React support amap and ol）	ol
mapKey	String	-	your map key	-
center	Array	-	map center coordinate (WGS84)	-
zoom	Number	-	map initial zoom（3-18）	10
minZoom	Number	-	map minimum zoom（3-18）	3
maxZoom	Number	-	map maximum zoom（3-18）	18
markers	Array	-	map markers array,one marker or more markers	-
location	Boolean	-	enable positioning (currently supports browser positioning based on Amap SDK in mainland China, and supports native positioning in the international market)	false
onLocate	() => void	-	callback after successful positioning (data.position.pos is the coordinate after positioning)	-
viewMode	String	2D \| 3D	map view mode	2D
line	Array	-	the coordinate array of the vector polyline nodes on the map, supporting one or more vector polylines	-
onClick	() => void	-	map click callback	-
style	Object	-	custom map style	-

On this page