react-alkmaps

react-alkmaps

For full library documentation visit this site

For suggestions / request features / bugs please ping us on gitter

Features added

• Multiple Layer Support
• Adding Vector Layer
• Adding Vector Points to Vector Layer- Vector point , external image and svg supprot
• Adding Marker Layer
• Adding Marker to Marker Layer - hover only,(popup and click events in next release)

Install

npm install --save react-alkmaps

Usage

State data

this.state = {
      scriptLoaded: false,
      scriptError: false,
      config: {
        onLoad: this.onLoad,
        onError: this.onError,
        // url="https://maps.alk.com/api/1.2/alkmaps.js"
        apikey: "",
        center: { lat: -74.655522, long: 40.367494 },
        zoom: 9
      },
      markers: {
        marker: {
          latlong: { lat: -73.655522, long: 40.667494 },
          data: {
            label: "New Marker",
            mouseOver: true
          }
        }
      },
      vectors: {
        svgVector: {
          latlong: { lat: -73.965522, long: 40.367494 },
          type: "svg",
          data: {
             svg:
          "<svg xmlns='http://www.w3.org/2000/svg' >" +
          "<circle id='svgCircle' stroke='black' fill='yellow' cx='16'" +
          "cy='16' r='16' /><text id='svgText' x='16' y='20'" +
          "font-size='10pt' font-family='arial' font-weight='bold'" +
          "text-anchor='middle' fill='black' >svg</text></svg>"
          }
        },
        vector: {
          latlong: { lat: -74.655522, long: 40.367494 },
          data: {
            pointRadius: 10,
            fillColor: "red",
            label: "Vector Point",
            labelYOffset: 20,
            fontWeight: "bold",
            fontColor: "#0000AA"
          }
        },
        imageVector: {
          latlong: { lat: -73.655522, long: 40.367494 },
          data: {
            externalGraphic: "https://www.w3schools.com/w3css/img_avatar3.png",
            graphicHeight: 27,
            graphicWidth: 32,
            label: "External Image",
            labelYOffset: 20
          }
        }
      }
    };
  }

import React, { Component } from "react";

import ReactAlkMaps, { VectorLayer, VectorPoint } from "react-alkmaps";

class Example extends Component {
  constructor(props) {
    super(props);
  }
  onLoad = map => {
    this.setState({
      scriptLoaded: true
    });
  };
  onError = error => {
    this.setState({
      scriptError: true
    });
  };
  render() {
    const { vectorPointData, config } = this.state;
    return (
      <div>
        <ReactAlkMaps {...config}>
          <VectorLayer label="VectorLayer">
            <VectorPoint {...vectors.vector} />
          </VectorLayer>
          <VectorLayer label="VectorLayer">
            <VectorPoint {...vectors.imageVector} />
            <VectorPoint {...vectors.svgVector} />
          </VectorLayer>

          <MarkerLayer label="MarkerLayer1">
            <Marker {...markers.marker} />
          </MarkerLayer>
        </ReactAlkMaps>
      </div>
    );
  }
}

Props

| Field | Type | Default | Description | | ------- | --------------- | :--------: | :-----------------------: | | onLoad | func | | Invoked after script load | | onError | func | | Invoked after script fail | | url | optional string | AlkMaps V2 | AlkMaps URL | | apikey | string | | AlkMaps API key |

| Field | Type | Default | Description | | ----- | ------ | :----------: | :---------------: | | label | string | Vector Layer | Vector Layer name |

| Field | Type | Default | Description | | ------- | -------------------- | :----------------------------------------------------------------: | :--------------------------------: | | latlong | object | | Vector Layer name | | type | undefined or svg | undefined | Vector drawing type | | data | svg | undefined OR {svg: svgContent} | To draw using svg content | | | image | {externalGraphic:imageURL,...} OR As mentioned in alkmaps site | To draw vector with external image | | | vector | {pointRadius: 10,...} OR As mentioned in Alk maps site | To draw vector |

For complete documentation visit this site

ChangeLog

Click here to view all changeLog Details

Contributing

Contributions, issues and feature requests are welcome. Feel free to check issues page if you want to contribute.

Show your support

Give a :star: if this project helped you in any way!

License

Copyright © 2020 Ganesh Koilada. This project is MIT licensed.