migrate to Leaflet 1.x

[jgravois]

hey @beuan 👋!

I was just sitting in front of the TV tonight so I got the site working with the latest release of Leaflet. The plugin you were using (Leaflet.draw) was abandoned quite awhile back, so I swapped in another one that is compatible with 1.x.

if you like the old one, we could still migrate at least to Leaflet 0.7.x.

ps. I see that this is already running at https://projectionwizard.github.io. very cool!

[beuan]

Hi @jgravois!

Thank you for making this update! I love the changes you made. Before I merge, I have two questions.

First, is it possible to limit the size of rectangle to be only 360deg wide? In old version, I modified the plugin so user was not able to select more than that.

And second, is it possible to just drag the rectangle on the map?

If you do not know, no worries. I will dig into the code at some point and check it out.

Thanks!

[jgravois]

I didn't notice it the other day, but Leaflet.PM does support dragging. I've pushed up another commit to enable it.

I also didn't know that you had customized the edit plugin before. my hunch is that you could achieve the same effect by leveraging the event below to restrict users to only draw geometries of 360° or less.

rectangle.on('pm:dragend', function (e) {
  // inspect geometry and alter it if necessary
})

if you could share the snippet you used before, that'd be really helpful.

[beuan]

Thank you for the updates! No worries, you couldn't know I made changes... At the time I was making this tool, fancy functionalities were not available yet.

I edited Edit.Rectangle.js with some changes to make it work:

_move: function (newCenter) {
	var latlngs = this._shape.getLatLngs(),
		bounds = this._shape.getBounds(),
		center = bounds.getCenter(),
		offset, newLatLngs = [];

	// Offset the latlngs to the new center
	for (var i = 0, l = latlngs.length; i < l; i++) {
		offset = [latlngs[i].lat - center.lat, latlngs[i].lng - center.lng];
		newLatLngs.push([newCenter.lat + offset[0], newCenter.lng + offset[1]]);
	}
	
	this._shape.setLatLngs(newLatLngs);

	/* * *  PROJECT EDITS  * * */
	var latlng = newLatLngs[0];
	var latlngO = newLatLngs[2];
	
	updateMapArea (latlng.lat, latlngO.lat, latlng.lng, latlngO.lng);
	setInputBoxes ();
	/* * * * * * * * * * * * * * * */

	// Respoition the resize markers
	this._repositionCornerMarkers();
},

_resize: function (latlng) {
	var bounds;
	
	/* * *  PROJECT EDITS  * * */
	var latlngO = this._oppositeCorner;
	var deltaLng = Math.abs(latlng.lng - latlngO.lng);
	
	if (deltaLng > 360) {
		if (latlng.lng < latlngO.lng)
			latlngO.lng = latlng.lng + 360.0;
		else
			latlngO.lng = latlng.lng - 360.0;
	}
	
	updateMapArea (latlng.lat, latlngO.lat, latlng.lng, latlngO.lng);
	setInputBoxes ();
	/* * * * * * * * * * * * * * * */

	// Update the shape based on the current position of this corner and the opposite point
	this._shape.setBounds(L.latLngBounds(latlng, latlngO));

	// Respoition the move marker
	bounds = this._shape.getBounds();
	//console.log(bounds);
	this._moveMarker.setLatLng(bounds.getCenter());
},

[jgravois]

we should definitely be able to wire your logic up in the event handler I mentioned to achieve the desired effect.

I'll take a crack at it sometime in the next couple days.

[beuan]

Agree, it should be possible.

[beuan]

I started testing the new rectangle. I am just adding notes here, so I do not forget these...

• Limit the size to 360 deg
• Rectangle dragging is lost when rectangle is resized from the UI
• Map zoom button should be above map tiles
• Rectangle handles do not move while dragging
• Double click on the rectangle should zoom the map to display complete rectangle

[jgravois]

• Rectangle dragging is lost when rectangle is resized from the UI
• Map zoom button should be above map tiles
• Double click on the rectangle should zoom the map to display complete rectangle

the leaflet plugin we're using doesn't update the placement of the anchors internally when rectangles are dragged. for now I've pushed up a small tweak to just hide them temporarily.

• Rectangle handles do not move while dragging

the plugin we're using emits an event that you can hook into throughout the duration of the rectangle being dragged around, but currently there's not an equivalent event emitted when the box is dragged via one of its corners. I'll have some time to play around during the next few weeks. ideally I'd like to open a pull request upstream to fix their failure to update marker locations internally and expose a public event that we can hook into to implement custom logic here.

[beuan]

Thank you very much, @jgravois, for your assistance with all this! I did quick test and I noticed an error that map.fitBounds cannot be found when the rectangle is modified from the UI...

Anyhow... I have my hands full with UC and ICC this month, so I will be coming back to all this at the end of the month. Thank you again!

[jgravois]

I did quick test and I noticed an error

whoops! that was a typo.

I will be coming back to all this at the end of the month. Thank you again!

sounds good. no worries.

[beuan]

Great! Thanks!

Btw, I really like that anchors disappear while rectangle is dragged for some weird reason. :)

[jgravois]

• Limit the size to 360 deg

for now I've committed a copy of the leaflet plugin with a (very) minor tweak. if geoman-io/leaflet-geoman#464 is merged we can go back to loading it from a CDN.

[beuan]

Thank you, @jgravois. I will get back to you on this later...

[beuan]

for now I've committed a copy of the leaflet plugin with a (very) minor tweak. if codeofsumit/leaflet.pm#464 is merged we can go back to loading it from a CDN.

I actually prefer that. This way I am not depended on other servers and everything it is on mine. :-)

It looks all is working now, so I will be merging this to master. Thank you, @jgravois, for all your help with this! I really appreciate it!

[jgravois]

Thank you, @jgravois, for all your help with this! I really appreciate it!

my pleasure.