CODEWITHSUNDEEP
javascriptleafletopenstreetmap
user2314737
user2314737

Reputation: 29307

Why does circle circle size change on map?

Here's a demo illustrating my issue: I'm drawing a circle on a map of radius 500000 but in one location the circle looks bigger. I tried to check the zoom of the map and it's always the same.

place = {
name1:[-33.8650, 151.2094],
name2:[59.3293, 18.0686]
};

var id,circle,center;

function panMap() {
    id=this.getAttribute('id');
    center=place[id];
    map.panTo(center);
    circle = L.circle(center,500000, {
                 color: 'red',
                 fillColor: '#f03',
                 fillOpacity: 0.5
                 }).addTo(map);
    console.log("zoom = " +map.getZoom());
};

// center of the map
var center = [29,29];

// Create the map
var map = L.map('map').setView(center, 3);

// Set up the OSM layer
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);
  
var classname = document.getElementsByTagName("button");
for (var i=0;i<classname.length;i++) {
    classname[i].addEventListener("click", panMap, false);  
};
.container {
  height: 30px;
  width:100%;
}
#map {
  height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">

<div class="container">
<button id="name1">place1</button>
<button id="name2">place2</button>
</div>
<div id="map"></div>

Upvotes: 0

Views: 126

Answers (1)

scai
scai

Reputation: 21469

This is due to the Mercator projection. Quoting Wikipedia:

the Mercator projection distorts the size of objects as the latitude increases from the Equator to the poles, where the scale becomes infinite

place1's latitude is closer to the Equator than place2's latitude, thus appearing smaller.

Upvotes: 1

Related Questions