Cordova¶

Circle¶

Circles are a method for designating an area on a map with minimal user interaction. A circle is characterized by just two key attributes: - The central point of the circle, specified by its latitude and longitude coordinates. - The radius of the circle. With these two values, you can effortlessly outline a specific region of interest on a map.

React JS Components Live Demo : CodeSandbox

1. Adding a Circle¶

this.circleObject = this.mapplsClassObject.Circle({
center: {"lat":  "28.552097968260668" ,"lng":  "77.2701604561851"},
map:this.mapObject,
radius:  50,
});

Optional Circle Properties

    strokeColor:  "red",
    strokeOpacity:  0.8,
    strokeWeight:  2,
    fillColor:  "red",
    fillOpacity:  0.3,
    text:'MapmyIndia',
    'text-color':'black',
    'text-size':'30px'

2. Circle Events¶

click: Fired when a pointing device (usually a mouse) is pressed on the marker.

Example : Angular / Cordova / Ionic // Refer below code without "this." for React js reference.

    this.circleObject.addListener('load', function () { console.log('click');});

cursor_changed: Fired when a pointing device (usually a mouse) is pressed and released at the same point on the marker.
dblclick: Fired when a pointing device (usually a mouse) is clicked twice at the same point on the marker.
drag: Fired repeatedly during a "drag to pan" interaction.
dragstart: Fired when a "drag to pan" interaction starts.
dragend: Fired when a "drag to pan" interaction ends.
draggable_changed: This event is fired when the marker's draggable property changes.
mousemove: Fired when mouse move.
mouseover: This event is fired when the mouse enters the area of the marker icon.

Removing a circle¶

mapplsClassObject.removeLayer({
  map: mapObject,
  layer: circleObject,
});

React JS Implementation¶

import { mappls } from "mappls-web-maps";
import { useEffect, useRef, useState } from "react";

const mapplsClassObject = new mappls();

const CircleComponent = ({ map }) => {
  const circleRef = useRef(null);

  useEffect(() => {
    if (circleRef.current) {
      mapplsClassObject.removeLayer({ map: map, layer: circleRef.current });
    }
    circleRef.current = mapplsClassObject.Circle({
      map: map,
      center: { lat: "28.552097968260668", lng: "77.2701604561851" },
      radius: 50,
    });
  });
};

const App = () => {
  const map = useRef(null);
  const [isMapLoaded, setIsMapLoaded] = useState(false);

  useEffect(() => {
    mapplsClassObject.initialize("<Add your Token>", { map: true }, () => {
      if (map.current) {
        map.current.remove();
      }
      map.current = mapplsClassObject.Map({
        id: "map",
        properties: {
          center: [28.5520979682606, 77.27016045618],
          zoom: 16,
        },
      });
      map.current.on("load", () => {
        setIsMapLoaded(true);
      });
    });
  }, []);

  return (
    <div
      id="map"
      style={{ width: "100%", height: "99vh", display: "inline-block" }}
    >
      {isMapLoaded && <CircleComponent map={map.current} />}
    </div>
  );
};
export default App;

For any queries and support, please contact:

Email us at apisupport@mappls.com

Support Need support? contact us!