From 657761939919e44b78e8ba6a498209786ea75a23 Mon Sep 17 00:00:00 2001 From: Vincent Wong Date: Sun, 21 Apr 2024 23:55:11 +0800 Subject: [PATCH 1/9] Clarify wording --- README.md | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8f60794..604cd84 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ leaflet-color-markers ===================== -The standard Leaflet marker, but in different color variations, for simple use cases. +The standard Leaflet marker icon, but in different color variations, for simple use cases. This is a modernized fork of [patrickp-rthinfo/leaflet-color-markers](https://github.com/patrickp-rthinfo/leaflet-color-markers), which is in turn a fork of [pointhi/leaflet-color-markers](https://github.com/pointhi/leaflet-color-markers). diff --git a/package.json b/package.json index c6e894b..2b80d6f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "leaflet-color-markers", "version": "2.0.0", - "description": "The standard Leaflet marker, but in different color variations, for simple use cases.", + "description": "The standard Leaflet marker icon, but in different color variations, for simple use cases.", "main": "js/leaflet-color-markers.js", "scripts": { "test": "exit 0" From ba4660b34166edcbd534ac50d02f5a7b984bdac0 Mon Sep 17 00:00:00 2001 From: Vincent Wong Date: Sun, 21 Apr 2024 23:58:17 +0800 Subject: [PATCH 2/9] Add back tooltipAnchor ref the leaflet repo L.Icon.Default --- js/leaflet-color-markers.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/js/leaflet-color-markers.js b/js/leaflet-color-markers.js index 132a874..26f5d60 100644 --- a/js/leaflet-color-markers.js +++ b/js/leaflet-color-markers.js @@ -4,6 +4,7 @@ var blueIcon = new L.Icon({ iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], + tooltipAnchor: [16, -28], shadowSize: [41, 41] }); @@ -13,6 +14,7 @@ var goldIcon = new L.Icon({ iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], + tooltipAnchor: [16, -28], shadowSize: [41, 41] }); @@ -22,6 +24,7 @@ var redIcon = new L.Icon({ iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], + tooltipAnchor: [16, -28], shadowSize: [41, 41] }); @@ -31,6 +34,7 @@ var greenIcon = new L.Icon({ iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], + tooltipAnchor: [16, -28], shadowSize: [41, 41] }); @@ -40,6 +44,7 @@ var orangeIcon = new L.Icon({ iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], + tooltipAnchor: [16, -28], shadowSize: [41, 41] }); @@ -49,6 +54,7 @@ var yellowIcon = new L.Icon({ iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], + tooltipAnchor: [16, -28], shadowSize: [41, 41] }); @@ -58,6 +64,7 @@ var violetIcon = new L.Icon({ iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], + tooltipAnchor: [16, -28], shadowSize: [41, 41] }); @@ -67,6 +74,7 @@ var greyIcon = new L.Icon({ iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], + tooltipAnchor: [16, -28], shadowSize: [41, 41] }); @@ -76,5 +84,6 @@ var blackIcon = new L.Icon({ iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], + tooltipAnchor: [16, -28], shadowSize: [41, 41] }); From 0a7662e1aa464301b9ad82d1b14954db8ba6091f Mon Sep 17 00:00:00 2001 From: Vincent Wong Date: Mon, 22 Apr 2024 00:00:51 +0800 Subject: [PATCH 3/9] Correct the icon image urls as per L.Icon.Default --- js/leaflet-color-markers.js | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/js/leaflet-color-markers.js b/js/leaflet-color-markers.js index 26f5d60..612f0b9 100644 --- a/js/leaflet-color-markers.js +++ b/js/leaflet-color-markers.js @@ -1,5 +1,6 @@ var blueIcon = new L.Icon({ - iconUrl: 'img/marker-icon-2x-blue.png', + iconUrl: 'img/marker-icon-blue.png', + iconRetinaUrl: 'img/marker-icon-2x-blue.png', shadowUrl: 'img/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], @@ -9,7 +10,8 @@ var blueIcon = new L.Icon({ }); var goldIcon = new L.Icon({ - iconUrl: 'img/marker-icon-2x-gold.png', + iconUrl: 'img/marker-icon-gold.png', + iconRetinaUrl: 'img/marker-icon-2x-gold.png', shadowUrl: 'img/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], @@ -19,7 +21,8 @@ var goldIcon = new L.Icon({ }); var redIcon = new L.Icon({ - iconUrl: 'img/marker-icon-2x-red.png', + iconUrl: 'img/marker-icon-red.png', + iconRetinaUrl: 'img/marker-icon-2x-red.png', shadowUrl: 'img/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], @@ -29,7 +32,8 @@ var redIcon = new L.Icon({ }); var greenIcon = new L.Icon({ - iconUrl: 'img/marker-icon-2x-green.png', + iconUrl: 'img/marker-icon-green.png', + iconRetinaUrl: 'img/marker-icon-2x-green.png', shadowUrl: 'img/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], @@ -39,7 +43,8 @@ var greenIcon = new L.Icon({ }); var orangeIcon = new L.Icon({ - iconUrl: 'img/marker-icon-2x-orange.png', + iconUrl: 'img/marker-icon-orange.png', + iconRetinaUrl: 'img/marker-icon-2x-orange.png', shadowUrl: 'img/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], @@ -49,7 +54,8 @@ var orangeIcon = new L.Icon({ }); var yellowIcon = new L.Icon({ - iconUrl: 'img/marker-icon-2x-yellow.png', + iconUrl: 'img/marker-icon-yellow.png', + iconRetinaUrl: 'img/marker-icon-2x-yellow.png', shadowUrl: 'img/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], @@ -59,7 +65,8 @@ var yellowIcon = new L.Icon({ }); var violetIcon = new L.Icon({ - iconUrl: 'img/marker-icon-2x-violet.png', + iconUrl: 'img/marker-icon-violet.png', + iconRetinaUrl: 'img/marker-icon-2x-violet.png', shadowUrl: 'img/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], @@ -69,7 +76,8 @@ var violetIcon = new L.Icon({ }); var greyIcon = new L.Icon({ - iconUrl: 'img/marker-icon-2x-grey.png', + iconUrl: 'img/marker-icon-grey.png', + iconRetinaUrl: 'img/marker-icon-2x-grey.png', shadowUrl: 'img/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], @@ -79,7 +87,8 @@ var greyIcon = new L.Icon({ }); var blackIcon = new L.Icon({ - iconUrl: 'img/marker-icon-2x-black.png', + iconUrl: 'img/marker-icon-black.png', + iconRetinaUrl: 'img/marker-icon-2x-black.png', shadowUrl: 'img/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], From 63a4aa692fd07c40d07b303ba03a2dabb982eee6 Mon Sep 17 00:00:00 2001 From: Vincent Wong Date: Tue, 23 Apr 2024 02:05:17 +0800 Subject: [PATCH 4/9] Properly export the variables --- js/index.js | 1 + js/leaflet-color-markers.js | 118 +++++++++++++++++++----------------- package.json | 2 +- 3 files changed, 66 insertions(+), 55 deletions(-) create mode 100644 js/index.js diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..4f8e3fd --- /dev/null +++ b/js/index.js @@ -0,0 +1 @@ +export * from './leaflet-color-markers.js'; \ No newline at end of file diff --git a/js/leaflet-color-markers.js b/js/leaflet-color-markers.js index 612f0b9..415f233 100644 --- a/js/leaflet-color-markers.js +++ b/js/leaflet-color-markers.js @@ -1,98 +1,108 @@ -var blueIcon = new L.Icon({ +import * as L from 'leaflet'; + +import 'leaflet/dist/leaflet.css'; + +const iconSize = [25, 41]; +const iconAnchor = [12, 41]; +const popupAnchor = [1, -34]; +const tooltipAnchor = [16, -28]; +const shadowSize = [41, 41]; + +export const blueIcon = new L.Icon({ iconUrl: 'img/marker-icon-blue.png', iconRetinaUrl: 'img/marker-icon-2x-blue.png', shadowUrl: 'img/marker-shadow.png', - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - tooltipAnchor: [16, -28], - shadowSize: [41, 41] + iconSize: iconSize, + iconAnchor: iconAnchor, + popupAnchor: popupAnchor, + tooltipAnchor: tooltipAnchor, + shadowSize: shadowSize }); -var goldIcon = new L.Icon({ +export const goldIcon = new L.Icon({ iconUrl: 'img/marker-icon-gold.png', iconRetinaUrl: 'img/marker-icon-2x-gold.png', shadowUrl: 'img/marker-shadow.png', - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - tooltipAnchor: [16, -28], - shadowSize: [41, 41] + iconSize: iconSize, + iconAnchor: iconAnchor, + popupAnchor: popupAnchor, + tooltipAnchor: tooltipAnchor, + shadowSize: shadowSize }); -var redIcon = new L.Icon({ +export const redIcon = new L.Icon({ iconUrl: 'img/marker-icon-red.png', iconRetinaUrl: 'img/marker-icon-2x-red.png', shadowUrl: 'img/marker-shadow.png', - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - tooltipAnchor: [16, -28], - shadowSize: [41, 41] + iconSize: iconSize, + iconAnchor: iconAnchor, + popupAnchor: popupAnchor, + tooltipAnchor: tooltipAnchor, + shadowSize: shadowSize }); -var greenIcon = new L.Icon({ +export const greenIcon = new L.Icon({ iconUrl: 'img/marker-icon-green.png', iconRetinaUrl: 'img/marker-icon-2x-green.png', shadowUrl: 'img/marker-shadow.png', - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - tooltipAnchor: [16, -28], - shadowSize: [41, 41] + iconSize: iconSize, + iconAnchor: iconAnchor, + popupAnchor: popupAnchor, + tooltipAnchor: tooltipAnchor, + shadowSize: shadowSize }); -var orangeIcon = new L.Icon({ +export const orangeIcon = new L.Icon({ iconUrl: 'img/marker-icon-orange.png', iconRetinaUrl: 'img/marker-icon-2x-orange.png', shadowUrl: 'img/marker-shadow.png', - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - tooltipAnchor: [16, -28], - shadowSize: [41, 41] + iconSize: iconSize, + iconAnchor: iconAnchor, + popupAnchor: popupAnchor, + tooltipAnchor: tooltipAnchor, + shadowSize: shadowSize }); -var yellowIcon = new L.Icon({ +export const yellowIcon = new L.Icon({ iconUrl: 'img/marker-icon-yellow.png', iconRetinaUrl: 'img/marker-icon-2x-yellow.png', shadowUrl: 'img/marker-shadow.png', - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - tooltipAnchor: [16, -28], - shadowSize: [41, 41] + iconSize: iconSize, + iconAnchor: iconAnchor, + popupAnchor: popupAnchor, + tooltipAnchor: tooltipAnchor, + shadowSize: shadowSize }); -var violetIcon = new L.Icon({ +export const violetIcon = new L.Icon({ iconUrl: 'img/marker-icon-violet.png', iconRetinaUrl: 'img/marker-icon-2x-violet.png', shadowUrl: 'img/marker-shadow.png', - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - tooltipAnchor: [16, -28], - shadowSize: [41, 41] + iconSize: iconSize, + iconAnchor: iconAnchor, + popupAnchor: popupAnchor, + tooltipAnchor: tooltipAnchor, + shadowSize: shadowSize }); -var greyIcon = new L.Icon({ +export const greyIcon = new L.Icon({ iconUrl: 'img/marker-icon-grey.png', iconRetinaUrl: 'img/marker-icon-2x-grey.png', shadowUrl: 'img/marker-shadow.png', - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - tooltipAnchor: [16, -28], - shadowSize: [41, 41] + iconSize: iconSize, + iconAnchor: iconAnchor, + popupAnchor: popupAnchor, + tooltipAnchor: tooltipAnchor, + shadowSize: shadowSize }); -var blackIcon = new L.Icon({ +export const blackIcon = new L.Icon({ iconUrl: 'img/marker-icon-black.png', iconRetinaUrl: 'img/marker-icon-2x-black.png', shadowUrl: 'img/marker-shadow.png', - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - tooltipAnchor: [16, -28], - shadowSize: [41, 41] + iconSize: iconSize, + iconAnchor: iconAnchor, + popupAnchor: popupAnchor, + tooltipAnchor: tooltipAnchor, + shadowSize: shadowSize }); diff --git a/package.json b/package.json index 2b80d6f..3300542 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "leaflet-color-markers", "version": "2.0.0", "description": "The standard Leaflet marker icon, but in different color variations, for simple use cases.", - "main": "js/leaflet-color-markers.js", + "main": "js/index.js", "scripts": { "test": "exit 0" }, From 5bfd9bc8f71bc46e4eea86c7d99ff27db43509d5 Mon Sep 17 00:00:00 2001 From: Vincent Wong Date: Tue, 23 Apr 2024 02:22:19 +0800 Subject: [PATCH 5/9] Add example code to README --- README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.md b/README.md index 604cd84..7ce1584 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,28 @@ This is a modernized fork of [patrickp-rthinfo/leaflet-color-markers](https://gi which is in turn a fork of [pointhi/leaflet-color-markers](https://github.com/pointhi/leaflet-color-markers). With this, the first commit to this project can be traced back to late 2013. +# Install + +(WIP) + +# Example Usage + +Add a simple marker using the green icon template to a Leaflet map: + +```javascript +// to be tested, but theoretically should work +import { greenIcon } from /* this library */; + +// we assume the map is already defined +const map = L.map('theMap'); + +L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map); +``` + +# Colors + +(WIP) + --- color variations of the standard leaflet markers: From 458e41f874004d1161898b18e597e2bc914789bf Mon Sep 17 00:00:00 2001 From: Vincent Wong Date: Tue, 23 Apr 2024 02:23:12 +0800 Subject: [PATCH 6/9] Fix header hierarchy --- README.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 7ce1584..08a96d1 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ -leaflet-color-markers -===================== +# leaflet-color-markers The standard Leaflet marker icon, but in different color variations, for simple use cases. @@ -7,11 +6,11 @@ This is a modernized fork of [patrickp-rthinfo/leaflet-color-markers](https://gi which is in turn a fork of [pointhi/leaflet-color-markers](https://github.com/pointhi/leaflet-color-markers). With this, the first commit to this project can be traced back to late 2013. -# Install +## Install (WIP) -# Example Usage +## Example Usage Add a simple marker using the green icon template to a Leaflet map: @@ -25,7 +24,7 @@ const map = L.map('theMap'); L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map); ``` -# Colors +## Colors (WIP) From 6ebad86e734ab990a9ce432c4f0fc3c987e2539f Mon Sep 17 00:00:00 2001 From: Vincent Wong Date: Tue, 23 Apr 2024 02:25:20 +0800 Subject: [PATCH 7/9] Remove the old example --- README.md | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/README.md b/README.md index 08a96d1..eeed8b8 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ With this, the first commit to this project can be traced back to late 2013. (WIP) -## Example Usage +## Example Add a simple marker using the green icon template to a Leaflet map: @@ -43,17 +43,3 @@ color variations of the standard leaflet markers: | Violet | ![Marker Violet 2x](https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-violet.png) | ![Marker Violet](https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-violet.png) | #9C2BCB | #742E98 | | Grey | ![Marker Grey 2x](https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-grey.png) | ![Marker Grey](https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-grey.png) | #7B7B7B | #6B6B6B | | Black | ![Marker Black 2x](https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-black.png) | ![Marker Black](https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-black.png) | #3D3D3D | #313131 | - -### Usage -```javascript -var greenIcon = new L.Icon({ - iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png', - shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - shadowSize: [41, 41] -}); - -L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map); -``` From 699e156b5cdaf2b50be2bdb7b7004da23ebee517 Mon Sep 17 00:00:00 2001 From: Vincent Wong Date: Tue, 23 Apr 2024 02:26:45 +0800 Subject: [PATCH 8/9] Adjust spacing --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index eeed8b8..061cce8 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ import { greenIcon } from /* this library */; // we assume the map is already defined const map = L.map('theMap'); -L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map); +L.marker([51.5, -0.09], { icon: greenIcon }).addTo(map); ``` ## Colors From 32337028cfe52bded1ab22c2e161c5bb9db06a83 Mon Sep 17 00:00:00 2001 From: Vincent Wong Date: Tue, 23 Apr 2024 02:31:53 +0800 Subject: [PATCH 9/9] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c9be174..d56c067 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,3 +10,4 @@ Initial release at version `2.0.0`. (FAQ: why not version `1.0.0`? See #1) ### Changed - Removed support of bower.js (#1) +- Properly support NodeJS (#2)