@daoyi/leaflet-map NPM

React leaflet-map with cluster feature.

Install

Installing as a package

npm install @daoyi/leaflet-map

Peer dependencies

We use hook of React. So be sure react version >= 16.8 and react-dom version >= 16.8.

npm install react@">=16.8" react-dom@">=16.8"

And we use leaflet@^1.6.0 and react-leaflet@^2.6.1 as peer dependencies.

npm install leaflet@^1.6.0 react-leaflet@^2.6.1

Usage

loaded leaflet css in head of index.html

<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
          integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
          crossorigin=""/>
</head>

use MapBox in your functional component

import React from "react";
import {MapBox} from "@daoyi/leaflet-map";

// point of points must be GeoJSON form
const points = [
    {
        type: "Feature",  // type must be "Feature"
        // you can put some properties of point in the properties key
        properties: {
          id: 1,
          city: 'Tokyo',
          intensity: 10  // intensity will affect bg color of marker
        },
        geometry: {
          // type must be "Point"
          type: "Point",  
          // [Longitude, Latitude]
          coordinates: [
            35.705034, 139.780242
          ]
        }
    },{...}
]
    
const YourComponent = () => {

    const options = {
        height:"100vh"  // e.g. "800px"
        width:"100vw",  // e.g. "1000px"
        //...
    }
    
    return (<MapBox points={points} {...options} />)
}

Props

Type of cluster: cluster is the parameter of function in the table column "value".

Points provided will be transformed to cluster with property "cluster"(true/false). Whether it is a cluster depended on zoom level and point's coordinates. Intensity in a cluster's properties is the same as point provided, if intensity is not provided, intensity will be point_count (cluster type) or 1 (point type).

// cluster type
{
    type: "Feature",
    properties: {
        cluster: true,  // whether it is cluster or not
        point_count: 5,
        intensity: 56,  // intensity will affect color of marker
    },
    geometry: { type: "Point", coordinates: [-1.135171, 52.6376] }
}

// point type
{
    type: "Feature",
    properties: {
        cluster: false,  // whether it is cluster or not
        intensity: 56,
    },
    geometry: { type: "Point", coordinates: [-1.135171, 52.6376] }
}

Name	Value	Description
points	`array`	GeoJSON of points
height	`string`	Height of map container.
width	`string`	Width of map container.
center	`array` (`[long, lat]`)	Map center's long and lat.
tileLayerInfo	`array`	tileLayerSource.
paletteStyle	`string`	paletteStyle is for style marker color. Use it with pointMarkerPalette.
pointMarkerPalette	`object`	pointMarkerPalette is for style marker color. Use it with paletteStyle.
clusterMap	`function`	Mapping function when generate cluster.
clusterReduce	`function`	Reducing function when generate cluster.
makeClusterIcon	`(cluster) => leafletIcon \\| leafletDivIcon`	Make cluster marker icon. See more info to generate leafletIcon and leafletDivIcon.
clusterMarkerClassName	`string`	ClassName of cluster marker.
clusterTooltipClassName	`string`	ClassName of cluster marker tooltip.
clusterBgColor	`(cluster) => string`	Set cluster marker background-color.
clusterFontColor	`(cluster) => string`	Set cluster marker font-color.
useDefaultPointIcon	`boolean`	Whether to use default point icon.
pointPopupLabel	`(cluster) => string`	Set point popup label text.
onPointClick	`(cluster) => void`	Action when click point.
makePointIcon	`(cluster) => leafletIcon \\| leafletDivIcon`	Make point icon. See more info to generate leafletIcon and leafletDivIcon.
pointMarkerClassName	`string`	ClassName of point marker.
pointTooltipClassName	`string`	ClassName of point tooltip.
onPointPopupOpen	`(cluster) => void`	Action when point popup open.
pointBgColor	`(cluster) => string`	Set point background-color.
pointFontColor	`(cluster) => string`	Set point font-color.

More info of props

height

deafult: "100vh"

width

deafult: "100vw"

center

deafult: 50, 50

points

deafult:
Point must be GeoJSON format (with 3 key: type, properties and geometry). You can provide points with custom properties.
intensity of properties: intensity will affect color of marker. Combined usage with paletteStyle and pointMarkerPalette.

const points = [
	{
		type: "Feature",
		properties: {
			intensity: 10,  // intensity will affect color of marker
			//...other properties
		},
		geometry: { "type": "Point", "coordinates": [-1.135171, 52.6376] }
	},
	{
		type: "Feature",
		properties: {
			intensity: 8, // intensity will affect color of marker
			//...other properties
		},
		geometry: { "type": "Point", "coordinates": [-10.135171, 40.6376] }
	},
]

clusterMarkerClassName

deafult: "cluster-marker"

clusterTooltipClassName

deafult: "cluster-marker__tooltip",

pointMarkerClassName

deafult: "point-marker"

pointTooltipClassName

deafult: "point-marker__tooltip"

tileLayerInfo

default: see below
provider list: https://leaflet-extras.github.io/leaflet-providers/preview/

// default tileLayerInfo
const tileLayerInfo = [
  {
    attribution:
      '&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    checked: true
  },
  {
    attribution:
      "Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community",
    url: "https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png",
    checked: false
  },
  {
    attribution:
      '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
    url: "https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}{r}.png",
    checked: false
  }
];

clusterMap

 const clusterMap = (props) => {
    return({
        cost: props.cost,
        intensity: props.intensity,
        count: 1,
    })
  }

clusterReduce

const clusterReduce = (acc, props) => {
	acc.count += 1;
	acc.intensity = Math.max(acc.intensity, props.intensity);
	return acc;
}

paletteStyle

default: "primary"
combined useage with pointMarkerPalette

// paletteStyle is the key of pointMarkerPalette
const paletteStyle = "primary" // or "secondary"

pointMarkerPalette

Combined useage with paletteStyle.
You can provide more than 2 types of pointMarkerPalette, e.g. primary, secondary, ....
Please define color, min and max in range setting of every type.
default: see below

const pointMarkerPalette = {
  primary: [
    {
      id: "color-primary-01",
      color: "#C0FA6D",
      min: 0, // If point's intensity property is 0 ~ 3 or less than 0, point's color will be "#C0FA6D"
      max: 3
    },
    {
      id: "color-primary-02",
      color: "#e5fa6d",
      min: 4, // If point's intensity property is 4 ~ 6, point's color will be "#e5fa6d"
      max: 6
    },
    {
      id: "color-primary-03",
      color: "#fae06d",
      min: 7,
      max: 10
    },
    {
      id: "color-primary-04",
      color: "#fabf6d",
      min: 11,
      max: 15
    },
    {
      id: "color-primary-05",
      color: "#fa766d",
      min: 16, // If point's intensity property is 16 ~ 1000 or greater than 1000, point's color will be "#fa766d"
      max: 1000
    }
  ],
  secondary: [
    {
      id: "color-secondary-01",
      color: "#e5fa6d",
      min: 0,
      max: 3
    },
    {
      id: "color-secondary-02",
      color: "#EDC79B",
      min: 4,
      max: 6
    },
    {
      id: "color-secondary-03",
      color: "#D57A66",
      min: 7,
      max: 10
    },
    {
      id: "color-secondary-04",
      color: "#CA6680",
      min: 11,
      max: 15
    },
    {
      id: "color-secondary-05",
      color: "#b05487",
      min: 16,
      max: 1000
    }
  ]
};

onPointClick

default: null
example: see below

const onPointClick = (cluster) => {
    console.log(cluster)
    // fetch API
    // ...
}

onPointPopupOpen

default: null
example: see below

const onPointPopupOpen = (cluster) => {
    console.log(cluster)
    // fetch API
    // ...
}

makeClusterIcon

default: null
example: see below

import L from "leaflet";

const makeClusterIcon = (cluster) => {
    const iconHtml = `<div style="width: 40px; height: 40px; border: 2px red solid; background-color: orange; border-radius: 100%">
        <span style="font-size: 10px">
            ${cluster.properties.point_count}
        </span>
    </div>`
    return L.divIcon({
        html: iconHtml
    })
}

makePointIcon

default: null
example: see below

import L from "leaflet";

const makePointIcon = (cluster) => {
    const iconHtml = `<div style="width: 40px; height: 40px; border: 2px #fff solid; background-color: greenyellow; border-radius: 100%">
        <span style="font-size: 10px">
            ${cluster.properties.category}
        </span>
    </div>`
    return L.divIcon({
        html: iconHtml
    })
}