Feature request... configure initial map position

[mmcc-xx]

My use case for this plugin is sharing my son's progress as he cycles across the US this summer. When the map initially loads, I'd like to have it default to a view that shows the whole route instead of being zoomed in on the trip so far.

I have the route being imported from a geojson file, so I could imagine either setting the zoom based on the extents of the route, or allowing the extents to be set manually.

I'm happy to work on this, but some suggestions on how you'd like to see it implemented and where the change should be made would be appreciated.

Thanks!

[morehawes]

@mmcc-xx,

I think this would be a really nice addition and that an option to specify initial starting coordinates and zoom of the Map might be the best way to go.

While I like the idea of the view fitting the route automatically, providing a route is an optional Shortcode parameter at this time.

These Settings will need to get passed to JavaScript front-end to configure the Map on page load. At the moment it looks like that happens here.

I think it might be worth refactoring the inmap_create_map method to accept an options Object, instead of adding more and more arguments. This could then be used to pass coords/zoom options to Leaflet when creating the Map. This refactoring is something I can assist with/do in order to pave the way for more Settings if necessary.

I hope that is somewhat useful.

Thanks again!

[mmcc-xx]

It looks like this line in assets/js/shortcode.js controls the initial map frame:

map_l.fitBounds(data_layer.getBounds());

Is that correct?

[morehawes]

Yes. That line adjusts the Leaflet Map view to fit the data_layer, in this case tracking data.

[mmcc-xx]

I added in a couple of lines to hard code in some coordinates to set the bounds to.

I built the package with grunt and verified that the changed code made it into the zip file in both shortcode.js and shortcode.min.js.

I deactivated and deleted the old version of the plugin in wordpress.

I uploaded the new version, but my new code isn't getting loaded - when I get into the browser console, I see the old code. Any idea what I'm doing wrong?

edit: tried again this morning and it loaded. Must have been a client side caching thing.

[mmcc-xx]

Hi Joe - as with the other feature, I'm not going to able to apply the time needed to make this into an actually useful feature. For my purposes, hardcoding the coordinates is sufficient.

I'll share the URL to the website I'm working on once I get it done if you're interested.

To set the bounds of the map to what I wanted, I made this change to shortcode.js:

//map_l.fitBounds(data_layer.getBounds());
var southEast = inmap_L.latLng(37.233168, -76.498990),
    northWest = inmap_L.latLng(46.206390, -123.885552),
    bounds = inmap_L.latLngBounds(southEast, northWest);

map_l.fitBounds(bounds);

I would guess that getting a southEast and nortWest point put into settings and passed to the client side would be relatively straightforward.

[morehawes]

Hi @mmcc-xx,

Understood and thanks again for the feature request!

I also appreciate you raising the issues you encountered with the build process. When I get time I will look in to improving... or more likely overhauling this and hopefully improving the "developer experience".

I have left some comments on your PR just FYI.

Cheers,

Joe

[morehawes]

Hi @mmcc-xx,

One of my changes in v2.0.0 of the plugin, currently available for testing on the staging branch (release notes here) is that if a Route is provided, the Map will now zoom to fit the bounds of the route and any track points.

While not exactly the level of control you had requested, this does mean that the view of the Map can now be controlled by the Route provided. I hope this is of some use to you.

More information here. All input greatly appreciated! ✌️