Merge pull request #23 from aaronczichon/feature/map-styles

Added support for different map styles

CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+## 1.1.0
+
+### Features
+
+-   [🚀] Adding support for custom icons and different maki icons (#15)
+-   [🚀] Adding support for different map styles (#17)
+
+### Docs
+
+-   [📚] Adding documentation new documentation file

DOCUMENTATION.md

@@ -24,7 +24,7 @@ Longitude: -63.57530151565183
 It doesn't matter if you provide the latitude or longitude first. The plugin will recognize the values and generate the map image.  
 Also it's not relevant if you write `Latitude` or `latitude` and `Longitude` or `longitude`.
 
-## Changing the icon
+### Changing the icon
 
 There are two options to change the icon. You can either use the marker icon setting in the plugin settings. This will override th icon on all maps globally.  
 If you want a custom icon for a specific map, you can add a `marker-url` field to the code block. The value of the field should be the URL to the icon you want to use.
@@ -46,6 +46,35 @@ maki: fire-station
 This is the block above rendered with a custom maki icon:
 ![Screenshot mapbox maki icon](./docs/custom_maki.png)
 
+### Change style
+
+You can change the style of the map by selecting a different style in the plugin settings.
+![Screenshot map styles](./docs/map-style-settings.png)
+
+This setting changes every map in your vault and is plugin-global.  
+To change the style of a map only for a specific map, you can add a `style` field to the code block. The value of the field should be the name of the style you want to use.
+
+```location
+latitude: 44.64266326577057
+longitude: -63.57530151565183
+maki: fire-station
+style: navigation-night-v1
+```
+
+The result looks like this:
+![Screenshot: map with custom style](./docs/code-style-result.png)
+
+Following values for the code block are supported:
+
+-   streets-v12
+-   outdoors-v12
+-   light-v11
+-   dark-v11
+-   satellite-v9
+-   satellite-streets-v12
+-   navigation-day-v1
+-   navigation-night-v1
+
 **Hint**  
 Maki icon can only defined in the code block and can't be defined globally. If no custom marker or maki icon is defined, the map falls back to the default marker icon (a home icon).  
 If you have defined a custom icon URL (in plugin settings or in your code block) the defined maki icon is ignored.

README.md

@@ -32,6 +32,10 @@ This plugin uses mapbox for rendering the map image. You should be aware of the
 
 For more data privacy information about Mapbox, please refer to the [Mapbox Privacy Policy](https://www.mapbox.com/privacy/).
 
+## Changelog
+
+Full changelog of the latest versions can be found in the [CHANGELOG.md](./CHANGELOG.md) file.
+
 ## Support
 
 If you like the plugin and want to support the development, you can [buy me a coffee](https://buymeacoffee.com/aaronczichon.de).  

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "mapbox-location",
 	"name": "Mapbox Location Image",
-	"version": "1.0.3",
+	"version": "1.1.0",
 	"minAppVersion": "1.5.12",
 	"description": "Show a map inside your notes with a specific format.",
 	"author": "Aaron Czichon",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mapbox-location",
-	"version": "1.0.3",
+	"version": "1.1.0",
 	"description": "Show a map inside your notes with a specific format.",
 	"main": "main.js",
 	"scripts": {

src/functions/process-code.func.ts

@@ -5,12 +5,14 @@ export const processCodeBlock = (source: string) => {
 	const longitude = findLongitude(rows);
 	const markerUrl = findMarkerUrl(rows);
 	const makiIcon = findMarkerIcon(rows);
+	const mapStyle = findMapStyle(rows);
 
 	return {
 		latitude,
 		longitude,
 		markerUrl,
 		makiIcon,
+		mapStyle,
 	};
 };
 
@@ -47,3 +49,10 @@ const findMarkerIcon = (rows: string[]) => {
 		makiIcon = makiIcon.toLocaleLowerCase().replace("maki:", "").trim();
 	return makiIcon;
 };
+
+const findMapStyle = (rows: string[]) => {
+	let mapStyle = rows.find((l) => l.toLowerCase().startsWith("style:"));
+	if (mapStyle)
+		mapStyle = mapStyle.toLocaleLowerCase().replace("style:", "").trim();
+	return mapStyle;
+};

src/main.ts

@@ -37,6 +37,7 @@ export default class MapboxPlugin extends Plugin {
 				extractedData.longitude,
 				extractedData.markerUrl,
 				extractedData.makiIcon,
+				extractedData.mapStyle,
 			);
 
 			const imageElement = document.createElement("img");
@@ -56,6 +57,7 @@ export default class MapboxPlugin extends Plugin {
 		longitude: string,
 		codeMarker: string = "",
 		makiIcon: string = "",
+		style: string = "",
 	): string => {
 		const mapboxAccessToken = this.settings.mapboxToken;
 		if (!mapboxAccessToken) {
@@ -66,7 +68,9 @@ export default class MapboxPlugin extends Plugin {
 		}
 		const markerUrl = this.getMarkerUrl(codeMarker, makiIcon);
 
-		const imageUrl = `https://api.mapbox.com/styles/v1/mapbox/streets-v12/static/${markerUrl}(${longitude},${latitude})/${longitude},${latitude},14/800x400?access_token=${mapboxAccessToken}`;
+		const mapStyle = style || this.settings.mapStyle;
+
+		const imageUrl = `https://api.mapbox.com/styles/v1/mapbox/${mapStyle}/static/${markerUrl}(${longitude},${latitude})/${longitude},${latitude},14/800x400?access_token=${mapboxAccessToken}`;
 
 		return imageUrl;
 	};

src/settings/plugin-settings.control.ts

@@ -62,6 +62,31 @@ export const markerSizeSetting = (
 		);
 };
 
+export const mapStyleSetting = (
+	containerEl: HTMLElement,
+	plugin: MapboxPlugin,
+) => {
+	new Setting(containerEl)
+		.setName("Default map style")
+		.setDesc("Select the default style which is used for your maps.")
+		.addDropdown((text) =>
+			text
+				.addOption("streets-v12", "Streets")
+				.addOption("outdoors-v12", "Outdoors")
+				.addOption("light-v11", "Light")
+				.addOption("dark-v11", "Dark")
+				.addOption("satellite-v9", "Satellite")
+				.addOption("satellite-streets-v12", "Satellite Streets")
+				.addOption("navigation-day-v1", "Navigation Day")
+				.addOption("navigation-night-v1", "Navigation Night")
+				.setValue(plugin.settings.mapStyle)
+				.onChange(async (value) => {
+					plugin.settings.mapStyle = value;
+					await plugin.saveSettings();
+				}),
+		);
+};
+
 export const markerColorSetting = (
 	containerEl: HTMLElement,
 	plugin: MapboxPlugin,

src/settings/plugin-settings.tab.ts

@@ -2,6 +2,7 @@ import { App, PluginSettingTab } from "obsidian";
 import MapboxPlugin from "../main";
 import {
 	apiTokenSetting,
+	mapStyleSetting,
 	markerColorSetting,
 	markerSizeSetting,
 	markerUrlSetting,
@@ -21,6 +22,7 @@ export class LocationSettingTab extends PluginSettingTab {
 		containerEl.empty();
 
 		apiTokenSetting(containerEl, this.plugin);
+		mapStyleSetting(containerEl, this.plugin);
 		markerSizeSetting(containerEl, this.plugin);
 		markerColorSetting(containerEl, this.plugin);
 		markerUrlSetting(containerEl, this.plugin);

src/settings/plugin-settings.types.ts

@@ -3,11 +3,13 @@ export interface LocationPluginSettings {
 	markerSize: "s" | "m" | "l";
 	markerColor: string;
 	markerUrl: string;
+	mapStyle: string;
 }
 
 export const DEFAULT_SETTINGS: Partial<LocationPluginSettings> = {
 	mapboxToken: "",
 	markerSize: "l",
 	markerColor: "ff0000",
 	markerUrl: "",
+	mapStyle: "streets-v12",
 };