feat: added width parameter (close #262)

javalent · Dec 16, 2021 · d2d2a22 · d2d2a22
1 parent 0b3b681
commit d2d2a22
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -40,7 +40,8 @@ darkMode: true
 | [osmLayer](#real-world-maps)            | Turn off the OpenStreetMap layer (only usable if additional Tile Servers have been provided)                |                                            |
 | [lat](#initial-coordinates)             | Default latitude to display when rendering.                                                                 | 50% (image) / 39.983334 (open street map)  |
 | [long](#initial-coordinates)            | Default longitude to display when rendering.                                                                | 50% (image) / -82.983330 (open street map) |
-| height                                  | Height of the map element. Can be provided in pixels or percentage of window height.                        | 500px                                      |
+| height                                  | Height of the map element. Can be provided in pixels or percentage of note height.                          | 500px                                      |
+| width                                   | Width of the map element. Can be provided in pixels or percentage of note width.                            | 100%                                       |
 | [minZoom](#initial-zoom-level)          | Minimum allowable zoom level of the map.                                                                    | 1                                          |
 | [maxZoom](#initial-zoom-level)          | Maximum allowable zoom level of the map.                                                                    | 10                                         |
 | [defaultZoom](#initial-zoom-level)      | Map will load zoomed to this level.                                                                         | 5                                          |
@@ -163,14 +164,16 @@ As mentioned above, additional tile servers can be added using the `tileServer`
 `tileServer: <domain>|<alias (optional)>`
 
 For example:
+
 ```md
 tileServer: https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png|Dark
 
 ---
 
 tileServer:
-  - https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png|Dark
-  - https://tiles.wmflabs.org/hillshading/{z}/{x}/{y}.png|Hills
+
+-   https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png|Dark
+-   https://tiles.wmflabs.org/hillshading/{z}/{x}/{y}.png|Hills
 ```
 
 Tile servers specified in `tileServer` will be added as additional **layers** that can be fully switched to. Tile servers specified as `tileOverlay` will be added as overlays that will load on top of the base map.

diff --git a/src/@types/main.d.ts b/src/@types/main.d.ts
@@ -73,6 +73,7 @@ export interface BlockParameters {
     draw?: boolean;
     preserveAspect?: boolean;
     noUI?: boolean;
+    width?: string;
 }
 
 declare class ObsidianLeaflet extends Plugin {

diff --git a/src/@types/map.d.ts b/src/@types/map.d.ts
@@ -69,6 +69,7 @@ export interface LeafletMapOptions {
 
     hasAdditional?: boolean;
     height?: string;
+    width?: string;
     id?: string;
     imageOverlays?: {
         alias: string;

diff --git a/src/assets/main.css b/src/assets/main.css
@@ -131,6 +131,10 @@ input.is-invalid {
     color: #dc3545;
 }
 
+.block-language-leaflet {
+    margin: 0 auto;
+}
+
 .block-language-leaflet > .leaflet-container {
     z-index: 0;
     background-color: var(--background-secondary-alt);

diff --git a/src/map/map.ts b/src/map/map.ts
@@ -141,7 +141,7 @@ export abstract class BaseMap extends Events implements BaseMapDefinition {
         super();
 
         this.contentEl.style.height = options.height;
-        this.contentEl.style.width = "100%";
+        this.contentEl.style.width = options.width ?? "100%";
         this.options = Object.assign({}, DEFAULT_MAP_OPTIONS, options);
         /** Stop Touchmove Propagation for Mobile */
         this.contentEl.addEventListener("touchmove", (evt) => {

diff --git a/src/renderer/renderer.ts b/src/renderer/renderer.ts
@@ -158,7 +158,7 @@ export class LeafletRenderer extends MarkdownRenderChild {
         this.preserveAspect = this.params.preserveAspect ?? false;
 
         this.containerEl.style.height = this.options.height;
-        this.containerEl.style.width = "100%";
+        this.containerEl.style.width = this.params.width ?? "100%";
         this.containerEl.style.backgroundColor = "var(--background-secondary)";
 
         this.resize = new ResizeObserver(() => {