├── .babelrc
├── .gitignore
├── README.md
├── index.html
├── index.js
├── package.json
├── src
├── ClusterMap.js
├── GeoJsonMap.js
├── Map.js
├── Pin.js
├── Pins.js
└── map-widget.css
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "es2015",
4 | "react",
5 | "stage-0"
6 | ],
7 | "plugins": [
8 | "autobind-class-methods",
9 | [
10 | "babel-plugin-styled-components",
11 | {
12 | "preprocess": true
13 | }
14 | ]
15 | ],
16 | "retainLines": true
17 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # IDE
2 | .idea
3 | .vscode
4 |
5 | # Types
6 | typings
7 | typings.json
8 |
9 | # Environment
10 | node_modules
11 | gift_registry_hbc.env
12 | gr_api.env
13 | gr_client.env
14 | **/package-lock.json
15 | **/yarn.lock
16 |
17 | # Translations
18 | frontend/src/system/translations/*/*_old.json
19 | backend/api/translations/*/*_old.json
20 | updateTranslations/temp
21 |
22 | # Logs
23 | error.log
24 | logs/*
25 |
26 | # Docs
27 | /docs/dist/*
28 | orders.js
29 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #### Use this command to start:
2 | ```
3 | npm run start-dev
4 | ```
5 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | React map with Leaflet
7 |
8 |
9 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Map from './src/Map';
4 | import ClusterMap from './src/ClusterMap';
5 | import GeoJsonMap from './src/GeoJsonMap';
6 |
7 | ReactDOM.render(, document.getElementById('map'));
8 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-map-with-leaflet",
3 | "version": "1.0.0",
4 | "description": "React map with Leaflet",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "nodemon server.js",
8 | "start-dev": "webpack-dev-server --open",
9 | "build": "webpack -p",
10 | "watch": "webpack --watch",
11 | "storybook": "start-storybook -p 6006",
12 | "build-storybook": "build-storybook"
13 | },
14 | "keywords": [
15 | "react",
16 | "map",
17 | "leaflet"
18 | ],
19 | "author": "Eugene Belkovich",
20 | "license": "MIT",
21 | "devDependencies": {
22 | "babel-core": "^6.26.3",
23 | "babel-loader": "^7.1.5",
24 | "babel-plugin-autobind-class-methods": "^5.0.1",
25 | "babel-plugin-styled-components": "^1.5.1",
26 | "babel-preset-es2015": "^6.24.1",
27 | "babel-preset-react": "^6.24.1",
28 | "babel-preset-stage-0": "^6.24.1",
29 | "babel-runtime": "^6.26.0",
30 | "css-loader": "^0.28.7",
31 | "html-loader": "^0.5.1",
32 | "html-webpack-plugin": "^2.30.1",
33 | "style-loader": "^0.19.1",
34 | "webpack": "^3.12.0",
35 | "webpack-dev-server": "^2.9.7"
36 | },
37 | "dependencies": {
38 | "geojson-world-map": "^0.0.2",
39 | "leaflet": "^1.3.1",
40 | "leaflet.markercluster": "^1.3.0",
41 | "react": "^16.5.2",
42 | "react-dom": "^16.5.2",
43 | "react-leaflet": "^1.9.1",
44 | "react-leaflet-markercluster": "^1.1.8"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/src/ClusterMap.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Map as LeafletMap, GeoJSON } from 'react-leaflet'
3 | import Pins from './Pins.js';
4 | import worldGeoJSON from 'geojson-world-map';
5 |
6 | class MapWidget extends Component {
7 | constructor(props) {
8 | super(props)
9 | let pins = []
10 | for (let i = 0; i < 5000; i++) {
11 | pins.push([Math.floor(Math.random() * 50), Math.floor(Math.random() * 50)]);
12 | }
13 | this.state = {
14 | pins
15 | }
16 | }
17 |
18 |
19 | render() {
20 |
21 | const pins = this.state.pins
22 | return (
23 |
35 | ({
38 | color: '#4a83ec',
39 | weight: 0.5,
40 | fillColor: "#1a1d62",
41 | fillOpacity: 1,
42 | })}
43 | />
44 |
45 |
46 | );
47 | }
48 | }
49 |
50 | export default MapWidget;
51 |
--------------------------------------------------------------------------------
/src/GeoJsonMap.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Map as LeafletMap, GeoJSON, Marker, Popup } from 'react-leaflet';
3 | import worldGeoJSON from 'geojson-world-map';
4 |
5 | class GeoJsonMap extends React.Component {
6 | render() {
7 | return (
8 |
20 | ({
23 | color: '#4a83ec',
24 | weight: 0.5,
25 | fillColor: "#1a1d62",
26 | fillOpacity: 1,
27 | })}
28 | />
29 |
30 |
31 | Popup for any custom information.
32 |
33 |
34 |
35 | );
36 | }
37 | }
38 |
39 | export default GeoJsonMap
40 |
--------------------------------------------------------------------------------
/src/Map.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Map as LeafletMap, TileLayer, Marker, Popup } from 'react-leaflet';
3 |
4 | class Map extends React.Component {
5 | render() {
6 | return (
7 |
19 |
22 |
23 |
24 | Popup for any custom information.
25 |
26 |
27 |
28 | );
29 | }
30 | }
31 |
32 | export default Map
33 |
--------------------------------------------------------------------------------
/src/Pin.js:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { CircleMarker } from 'react-leaflet';
3 | import './map-widget.css';
4 |
5 | class Pin extends React.Component {
6 | render() {
7 | return (
8 |
15 | );
16 | }
17 | }
18 |
19 | export default Pin;
20 |
--------------------------------------------------------------------------------
/src/Pins.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import L from 'leaflet';
3 | import MarkerClusterGroup from 'react-leaflet-markercluster';
4 | import 'react-leaflet-markercluster/dist/styles.min.css';
5 | import Pin from './Pin.js';
6 | import './map-widget.css';
7 |
8 | const hexToRgb = (hex, opacity) => {
9 | if (!hex.startsWith('#')) return hex;
10 | const hashless = hex.slice(1);
11 | const num = parseInt(
12 | hashless.length === 3
13 | ? hashless.split('').map(c => c.repeat(2)).join('')
14 | : hashless,
15 | 16,
16 | );
17 | const red = num >> 16;
18 | const green = (num >> 8) & 255;
19 | const blue = num & 255;
20 |
21 | if (opacity) {
22 | return `rgba(${red}, ${green}, ${blue}, ${opacity})`;
23 | }
24 | return `rgb(${red}, ${green}, ${blue})`;
25 | };
26 |
27 | const Pins = (props) => {
28 | const { pins } = props;
29 |
30 | const markerStyle = {
31 | color: '#fc4b51',
32 | fillColor: "#fc4b51",
33 | opacity: 1,
34 | radius: 5,
35 | };
36 |
37 | const createClusterCustomIcon = (cluster) => {
38 | const count = cluster.getChildCount();
39 | let size = 'LargeXL';
40 |
41 | if (count < 10) {
42 | size = 'Small';
43 | }
44 | else if (count >= 10 && count < 100) {
45 | size = 'Medium';
46 | }
47 | else if (count >= 100 && count < 500) {
48 | size = 'Large';
49 | }
50 | const options = {
51 | cluster: `markerCluster${size}`,
52 | circle1: `markerCluster${size}DivOne`,
53 | circle2: `markerCluster${size}DivTwo`,
54 | circle3: `markerCluster${size}DivThree`,
55 | circle4: `markerCluster${size}DivFour`,
56 | label: `markerCluster${size}Label`,
57 | };
58 |
59 | const clusterColor = hexToRgb('#fc4b51');
60 | const circleStyle1 = `background-color: ${clusterColor.slice(0, -1)}, 0.05)`;
61 | const circleStyle2 = `background-color: ${clusterColor.slice(0, -1)}, 0.15)`;
62 | const circleStyle3 = `background-color: ${clusterColor.slice(0, -1)}, 0.25)`;
63 | const circleStyle4 = `background-color: ${clusterColor.slice(0, -1)}, 0.65)`;
64 |
65 |
66 | return L.divIcon({
67 | html:
68 | `
69 |
70 |
71 |
72 | ${count}
73 |
74 |
75 |
76 |