diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..f091b6f --- /dev/null +++ b/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 diff --git a/DOCUMENTATION.md b/DOCUMENTATION.md index c6c9bf6..0516575 100644 --- a/DOCUMENTATION.md +++ b/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. diff --git a/README.md b/README.md index fa287dd..e0aab46 100644 --- a/README.md +++ b/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). diff --git a/docs/code-style-result.png b/docs/code-style-result.png new file mode 100644 index 0000000..7ef8eb4 Binary files /dev/null and b/docs/code-style-result.png differ diff --git a/docs/map-style-settings.png b/docs/map-style-settings.png new file mode 100644 index 0000000..0a8c17e Binary files /dev/null and b/docs/map-style-settings.png differ diff --git a/manifest.json b/manifest.json index 5be8f31..5addf32 100644 --- a/manifest.json +++ b/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", diff --git a/package.json b/package.json index abac56f..f164930 100644 --- a/package.json +++ b/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": { diff --git a/src/functions/process-code.func.ts b/src/functions/process-code.func.ts index 5d116e7..36bea92 100644 --- a/src/functions/process-code.func.ts +++ b/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; +}; diff --git a/src/main.ts b/src/main.ts index ecc9ce7..26536a5 100644 --- a/src/main.ts +++ b/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; }; diff --git a/src/settings/plugin-settings.control.ts b/src/settings/plugin-settings.control.ts index 15acf52..1c09290 100644 --- a/src/settings/plugin-settings.control.ts +++ b/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, diff --git a/src/settings/plugin-settings.tab.ts b/src/settings/plugin-settings.tab.ts index 3ea5a53..b02c9a7 100644 --- a/src/settings/plugin-settings.tab.ts +++ b/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); diff --git a/src/settings/plugin-settings.types.ts b/src/settings/plugin-settings.types.ts index eb1cb0a..cd2e9cf 100644 --- a/src/settings/plugin-settings.types.ts +++ b/src/settings/plugin-settings.types.ts @@ -3,6 +3,7 @@ export interface LocationPluginSettings { markerSize: "s" | "m" | "l"; markerColor: string; markerUrl: string; + mapStyle: string; } export const DEFAULT_SETTINGS: Partial = { @@ -10,4 +11,5 @@ export const DEFAULT_SETTINGS: Partial = { markerSize: "l", markerColor: "ff0000", markerUrl: "", + mapStyle: "streets-v12", };