react-maptalks-ts

React-maptalks

This is a beta version for the maptalks integration with ReactJS

Example

Importing components

import { MapComponent } from 'react-maptalks-ts'

You can import the types too for use it in Typescript. All types init with "I" to indicate that is an interface. ( IMapOptions, IMapContextProps, IImageSymbolOptions, IGeometrySymbolOptions, IMapProps, ILineVectorLayerProps, IMarkerOptions, IPointVectorLayerProps, IPolygonVectorLayerProps )

For example:

import {IMapOptions, ...} from 'react-maptalks-ts'

Init map:

export default function App() {

    //Use state to manage the map options and save the map instance.
    const [mapOptions, setMapOptions] = useState<IMapOptions>()
    const [map, setMap] = useState<maptalks.Map>()

    //set options to the new map instance for this component
    useEffect(() => {
        setMapOptions({
            center : [-76.4, 3.4],
            zoom : 17,
            baseLayer : new maptalks.TileLayer('base', {
                urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
                subdomains: ["a","b","c","d"],
                attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            })
        })
    }, [])

    // return the map instance to save in the state
    const getMap = (map : maptalks.Map) => {
        setMap(map)
    }

    return (
    <MapContextComponent>
        <div className="mapContainer" >
            <MapComponent
                mapOptions={mapOptions}
                className = "map" // Create many maps with diferent className
                getMap={getMap}>
            </MapComponent>
        </div>
    </MapContextComponent>
  );
}

Adding layers:

Defining a Geojson layer (can be points, lines or polygons):

.
.
.
import { IFeatureCollection } from 'react-maptalks-ts'

let pointLayer : IFeatureCollection = {
    type: "FeatureCollection",
    id : "points_1",
    features : [
        {
            type: "Feature",
            id: "1",
            geometry: {
                type: "Point",
                coordinates: [-76.401, 3.4]
            },
            properties: {"prop0": "value0"}
        }
    ]
}
.
.
.

import { IFeatureCollection, IMarkerOptions } from 'react-maptalks-ts'
.
.
.
let markers: IMarkerOptions[] = [
    {
        id : '1-markers',
        coordinates : [-76.4, 3.4]
    },
    {
        id : '2-markers',
        coordinates : [-76.45, 3.45],
        geometrySymbolOptions : {
            'markerType': 'diamond',
            'markerFill': 'rgb(135,196,240)',
            'markerFillOpacity': 1,
            'markerLineColor': '#34495e',
            'markerLineWidth': 3,
            'markerLineOpacity': 1,
            'markerLineDasharray':[],
            'markerWidth': 40,
            'markerHeight': 40,
            'markerDx': 0,
            'markerDy': 0,
            'markerOpacity' : 1
        }
    },
    {
        id : '3-markers',
        coordinates : [-76.454, 3.454],
        imageSymbolOptions : {
            markerFile   : logo,
            markerWidth  : 50,
            markerHeight : 50
        }
    }
]
.
.
.

Now use it like Map Component´s children:

    .
    .
    .
    <MapComponent
        mapOptions={mapOptions}
        className = "map"
        getMap={getMap}>
        <>
            {
                markers.length > 0 &&
                markers.map(marker => <MarkerComponent
                    key = {marker.id}
                    id={marker.id}
                    coordinates={marker.coordinates}
                    geometrySymbolOptions={marker.geometrySymbolOptions}
                    imageSymbolOptions={marker.imageSymbolOptions}/>)
            }
        </>
        <PointVectorLayer
            points={pointLayer}
            styles={{
            markerFile   : logo,
            markerWidth  : 50,
            markerHeight : 50
        }} idLayer="example"/>
    </MapComponent>
    .
    .
    .

Handle map

You can update the map state, fire events and access to map object using the map instance and the maptalks guidelines:

    const onClickSetLocation = () =>{
        if(map && map.options){
            map.panTo(
                new Coordinate(-76.4 + Math.random()*0.05, 3.4+ Math.random()*0.05),
                {
                    animation: true,
                    duration : 600
                }
            )
        }
    }

now add a new button to fire this event:

    <MapContextComponent>
        <div className="mapContainer" >
            <button
                onClick={onClickSetLocation}>
                relocate map
            </button>
            .
            .
            .
        </div>
    <MapContextComponent>