javascriptleafletleaflet.draw

How to show the equator in a leaflet map?

I have a leaflet map. I want to show the equator in the map.

my map is defined like:

var mymap = new L.map('mapid').setView([0, 0], 4);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}    /{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a     href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,     <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,     Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 4,
    id: 'mapbox.light',
    accessToken:     'pk.eyJ1IjoibWFiYWFzaGFyIiwiYSI6ImNqcm4zZTlnbjBucWQzem1mNmM4azVpcmwifQ.    WJpzlvxhWHjYAa4S55iVAA'
}).addTo(mymap);

https://en.wikipedia.org/wiki/Equator

The expected result is similar to the first & second pictures from the wikipidia article: i.e the equator drawn with a unique color as a leaflet object that I can attach popups to.

Solution

  • Sounds like you just need a Polyline representing the equator (circle of latitude):

    L.polyline([[0, -180], [0, 180]]).addTo(mymap)