The map is not displayed on the leaflet

I am having trouble getting the map to display properly. I have added the cdn link in my head.

<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="18747d797e747d6c5829362e3628">[email protected]</a>/dist/leaflet.css"
 integrity="sha512- 
 xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
 crossorigin=""/>

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6cac3c7c0cac3d2e69788908896">[email protected]</a>/dist/leaflet.js"
 integrity="sha512- 
 gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
 crossorigin=""></script>

After that, I created a new div element.

<div id="map" style="height:180px"></div>

Within my script, I have the following code:

<script type="text/javascript">
  var map = L.map('map', {
        center: [38.9765, -1.855],
        zoom: 13
    });
</script>

Despite setting everything up correctly, the map is not functioning and I am not receiving any error messages.

https://i.sstatic.net/ZnnlD.png

javascriptleaflet

Answer №1

Consider incorporating a tile layer by utilizing L.tileLayer()

https://leafletjs.com/reference-1.6.0.html#tilelayer

var map = L.map('map', {
  center: [40.73061, -73.935242],
  zoom: 12
});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a575e5a5d575e4f6b4e7159677f6972566b647b5674717a176f697775">[email protected]</a>/dist/leaflet.css" integrity="sha512- xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bb575e5a5d575e4f6b4b1a7b59f497f9b8499b4b781848e8ad1878c8bf7f9a7">[email protected]</a>/dist/leaflet.js" integrity="sha512- gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>

<div id="map" style="height:200px"></div>

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

Having trouble reaching the elements stored in an array?

As a beginner in Angular and JavaScript, I may be making some obvious mistakes so please bear with me. I have written this code that allows the selection of 2 text files and then combines them into a single array. $scope.textArray = []; $scope.textUpload ...

javascripthtmlarraysangularjs

What is the best way to utilize JSONP to display an entire HTML code with an alert?

When I attempt to use cross-domain ajax to retrieve the entire HTML page code, I keep receiving a failed message. The console log shows: "Uncaught SyntaxError: Unexpected token <" Below is my AJAX function: function fetchData(){ var url = documen ...

javascriptphphtmlajaxjsp

Is it possible to transform all scripts into a React component? (LuckyOrange)

I am currently working on converting the script for a specific service (http://luckyorange.com/) into a component. The instructions say to place it in index.html within the public folder, but that appears to be insecure. I'm uncertain whether this tas ...

javascripthtmlreactjs

Angular promise not accurately retrieving data from JSON API

Last Updated: 02/12/2015 After reading through the comments, I discovered that the issue stemmed from an Angular module modifying the object. By using toJSON, I was able to pinpoint the problem. I recently encountered a perplexing issue. I have a service ...

javascriptarraysjsonangularjsapi

What is preventing Web API from triggering a CORS error in browsers such as Chrome and Edge, as well as the Postman tool?

While working on developing an API in Asp.Net Core 3.1, everything seemed to be functioning properly. However, I encountered CORS-related errors when attempting to send requests via ajax. Interestingly, these errors were not present when sending GET reques ...

javascriptjqueryajaxcorspostman

Issue encountered with mouse handling on SVG elements that overlap is not functioning as anticipated

I am working with multiple SVG path elements, each contained within a parent SVG element, structured like this: <svg class="connector" style="position:absolute;left:277.5px;top:65px" position="absolute" pointer-events:"none" version="1.1" xmlns="http:/ ...

javascriptsvgpathhovermouse

How can I redirect to a different URL using Ajax when successful POST request is made?

Here is the code snippet I am working with: $.ajax({ type: "POST", url: "/pro_signup", data: { data: data, key: key }, dataType: "json", success: function (response) { document.getElementById("pu ...

javascriptajax

The crosshair functionality in Zing Chart is causing a CPU leak

After enabling the crosshair feature on my chart, I noticed a significant issue when using Chrome 57 (and even with versions 58 and ZingChart 2.6.0). The CPU usage spikes above 25% when hovering over the chart to activate the crosshair. With two charts, th ...

javascriptangularzingchart

Tips on incorporating a hyperlink into an object imported through GLTF loader

Is there a way to include a hyperlink in the object loaded using gltf loader with the given code snippet below? var loader = new THREE.GLTFLoader(); var mesh; loader.load('globe.glb', function(gltf){ console.log(gltf); me ...

javascriptthree.js

Chained module incorporating a specialized Angular form validation directive

I've been working on incorporating an angular form validation "plugin," but I've hit a roadblock trying to utilize the directive in a child module. As a test, I'm using the HighlightDirective example. @Directive({ selector: '[highligh ...

javascriptangularjs

What is the process of resetting dropdown option values?

Recently, I have encountered an issue with a customized dropdown list in MVC4. I am populating data using AJAX and it is working fine, but the problem arises when the data is not cleared after successfully sending it to the controller. Here's an examp ...

javascriptc#jqueryajaxasp.net-mvc-4

The particles from particles.js plugin fail to appear on Chrome browser

While experimenting with particles.js, I noticed that it runs smoothly on the Safari browser (I'm using a MacBook), but it encounters an error on Chrome and the particles fail to display. Error pJS - XMLHttpRequest status: 404 particles.js:1558 Error ...

javascripthtmlcssparticles.js

Retrieving JSON data using the fetch method in JavaScript

Currently, I am attempting to retrieve a JSON array using AJAX. Upon calling my test.php file, the following content is returned: [{"name":"James","age":24},{"name":"Peter","age":30}] This is the JavaScript code that I am using: var persons = new Array( ...

javascriptjqueryajaxarraysjson

Scouring the web with Cheerio to extract various information from Twitter

Just starting out with Web Scraping, using Axios to fetch the URL and Cheerio to access the data. Trying to scrape my Twitter account for the number of followers by inspecting the element holding that info, but not getting any results. Attempting to exec ...

javascripthtmlnode.jsweb-scrapingtwitter

Angular data binding between an input element and a span element

What is the best way to connect input texts with the innerHTML of a span in Angular6? Typescript file ... finance_fullname: string; ... Template file <input type="text" id="finance_fullname" [(ngModel)]="finance_fullname"> <span class="fullnam ...

javascriptangulartypescriptdata-binding

Utilizing AJAX and javascript for extracting information from websites through screen scraping

Is it possible to scrape a screen using AJAX and JavaScript? I'm interested in scraping the following link: I tried the technique mentioned on w3schools.com, but encountered an "access denied" message. Can anyone help me understand why this error is ...

javascriptajax

Revamp your JavaScript code to trigger when the clock strikes bold!

Having trouble setting up JavaScript to automatically bold the next clock time. Any tips on rewriting the JavaScript? For instance, if it is currently 6:49, I want the next clock time of 7:32 to be automatically bolded. And when the time reaches 7:32, I wa ...

javascript

Navigate to a specific section on a different page while excluding a distance of X

I've implemented the script below to execute the action mentioned in the title. <script type="text/javascript"> var jump=function(e) { if (e){ e.preventDefault(); var target = $(this).a ...

javascriptanimationscroll

Retention of user-entered data when navigating away from a page in Angular

I need to find a way to keep the data entered in a form so that it remains visible in the fields even if the user navigates away from the page and then comes back. I attempted to use a solution from Stack Overflow, but unfortunately, it did not work as exp ...

javascriptangularjs

What is preventing the direct passing of the dispatch function from a useState hook into an onClick handler function?

const Counter = () => { const [count, setCount] = useState(0); // Uncommenting the line below would result in an infinite loop because it directly invokes setCount(count + 1) on render. // This causes the component to continuously re-render and up ...

javascriptreactjsreact-hooksuse-state