(
+
+);
+
+export default MarkerOptionsEGOne;
diff --git a/demo-app/examples/marker-options/index.js b/demo-app/examples/marker-options/index.js
new file mode 100644
index 0000000..4d29438
--- /dev/null
+++ b/demo-app/examples/marker-options/index.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import Highlight from 'react-highlight'; // eslint-disable-line import/no-extraneous-dependencies
+
+import MarkerOptionsEGOne from './example-one';
+
+const MarkerOptions = () => (
+
+
+ Base on:
+
+ react-leaflet example
+
+
+
+ For setting Marker options, please use
+
+ react-leaflet Marker API
+
+
+
+ {`
+import L from 'leaflet'
+import MarkerClusterGroup from 'react-leaflet-markercluster';
+
+// Create marker icon according to the official leaflet documentation
+const redMarker = L.icon({
+ iconUrl: './demo-app/assets/icons/red-filled-marker.svg',
+ iconSize: [40, 40],
+ iconAnchor: [20, 40],
+});
+
+
+// Put inside react-leaflet after
+
+ `}
+
+
+
+
+
+
+
+
+
+ Base on:
+
+ react-leaflet example
+
+
+
Create Popup for Marker as easy, as to cluster all markers.
+
+ Just pass react-leaflet Popup component
+ to the Marker as a child:
+
+
+
+ {`
+import L from 'leaflet';
+import MarkerClusterGroup from 'react-leaflet-markercluster';
+
+// Create marker icon according to the official leaflet documentation
+const redMarker = L.icon({
+ iconUrl: './demo-app/assets/icons/red-filled-marker.svg',
+ iconSize: [40, 40],
+ iconAnchor: [20, 40],
+});
+
+// Put inside react-leaflet after
+
+ `}
+
+
+
+
+
+
+
+
+
+ Base on:
+
+ react-leaflet example
+
+
+
Creation of Tooltip for Marker as easy, as a creation of Popup.
+
+ Just pass react-leaflet Tooltip component
+ to the Marker as a child:
+
+
+
+ {`
+import MarkerClusterGroup from 'react-leaflet-markercluster';
+
+// Setup Tooltip according to react-leaflet documentation
+// https://react-leaflet.js.org/docs/en/examples.html
+
+// Put inside react-leaflet after
+
+ `}
+
+
+
+
+
+
+
+
+
+ Leaflet.markercluster support some helpful options for clustered markers customization like:
+
+ showCoverageOnHover, maxClusterRadius or iconCreateFunction.
+
+
+ Just pass whatever option you need from
+
+ All Leaflet.markercluster Options
+
+ to MarkerClusterGroup as prop.
+
+
+ {`
+import L from 'leaflet'
+import MarkerClusterGroup from 'react-leaflet-markercluster';
+
+// Function for creating custom icon for clustere group
+// https://github.com/Leaflet/Leaflet.markercluster#customising-the-clustered-markers
+// NOTE: iconCreateFunction is running by leaflet, which is not support ES6 arrow func syntax
+// eslint-disable-next-line
+const createClusterCustomIcon = function (cluster) {
+ return L.divIcon({
+ html: \`\${cluster.getChildCount()}\`,
+ className: 'marker-cluster-custom',
+ iconSize: L.point(40, 40, true),
+ });
+};
+
+
+ `}
+
+
+
And do not forget about styles for your class:
+
+
+ {`
+/* Customising the Clustered Markers */
+.marker-cluster-custom {
+ background: #9370db;
+ border: 3px solid #ededed;
+ border-radius: 50%;
+ color: #ededed;
+ height: 40px;
+ line-height: 37px;
+ text-align: center;
+ width: 40px;
+}
+ `}
+
+
+
+
+
+
+
+