0.2.2

1. Improved Documentation
2. Added ability to display real-world maps
3. Added ability to specify default latitude and longitude
4. Added ability to specify zoom deltas
5. Improved error handling
6. Added tooltips on markers that link to notes (closes #8)
7. Fixed issue related to creating multiple additional markers in settings (closes #12)
8. General code cleanup

Author: valentine195

.gitignore

@@ -11,3 +11,4 @@ main.js
 *.js.map
 .DS_Store
 *build.js
+rollup.config-dev.js

README.md

@@ -12,18 +12,40 @@ A map can be created with a `leaflet` code block. For example:
 ```leaflet
 image: https://i.imgur.com/jH8j3mJ.jpg
 height: 500px
+lat: 50
+long: 50
+height: 500px
+minZoom: 1
+maxZoom: 10
+defaultZoom: 5
 ```
 ````
 
-### API
+### Options
+
+| Option      | Description                                                       | Default                           |
+| ----------- | ----------------------------------------------------------------- | --------------------------------- |
+| image*      | Direct URL/file path to an image file to be used as the map layer | OpenStreetMap map                 |
+| lat*        | Default latitude to display when rendering                        | 50% (image) / 0 (open street map) |
+| long*       | Default longitude to display when rendering                       | 50% (image) / 0 (open street map) |
+| height      | Height in pixels of the map element                               | 500px                             |
+| minZoom     | Minimum allowable zoom level of the map                           | 1                                 |
+| maxZoom     | Maximum allowable zoom level of the map                           | 10                                |
+| defaultZoom | Map will load zoomed to this level                                | 5                                 |
+| zoomDelta   | Zoom level will change by this amount when zooming                | 1                                 |
+
+#### Image Map URL / file path
+
+Image maps can be loaded one of three ways:
+
+1. Direct URL (e.g., https://i.imgur.com/jH8j3mJ.jpg)
+2. Obsidian URL (e.g., obsidian://open?vault=VaultName&file=Path/To/Image.jpg)
+3. Direct path to image (e.g., Path/To/Image.jpg)
+
+#### Latitude and Longtitude of Image Maps
+
+Because an image map does not have a true coordinate system, the latitude and longitude provided must be given as a percentage from the **top left corner of the image**.
 
-```
-image: Direct URL to an image file to be used as the map layer. **Required**
-height: Height in pixels of the map element. Defaults to 500px.
-minZoom: Minimum allowable zoom level (optional, default = 1).
-maxZoom: Maximum allowable zoom level (optional, default = 10).
-defaultZoom: Map will load zoomed to this level (optional, default = 5).
-```
 
 ### Markers
 
@@ -32,13 +54,31 @@ New markers can be added to the map by right clicking.
 If any additional marker types have been created in the settings, a list will appear to choose from.
 
 Once a marker has been created, it can be dragged to a different location. A marker can also point to a note; right-click on it, and a popup will appear. Enter the note as:
-`Path/To/Note.md`. Once linked, a click will open the note (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>-click to open in new window).
+`Path/To/Note.md` (case-sensitive). Once linked, a click will open the note (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>-click to open in new window).
 
 Additionally, markers can be created by dragging a note from the file tree and dropping it on the map.
 
 ## Installation
 
-The plugin is not currently part of the community plugin list. To install, copy the files from the lastest release to your plugins folder.
+### From within Obsidian
+From Obsidian v0.9.8, you can activate this plugin within Obsidian by doing the following:
+- Open Settings > Third-party plugin
+- Make sure Safe mode is **off**
+- Click Browse community plugins
+- Search for this plugin
+- Click Install
+- Once installed, close the community plugins window and activate the newly installed plugin
+#### Updates
+You can follow the same procedure to update the plugin
+
+### From GitHub
+- Download the Latest Release from the Releases section of the GitHub Repository
+- Extract the plugin folder from the zip to your vault's plugins folder: `<vault>/.obsidian/plugins/`  
+Note: On some machines the `.obsidian` folder may be hidden. On MacOS you should be able to press `Command+Shift+Dot` to show the folder in Finder.
+- Reload Obsidian
+- If prompted about Safe Mode, you can disable safe mode and enable the plugin.
+Otherwise head to Settings, third-party plugins, make sure safe mode is off and
+enable the plugin from there.
 
 ## Configuration
 

manifest.json

@@ -2,7 +2,7 @@
 	"id": "obsidian-leaflet-plugin",
 	"name": "Obsidian Leaflet",
 	"description": "Leaflet integration for Obsidian.md",
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"minAppVersion": "0.11.0",
 	"author": "Jeremy Valentine",
 	"repo": "valentine195/obsidian-leaflet-plugin",

package.json

@@ -1,12 +1,11 @@
 {
   "name": "obsidian-leaflet-plugin",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Leaflet integration for Obsidian.md",
   "main": "main.js",
   "scripts": {
-    "dev": "rollup --config rollup.config.js -w",
-    "build": "rollup --config rollup.config.js",
-    "build-copy": "rollup --config rollup.config-build.js"
+    "dev": "rollup --config rollup.config-dev.js -w",
+    "build": "rollup --config rollup.config.js"
   },
   "keywords": [],
   "author": "",

src/leaflet.ts

@@ -3,7 +3,6 @@ import * as L from "leaflet";
 import 'leaflet/dist/leaflet.css';
 
 import { Events, Menu, Point } from "obsidian";
-/* import { EventEmitter } from "events"; */
 import { v4 as uuidv4 } from "uuid";
 
 /**
@@ -54,7 +53,7 @@ export default class LeafletMap extends Events {
 	}
 
 
-	loadData(data: any/* : MarkerData[] */): Promise<void> {
+	loadData(data: any): Promise<void> {
 		return new Promise(resolve => {
 			data?.markers.forEach((marker: MarkerData) => {
 				this.createMarker(
@@ -68,11 +67,13 @@ export default class LeafletMap extends Events {
 		});
 	}
 
-	async render(image: string) {
+	async renderImage(image: string, coords?: [number, number]) {
 		this.map = L.map(this.contentEl, {
 			crs: L.CRS.Simple,
 			maxZoom: this.zoom.max,
-			minZoom: this.zoom.min
+			minZoom: this.zoom.min,
+			zoomDelta: this.zoom.delta,
+			zoomSnap: this.zoom.delta
 		});
 		this.markers.forEach(marker => {
 			marker.leafletInstance.addTo(this.map);
@@ -90,22 +91,46 @@ export default class LeafletMap extends Events {
 		L.imageOverlay(image, this.bounds).addTo(this.map);
 		this.map.fitBounds(this.bounds);
 		this.map.panTo(this.bounds.getCenter());
+
 		// tell leaflet that the map is exactly as big as the image
 		this.map.setMaxBounds(this.bounds);
-		this.map.invalidateSize();
-		this.map.setZoom(this.zoom.default, { animate: false })
-/* 		this.map.setMaxZoom(this.zoom.max);
-		this.map.setMinZoom(this.zoom.min); */
+		this.map.setZoom(this.zoom.default, { animate: false });
+
+		if (coords) {
+			this.map.panTo([coords[0] * this.bounds.getSouthEast().lat / 100, coords[1] * this.bounds.getSouthEast().lng / 100]);
+		}
 
 		this.map.on("contextmenu", this.contextMenu.bind(this));
-		
+
 		this.rendered = true;
 
 	}
 
-	contextMenu(evt: L.LeafletMouseEvent): void {
-		/** Create Context Menu */
+	async renderReal(coords: [number, number] = [0, 0]) {
+
+		this.map = L.map(this.contentEl, {
+			maxZoom: this.zoom.max,
+			minZoom: this.zoom.min,
+			worldCopyJump: true,
+			zoomDelta: this.zoom.delta,
+			zoomSnap: this.zoom.delta
+		}).setView(coords, this.zoom.default);
+		L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+		}).addTo(this.map);
+
+		this.markers.forEach(marker => {
+			marker.leafletInstance.addTo(this.map);
+		})
+		this.map.setZoom(this.zoom.default, { animate: false });
+
+		this.map.on("contextmenu", this.contextMenu.bind(this));
 
+		this.rendered = true;
+
+	}
+
+	contextMenu(evt: L.LeafletMouseEvent): void {
 		if (this.markerIcons.length <= 1) {
 			this.createMarker(this.markerIcons[0], evt.latlng);
 			return;
@@ -168,18 +193,33 @@ export default class LeafletMap extends Events {
 			.on("dragend", evt => {
 				marker.loc = marker.leafletInstance.getLatLng();
 				this.trigger("marker-added", marker);
-			});
+			})
+			.on('mouseover', (evt: L.LeafletMouseEvent) => {
+
+				if (marker.link) {
+					let el = evt.originalEvent.target as SVGElement;
+					marker.leafletInstance.bindTooltip(
+						marker.link.split('/').pop(),
+						{
+							className: 'leaflet-marker-link-tooltip',
+							direction: 'top',
+							offset: new L.Point(0, -1 * el.getBoundingClientRect().height)
+						}
+					).openTooltip();
+				}
+
+			})
 
 		if (this.rendered) {
 
 			marker.leafletInstance.addTo(this.map);
 
 		}
 
-
 		this.markers.push(marker);
 
 		this.trigger("marker-added", marker);
+
 	}
 	setMarkerIcons(markerIcons: MarkerIcon[]) {
 

src/main.css

@@ -1,25 +1,28 @@
 /* Settings */
-.additional-markers-container > .setting-item:not(.setting-item-heading) {
+
+.additional-markers-container>.setting-item:not(.setting-item-heading) {
 	border: 0px;
 }
+
 /* .additional-markers-container > .setting-item-heading:first-of-type {
 	border-bottom: 1px solid var(--background-modifier-border);
 } */
+
 .additional-markers-container {
 	border-bottom: 1px solid var(--background-modifier-border);
 	border-top: 1px solid var(--background-modifier-border);
 	padding: 18px 0 0 0;
 }
 
-.additional-markers-container > .setting-item-heading:only-child {
+.additional-markers-container>.setting-item-heading:only-child {
 	padding-bottom: 18px;
 }
 
-.additional-markers-control > input:first-of-type {
+.additional-markers-control>input:first-of-type {
 	margin-right: auto !important;
 }
-.setting-item-control.marker-icon-display,
-.setting-item-control > .marker-icon-display {
+
+.setting-item-control.marker-icon-display, .setting-item-control>.marker-icon-display {
 	margin-left: 0.5rem;
 	margin-right: 12px;
 	position: relative;
@@ -58,47 +61,73 @@
 	margin-right: 12px;
 }
 
-.full-width-height,
-.full-width-height > * {
+.full-width-height, .full-width-height>* {
 	height: 100% !important;
 	width: 100% !important;
 }
 
-.full-width,
-.full-width > * {
+.full-width, .full-width>* {
 	width: 100% !important;
 }
 
 /** Invalid Setting */
+
 .unset-align-items {
 	align-items: unset;
 }
+
 .has-invalid-message {
 	flex-grow: unset;
 	flex-flow: column nowrap;
 }
+
 input.is-invalid {
 	border-color: #dc3545 !important;
 	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
 	background-repeat: no-repeat;
 	background-position: right calc(0.375em + 0.1875rem) center;
 	background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
 }
+
 .invalid-feedback {
 	display: block;
 	width: 100%;
 	margin-top: 0.25rem;
 	font-size: 0.875em;
 	color: #dc3545;
 }
+
 /* div icon override */
 
 .leaflet-div-icon {
-	
 	background: transparent !important;
 	border: none !important;
 	width: 25px !important;
 	height: 25px !important;
 	margin-left: -12.5px !important;
 	margin-top: -25px !important;
+}
+
+.leaflet-marker-link-tooltip {
+	box-shadow: 0 2px 8px var(--background-modifier-box-shadow) !important;
+	background-color: rgba(0, 0, 0, 0.9) !important;
+	border: 1px solid rgba(0, 0, 0, 0.9) !important;
+	border-radius: 6px !important;
+	color: #dcddde !important;
+	font-size: 14px !important;
+	left: 50% !important;
+	line-height: 20px !important;
+	width: auto !important;
+	/* max-width: 300px !important; */
+	padding: 5px 14px !important;
+	/* 	position: fixed !important;
+	text-align: center !important;
+	transform: translateX(-50%) !important;
+	z-index: var(--layer-tooltip) !important; */
+	pointer-events: none !important;
+	/* white-space: pre-wrap !important; */
+}
+
+.leaflet-marker-link-tooltip::before {
+	border-top-color: rgba(0, 0, 0, 0.9) !important;
 }