Index file of code sample used in the following article: An introduction to the KendoReact Map component

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import {
  Map,
  MapLayers,
  MapTileLayer,
  MapMarkerLayer,
  MapBubbleLayer,
} from "@progress/kendo-react-map";
import "./index.scss";

const tileUrl = (e) =>
  `https://tile.openstreetmap.org/${e.zoom}/${e.x}/${e.y}.png`;
const attribution = "© OpenStreetMap contributors";
const markers = [
  {
    latlng: [37.7749, -122.4194],
    name: "San Francisco",
  },
  {
    latlng: [40.7128, -74.006],
    name: "New York City",
  },
];

const bubbles = [
  {
    location: [34, -118.25],
    value: 1180,
  },
  {
    location: [38.25, -85.76],
    value: 2000,
  },
  {
    location: [35.11, -90],
    value: 1500,
  },
  {
    location: [29.95, -90.09],
    value: 605,
  },
  {
    location: [33.5, -112.11],
    value: 305,
  },
  {
    location: [41.81, -71.42],
    value: 400,
  },
  {
    location: [34.12, -117.29],
    value: 500,
  },
  {
    location: [43.21, -77.63],
    value: 800,
  },
  {
    location: [40.69, -111.89],
    value: 1100,
  },
  {
    location: [37.79, -122.38],
    value: 700,
  },
  {
    location: [38.63, -90.34],
    value: 500,
  },
];

const bubbleStyle = {
  fill: {
    color: "orange",
    opacity: 0.5,
  },
  stroke: {
    width: 1,
    color: "black",
  },
};

const handleMapClick = (event) => {
  console.log("Map clicked at:", event.location);
};

const handleMarkerClick = (event) => {
  console.log("Marker clicked:", event.marker);
};

const handleMapPan = (event) => {
  console.log("Map panned:", event);
};

const MapContainer = () => (
  <Map
    onMapClick={handleMapClick}
    onMarkerClick={handleMarkerClick}
    onPan={handleMapPan}
  >
    <MapLayers>
      <MapTileLayer urlTemplate={tileUrl} attribution={attribution} />
      <MapMarkerLayer data={markers} locationField="latlng" titleField="name" />
      <MapBubbleLayer
        data={bubbles}
        locationField="location"
        valueField="value"
        style={bubbleStyle}
      />
    </MapLayers>
  </Map>
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <MapContainer />
  </React.StrictMode>
);