What is the method of showing a leaflet map in a particular div tag?

I want to showcase a leaflet map, but I specifically need it to be displayed in a div tag with a particular id like document.getElementById("map"). Here is the code snippet below which utilizes Vue.js:

Here is the div tag where the map will be rendered:

<div id="map">
</div>

Below is the script:

mounted () {
//    L.Icon.Default.imagePath = 'assets/vendor/leaflet' TODO: make it work with webpack
Leaflet.Icon.Default.imagePath = 'https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3bfb6b2b5bfb6a793e2fde3fde0">[email protected]</a>/dist/images'

let map = Leaflet.map(this.$el).setView([51.505, -0.09], 13)

Leaflet.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map)

Leaflet.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup()
},
javascriptgoogle-mapsdictionaryvue.jsleaflet

Answer №1

While I am not familiar with Vue, typically you do not have to use document.getElementById("map") in order to work with maps. Instead, you can simply pass the id directly into L.map like this:

let map = Leaflet.map("map").setView([51.505, -0.09], 13)

Additionally, be sure to specify a height for your "map" div element, such as:

<div id="map" height="500px">
 </div>

Update:

If you are experiencing issues, please check out my codesandbox example which demonstrates proper usage in both HTML and Javascript. You may also find this tutorial on using Leaflet and Vuejs helpful.

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 best way to integrate a React component into an Angular project?

Struggling with integrating a React component into an Angular project and unable to make it work. I have a JavaScript file containing the React component that I want to use in Angular. Here's an example: React file... import React from "react"; c ...

javascriptangularreactjs

Is the navigation dropdown toggle triggered by both mouseout and when hovering off of it?

I'm looking for some assistance in modifying the code so that the dropdown menu not only hides on click, but also hides on mouseout and/or when another top-level menu button is hovered over. View jsfiddle example $(document).ready(function () { ...

javascriptjquerycss

When using axios to perform a post operation, the Firestore Cloud Function sends back an undefined response to the

Hello there, I am currently facing an issue with processing payments using Firestore Cloud Function and a payment Gateway named Yoco. The payment code seems to be functioning correctly as it is returning either a success or failure object. However, the p ...

javascriptreactjsgoogle-cloud-firestore

What is the method for specifying a JSON object within a DOM element's `data` attribute?

In an attempt to store JSON data within a dataset attribute, I encountered the following HTML structure: The appearance of the HTML is as follows <div data-switch="true" data-json="{'key1': 'value 1'}, {'key2': 'valu ...

javascriptjqueryhtmljson

The click event is activated following the :active selector being triggered

My Angular application features a button with a slight animation - it moves down by a few pixels when clicked on: &:active { margin: 15px 0 0 0; } The button also has a (click)="myFunction()" event listener attached to it. A common issue arises w ...

javascriptcssangularbuttonclick

I am experiencing an issue where tapping on the Status Bar in MobileSafari is not functioning correctly on a specific

I am struggling to troubleshoot this problem with no success so far. The HTML5 JavaScript library I'm developing has a test page that can display a large amount of output by piping console.log and exceptions into the DOM for easy inspection on mobile ...

javascriptioshtmlsafarimobile-safari

"Coordinating Spring websockets with VueJs is hindered by CORS restrictions

I've been exploring ways to connect VueJs and Spring using WebSocket technology. WebSocket Configuration (Spring) @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/gs-guide-websocke ...

springvue.jswebsocket

Changing the text of a link when hovering - with a transition

Seeking a straightforward way to change text on a link upon :Hover. I desire a gentle transition (text emerges from below) and fallback to default if JavaScript is disabled. HTML <div class="bot-text"> <a href="">Visit this site</a> ...

javascriptjqueryhtmlcss

utilize the onMounted Hook

Working on my website using Nuxt3 with Vue3 has been a bit challenging, especially when trying to use the onMounted hook. Here's an example of my Vue page: <script setup lang="ts"> import { onMounted } from '@vue/runtime-core&a ...

vue.jsnuxt.jsvuejs3server-side-renderingnuxtjs3

Why is it that a click event outside of an HTML element cannot be detected in this Vue 3 application?

I've been diving into building a Single Page Application using Vue 3, TypeScript, and The Movie Database (TMDB). Currently, I'm focused on developing a search form within my project. Within the file src\components\TopBar.vue, here&apo ...

javascriptvue.jsvuejs3

Searching through an array of objects in MongoDB can be accomplished by using the appropriate query

Consider the MongoDB collection 'users' with the following document: { _id: 1, name: { first: 'John', last: 'Backus' }, birth: new Date('Dec 03, 1924'), death: new Date('Mar 1 ...

javascriptarraysnode.jsmongodbexpress

Combining react-md with material-ui components: A step-by-step guide

Is it possible to combine react-md and material-ui components together? I am attempting to utilize components from both libraries, however they seem to conflict with each other's styles. Do you have any suggestions or solutions? ...

javascriptreactjsmaterial-ui

The Power of Javascript in Enhancing Lightbox Experience

I am trying to enhance an image outputted by JavaScript with Lightbox functionality. Since the image link is dynamically created, I am approaching it this way! Despite searching on Stack Overflow, I have not found a solution that fits my needs... The cur ...

javascriptjquery

What causes the scrollbar to not extend to the bottom when connected to another scrollbar via a JavaScript equation?

I have been working on a code that involves multiple scrollbars that are all linked together. When you move one scrollbar, the other two will move proportionally. However, due to differences in width, the scroller doesn't always reach the end of the s ...

javascripthtmlcss

Guide to encapsulating an asynchronous function in a promise

I am in need of wrapping an asynchronous function within a promise to ensure synchronous execution. The reason behind this is that I must obtain a result from the asynchronous function before proceeding with the program's execution. Below is the rele ...

javascripttypescriptpromisepixi.js

The NPM Install process seems to be skipping certain files that were successfully installed in the past

When I first installed NPM Install in a folder, it created multiple folders and files: node_modules public src .DS_Store package.json package-lock.json webpack.config.js After that, npm start functioned perfectly. Now, as I embark on a new project for th ...

javascripthtmlnpm

How can I set a condition to open a specific page in ReactJs?

Currently, I am in the process of developing a website and have successfully implemented a profile page. This profile page consists of three buttons - Settings, Favourites, and Posts. To enhance user experience, I decided to structure it as a multi-step fo ...

javascriptreactjs

If the <option> "anyTableName" </option> is chosen, then display the column names of the selected table (PHP, MySQL)

Hey there, I'm a newbie on stackoverflow so feel free to correct me if I'm off base ;) Here's my current dilemma: I have a text.php file that contains 2 <select> elements. The first one allows me to choose a table (like "accounts", "c ...

javascriptphphtmlmysqlajax

Guidelines for implementing a vuex getter within the onMounted hook in Vue

Currently, my process involves fetching data from a database and storing it in vuex. I am able to retrieve the data using a getter in the setup method, but I would like to manipulate some of that data before the page is rendered, ideally in the onMounted m ...

javascriptvue.jsfrontendvuexvue-composition-api

What methods and technologies are accessible for executing JavaScript through PHP?

Are there any frameworks or tools available to execute JavaScript from PHP? Is there a similar project like the Harmony project for PHP? I am interested in running JS unit tests (or even BDD) directly from PHP, as demonstrated in this post (for Ruby). Am ...

phpjavascriptunit-testingtddbdd