import React from "react";
import {
  Map,
  TileUrlTemplateArgs,
  MapLayers,
  MapTileLayer,
} from "@progress/kendo-react-map";

const tileUrl = (e: TileUrlTemplateArgs) =>
  `https://${e.subdomain}.tile.openstreetmap.org/${e.zoom}/${e.x}/${e.y}.png`;
const attribution = "© OpenStreetMap contributors";

export const PunchMap = () => {
  return (
  <h1>Employee Punch Map</h1>
  <div
	style={{
	  display: "flex",
	  marginBottom: 45,
	  width: 500,
	  height: 500
	}}
  >
	<Map>
	  <MapLayers>
		<MapTileLayer urlTemplate={tileUrl} attribution={attribution} />
	  </MapLayers>
	</Map>
  </div>
  );
};