I am building a project that locates IP address with Ipify and Leaflet API’s with VITE.
I couldn’t get the map functions such as (panTo, flyTo and so on) to work so i started a completely clean project to check if i messed something up.
What I have found is that by pasting the leaflet map initialization directly in console – works flawlessly , functions are available.
But when I use the main.js it does not , map.panTo() is not there … What am I missing ?
main.js below – map has been initialized as described in API
let map = L.map("map").setView([51.505, -0.09], 13);
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
INDEX.HTML below
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap w/ Vite</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<link rel="stylesheet" href="/scss/styles.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script type="module" src="./js/main.js"></script>
</head>
<body>
<div class="container py-4 px-3 mx-auto">
<h1>Hello, Bootstrap and Vite!</h1>
<button class="btn btn-primary">Primary button</button>
</div>
<div id="map" class="bg-body-secondary"></div>
</body>
</html>
I have tried placing the script leaflet.js tags in head, at the end of the body, tried importing in main.js from https://unpkg.com/[email protected]/dist/leaflet.js, with {} or with { map } did not work.
I tried looking for a solution on the web and most of the problems that have occured for other devs are because of declaring map in function which keeps its scope local.
I think mine should be global ? I am completely clueless right now.. Please help
I need functionality of map.panTo to pan the map with results of other API answer .