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

ReactAlkMaps component

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

VectorLayer component

Field	Type	Default	Description
label	string	Vector Layer	Vector Layer name

VectorPoint component

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 ⭐ if this project helped you in any way!

License

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