Welcome to @daoyi/leaflet-map 👋

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
    })
}

Author

👤 DaoYi Technology

Contributing

Found a bug? Want a new feature? Don't like the docs? Please send a pull request or raise an issue.

Show your support

Give a ⭐️ if this project helped you!

@daoyi/leaflet-map

Welcome to @daoyi/leaflet-map 👋

Install

Usage

Props

More info of props

Author

Contributing

Show your support

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@daoyi/leaflet-map

Welcome to @daoyi/leaflet-map 👋

Install

Usage

Props

More info of props

Author

Contributing

Show your support

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads