Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

migrate to Leaflet 1.x #2

Merged
merged 11 commits into from Jul 29, 2019
Merged

migrate to Leaflet 1.x #2

merged 11 commits into from Jul 29, 2019

Conversation

jgravois
Copy link
Contributor

@jgravois jgravois commented Jun 22, 2019

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
Copy link
Collaborator

beuan commented Jun 23, 2019

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
Copy link
Contributor Author

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
Copy link
Collaborator

beuan commented Jun 24, 2019

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
Copy link
Contributor Author

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
Copy link
Collaborator

beuan commented Jun 24, 2019

Agree, it should be possible.

@beuan
Copy link
Collaborator

beuan commented Jun 25, 2019

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
Copy link
Contributor Author

jgravois commented Jul 1, 2019

  • 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
Copy link
Collaborator

beuan commented Jul 1, 2019

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
Copy link
Contributor Author

jgravois commented Jul 1, 2019

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
Copy link
Collaborator

beuan commented Jul 1, 2019

Great! Thanks!

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

@jgravois
Copy link
Contributor Author

jgravois commented Jul 6, 2019

  • 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
Copy link
Collaborator

beuan commented Jul 8, 2019

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

@beuan
Copy link
Collaborator

beuan commented Jul 29, 2019

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!

@beuan beuan merged commit 998711d into ProjectionWizard:master Jul 29, 2019
@jgravois
Copy link
Contributor Author

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

my pleasure.

@jgravois jgravois deleted the chore/leaflet-1.x branch July 29, 2019 19:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants