@daoyi/leaflet-map

v1.0.9

Published

a year ago

leaflet-map

Downloads

0High
0Medium
0Low

react-component react 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/[email protected]/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!

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme