Repairing the Left-sided Popup Leaflet

Can someone help me with fixing the positioning of the Popup to the left of the map? Currently, it does not stay aligned to the left edge when moving the map.

I tried using position: fixed in my styling, and while everything looks good when zooming, it breaks when the map is moved. Here is the code for my Map component:

<MapContainer zoom={this.state.zoom} center={center} zoomControl={false}>
                    <TileLayer
                        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                        url={"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}
                    />


                    {this.state.geoJsonIsVisibleAll[0].geoJsonIsVisible &&
                        <ChuyGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
                    }
                    {this.state.geoJsonIsVisibleAll[1].geoJsonIsVisible &&
                        <TalasGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
                    }
                    {this.state.geoJsonIsVisibleAll[2].geoJsonIsVisible &&
                        <OshGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
                    }
                    {this.state.geoJsonIsVisibleAll[3].geoJsonIsVisible &&
                        <BatkenGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
                    }
                    {this.state.geoJsonIsVisibleAll[4].geoJsonIsVisible &&
                        <JalalAbadGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
                    }
                    {this.state.geoJsonIsVisibleAll[5].geoJsonIsVisible &&
                        <NarynGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
                    }
                    {this.state.geoJsonIsVisibleAll[6].geoJsonIsVisible &&
                        <IssykKolGeoJsonLayer url="kyrgyzstanPlaces.json" cluster={false}/>
                    }
                </MapContainer>

And here is the code for the popup:

<Marker
    key={f.properties.id}
    position={f.geometry.coordinate.reverse()}
>
<Popup
    maxWidth={250}
    maxHeight={650}
    closeButton={true}
    className={'popup-fixed'}
    autoPan={false}>
    <div className="popup-info">
    <p><span>Name: </span>{f.properties.name}</p>
    <p><span>Location: </span>{f.properties.location}</p>
    <p><span>Description: </span>{f.properties.description}</p>
    </div>
    </Popup>
    </Marker>

Here are the styles I am using:

.leaflet-container {
  height: 70vh;
  width: 60vw;
  position: absolute;
  right: 20%;
  top: 15%;
}

.popup-fixed {
  position: fixed;
  top: 0;
  left: 1% !important;
  transform: none !important;
  margin: 0;
  border-radius: 0;
}

Image showing the problem: https://i.sstatic.net/lANWh.jpg

Answer №1

Consider using a modal div instead of a popup for a more user-friendly experience. You have the option to customize the inner HTML content within the modal div. Alternatively, if you prefer using popups, you can create an additional map pane and attach the popup to that specific pane.

var newPane = map.createPane('custom', document.getElementById('mapid'));

var customPopup = L.popup({
    pane: 'custom', 
    className: 'popup-custom',
    autoPan: false,
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind caching form data in an ajax call?

After the first successful submission, I am facing an issue where the original form data is being re-sent even when new values are submitted for a second attempt. How can I reset and reload the data to avoid this problem? I have tried several approaches i ...

Let us know when the information on a different tab is updated

I have multiple tabs and I want to indicate when a change occurs on another tab that the user hasn't clicked. For example, if the user hits the run button while on the Data pane, I would like the Errors tab to change to red to show that there was a ch ...

Are there any comparable features in Angular 8 to Angular 1's $filter('orderBy') function?

Just starting out with Angular and curious about the alternative for $filter('orderBy') that is used in an AngularJS controller. AngularJS example: $scope.itemsSorted = $filter('orderBy')($scope.newFilteredData, 'page_index&apos ...

Every time I enter npm start in the terminal, I consistently encounter this error

After developing a simple web app and posting it on my repository, I started encountering these persistent errors. npm ERR! code ELIFECYCLE – David 1 hour ago npm ERR! syscall spawn C:\Windows\system32\cmd.exe;C:\Users'usernam ...

Tips for customizing the appearance of the day button in a React Material-UI date picker

In my React project, I am using material-ui date picker and I am looking for a way to customize the styling of the day buttons. Specifically, I want to change the text color of the available days. By default, as seen in the screenshot, the text color is bl ...

Make the width of a table column match the width of the header

I am currently using Primeng2 datatable and I am looking to adjust the column width to match the header size. This is my HTML code: <p-dataTable #dtselfcollectmonthly [exportFilename]="exportname" [rows]="10" [value]="rawdatatrucks"> <ng-con ...

"Enhancing Your List: A Comprehensive Guide to Editing List Items with the Power of AJAX, jQuery, and

At the moment, I am able to edit a list item by clicking the 'Edit' link. However, I would prefer to simply click on the list item itself to initiate the editing process. This is the content of my _item.html.erb partial. In this case, each proj ...

Mastering the Igr Data grid with Next JS: A comprehensive guide

Hello everyone, I'm diving into Next.js for the first time and attempting to integrate the igr data grid into my application. However, I keep encountering an error when trying to use the igr data grid in React: "ReferenceError: HTMLElement is not defi ...

What is the best method for invoking hook calls within React class-based components?

Is it possible to use functions such as useMediaQuery in class-based components? If so, how can this be achieved? import React from 'react'; import clsx from 'clsx'; import { withStyles ,withTheme ,withMediaQuery } from '@material ...

Having trouble displaying image links with React Router

I have been working on designing a mock Instagram page, complete with icons for "Home", "Inbox", "Explore", "Notifications" & "Profile Icon" in the top menu bar. Initially, these icons were static and did not have any functionality, but they would displa ...

What could be causing my node-statsd client script to not terminate?

When attempting to log a metric to a StatsD server using the node-statsd library, I encountered an issue where the script did not exit automatically. The code snippet in question is as follows: var StatsD = require('node-statsd').StatsD; var cli ...

What is the most efficient approach to completing everyday tasks directly in a Vuex store?

Currently, I am working on making API calls from within a Vuex store action object. Here's an example of one of my actions: /** * Check an account activation token * */ [CHECK_ACTIVATION_TOKEN] ({commit}, payload) { Api.checkActivationToken(payl ...

What is the best way to validate multiple checkboxes in React Native Elements?

Just starting out with React Native, I'm working on creating a quiz app that includes multiple choice questions. I'm using the "react-native-elements" library to generate checkboxes for the choices. However, I'm struggling with figuring out ...

Vue should only activate the element that has been clicked on

I'm currently working on my first Vue project and encountering an issue with triggering a child component within a table cell. Whenever I double click a cell, the `updated` event is being triggered in all child components associated with the table cel ...

Choose autocomplete feature from an external source within the context of AngularJS

I am currently working on an autocomplete textbox and I stumbled upon this script that I found through my search efforts. .controller('autoCompleteCTRL', function($scope, $rootScope){ $rootScope.searchItems = [ "ActionScript", ...

What steps can I take to have the text extend beyond the background at both the top and bottom edges?

I am attempting to replicate this design using CSS: https://i.sstatic.net/zXInr.png So far, this is what I have achieved: .container{ height: 30px; margin-bottom: 10px; } .redLine{ background-color: red; opacity: 0.5; height: 20px; bor ...

transition from mapStateToProps to using hooks

Just dipping my toes into the world of React (hooks) and learning by writing code. I'm grappling with converting MapStateToProps to hooks, specifically stuck on one part just before 'currentItem'. Here's the original code snippet: co ...

Customizing the appearance of jQuery accordion components

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" language="javascript"></script> <script type="text/javascript" src="http://www.compactcourse.com/js/accordionNew.js" language="javascript"></script> < ...

Customizing Magnific Popup: Changing showCloseBtn and closeOnBgClick settings during display

Is there a way to customize the behavior of an open instance of a magnific popup? I want to have different settings for when the popup is closable and when it should be prevented from closing. It appears that these options are only available during initial ...

The Dilemma of Conditional Call in React Hook 'useEffect':

Currently, I'm tackling an issue with the use Effect hook and conditional rendering in my Next project. Here's a snippet of the relevant code: const ImageGeneration: React.FC<{ subscribedUsersData: any error: any; // Please replace 'a ...