Leaflet: Fit polyline in view

综合技术 2018-01-01

I’ve been playing with the Leaflet.js library over the Christmas holidays to visualise running routes drawn onto the map using a Polyline and I wanted to zoom the map the right amount to see all the points.

Pre requisites

We have the following HTML to define the div that will contain the map.

We also need to import the following Javascript and CSS files:

  
  
 
  
  

Polyline representing part of a route

The following code creates a polyline for a Strava segment that I often run.

var map = L.map('map');
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18,}).addTo(map);
 
var rawPoints = [
  { "latitude": 51.357874010145395, "longitude": -0.198045110923591 },
  { "latitude": 51.3573858289394, "longitude": -0.19787754933584795 },
  { "latitude": 51.35632791810057, "longitude": -0.19750254941422557 },
  { "latitude": 51.35553240304241, "longitude": -0.197232163894512 },
  { "latitude": 51.35496267279901, "longitude": -0.1970247338143316 },
  { "latitude": 51.35388700570004, "longitude": -0.19666483094752069 },
  { "latitude": 51.3533898352570, "longitude": -0.1964976504847828 },
  { "latitude": 51.35358452733139, "longitude": -0.19512563906602554 },
  { "latitude": 51.354762877995036, "longitude": -0.1945622934585907 },
  { "latitude": 51.355610110109986, "longitude": -0.19468697186046677 },
  { "latitude": 51.35680377680643, "longitude": -0.19395063336295112 },
  { "latitude": 51.356861596801075, "longitude": -0.1936180154828497 },
  { "latitude": 51.358487396611125, "longitude": -0.19349660642888197 }
];
 
var coordinates = rawPoints.map(rawPoint => new L.LatLng(rawPoint["latitude"], rawPoint["longitude"]))
 
let polyline = L.polyline(
    coordinates,
    {
        color: 'blue',
        weight: 3,
        opacity: .7,
        lineJoin: 'round'
    }
);
 
polyline.addTo(map);

I wanted to centre the map around the polyline and initially wrote the following code to do this:

let lats = rawPoints.map(c => c.latitude).reduce((previous, current) => current += previous, 0.0);
let longs = rawPoints.map(c => c.longitude).reduce((previous, current) => current += previous, 0.0);
 
const position = [lats / rawPoints.length, longs / rawPoints.length];
map.setView(position, 17);

This works fine but the zoom factor was wrong when I drew longer polylines so I needed a better solution.

I should have RTFM because there’s a much simpler way to do this. I actually found the explanation in a GitHub issue from 2011 ! We can replace the previous snippet with this single line of code:

map.fitBounds(polyline.getBounds());

And this is how it looks on the screen:

Mark Needham

责编内容by:Mark Needham (源链)。感谢您的支持!

您可能感兴趣的

This Week in Rails: Better Source Code Formatting,... Hi! Tim here! About to bring you the latest in all things Rails…. This Week’s Contribut...
日程日历系统,顶级插件FullCalendar使用说明... 简介 日程系统,繁琐的月日期开始结束计算、当前页面开始的天数(跨月)。。。等等,麻烦的事情都交给FullCalendar,世界安静了。 官网 https://fullca...
How often can I have ajax request new data&que... I am working on designing a collaborative system where multiple users can edit the same document, mu...
PJAX: Loading your website faster! We all hate waiting for websites to load before we can start using or surfing it. Internet has a com...
Unable to call the controller method via ajax in t... I have tried all my googling skills , but i am not able to figure out the solution to my problem yet...