Legacy cleanup

CHANGELOG.md

@@ -10,3 +10,4 @@ Initial release at version `2.0.0`. (FAQ: why not version `1.0.0`? See [#1](http
 
 ### Changed
 - Removed support for bower.js ([#1](https://github.com/Vectorial1024/leaflet-color-markers/issues/1))
+- Properly support NodeJS ([#2](https://github.com/Vectorial1024/leaflet-color-markers/issues/2))

README.md

@@ -1,12 +1,33 @@
-leaflet-color-markers
-=====================
+# 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).
 With this, the first commit to this project can be traced back to late 2013.
 
+## Install
+
+(WIP)
+
+## Example
+
+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:
@@ -22,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);
-```

js/index.js

@@ -0,0 +1 @@
+export * from './leaflet-color-markers.js';

js/leaflet-color-markers.js

@@ -1,80 +1,108 @@
-var blueIcon = new L.Icon({
-	iconUrl: 'img/marker-icon-2x-blue.png',
+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],
-	shadowSize: [41, 41]
+	iconSize: iconSize,
+	iconAnchor: iconAnchor,
+	popupAnchor: popupAnchor,
+	tooltipAnchor: tooltipAnchor,
+	shadowSize: shadowSize
 });
 
-var goldIcon = new L.Icon({
-	iconUrl: 'img/marker-icon-2x-gold.png',
+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],
-	shadowSize: [41, 41]
+	iconSize: iconSize,
+	iconAnchor: iconAnchor,
+	popupAnchor: popupAnchor,
+	tooltipAnchor: tooltipAnchor,
+	shadowSize: shadowSize
 });
 
-var redIcon = new L.Icon({
-	iconUrl: 'img/marker-icon-2x-red.png',
+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],
-	shadowSize: [41, 41]
+	iconSize: iconSize,
+	iconAnchor: iconAnchor,
+	popupAnchor: popupAnchor,
+	tooltipAnchor: tooltipAnchor,
+	shadowSize: shadowSize
 });
 
-var greenIcon = new L.Icon({
-	iconUrl: 'img/marker-icon-2x-green.png',
+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],
-	shadowSize: [41, 41]
+	iconSize: iconSize,
+	iconAnchor: iconAnchor,
+	popupAnchor: popupAnchor,
+	tooltipAnchor: tooltipAnchor,
+	shadowSize: shadowSize
 });
 
-var orangeIcon = new L.Icon({
-	iconUrl: 'img/marker-icon-2x-orange.png',
+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],
-	shadowSize: [41, 41]
+	iconSize: iconSize,
+	iconAnchor: iconAnchor,
+	popupAnchor: popupAnchor,
+	tooltipAnchor: tooltipAnchor,
+	shadowSize: shadowSize
 });
 
-var yellowIcon = new L.Icon({
-	iconUrl: 'img/marker-icon-2x-yellow.png',
+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],
-	shadowSize: [41, 41]
+	iconSize: iconSize,
+	iconAnchor: iconAnchor,
+	popupAnchor: popupAnchor,
+	tooltipAnchor: tooltipAnchor,
+	shadowSize: shadowSize
 });
 
-var violetIcon = new L.Icon({
-	iconUrl: 'img/marker-icon-2x-violet.png',
+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],
-	shadowSize: [41, 41]
+	iconSize: iconSize,
+	iconAnchor: iconAnchor,
+	popupAnchor: popupAnchor,
+	tooltipAnchor: tooltipAnchor,
+	shadowSize: shadowSize
 });
 
-var greyIcon = new L.Icon({
-	iconUrl: 'img/marker-icon-2x-grey.png',
+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],
-	shadowSize: [41, 41]
+	iconSize: iconSize,
+	iconAnchor: iconAnchor,
+	popupAnchor: popupAnchor,
+	tooltipAnchor: tooltipAnchor,
+	shadowSize: shadowSize
 });
 
-var blackIcon = new L.Icon({
-	iconUrl: 'img/marker-icon-2x-black.png',
+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],
-	shadowSize: [41, 41]
+	iconSize: iconSize,
+	iconAnchor: iconAnchor,
+	popupAnchor: popupAnchor,
+	tooltipAnchor: tooltipAnchor,
+	shadowSize: shadowSize
 });

package.json

@@ -1,8 +1,8 @@
 {
   "name": "leaflet-color-markers",
   "version": "2.0.0",
-  "description": "The standard Leaflet marker, but in different color variations, for simple use cases.",
-  "main": "js/leaflet-color-markers.js",
+  "description": "The standard Leaflet marker icon, but in different color variations, for simple use cases.",
+  "main": "js/index.js",
   "scripts": {
     "test": "exit 0"
   },