feat: added support for custom style in code block

docs: added documentation

refs: #17

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.

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/${this.settings.mapStyle}/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;
 	};