country names

[ghost]

how can I get country names after particular amount of zoom?

[markuslerner]

Dear Akshay,

can you please elaborate a bit more on your question? I don’t quite understand what you’re trying to do.

Best Markus

On 27. Feb 2018, at 16:50, akshay kalambe notifications@github.com wrote:

how can I get country names after particular amount of zoom?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[ghost]

just take example.

I am zooming into the world map in flat view. at a particular zoom level, map should show names of country.

if we zoom into map for 50% then it should show names of country on the country. like it is america then text 'america' should be shown in only on the america country part.

[markuslerner]

Hi Akshay,

now I know what you mean.

This is a function you would have to implement yourself.

Basically you would have to take the country's center2D or center3D position (2D/3D map view center in three.js), transform it to a 2D screen position:

var pos2D = projector.projectVector( center2D, camera );

And then draw an HTML label element with the country name in that position.

Alternatively you can use a map library, which makes it easier to do that, like OpenLayers: https://openlayers.org/en/latest/examples/vector-label-decluttering.html?q=label https://openlayers.org/en/latest/examples/vector-label-decluttering.html?q=label

Best Markus

On 6. Mar 2018, at 11:37, akshay kalambe notifications@github.com wrote:

just take example.

I am zooming into the world map in flat view. at a particular zoom level, map should show names of country.

if we zoom into map for 50% then it should show names of country on the country. like it is america then america should be shown in only on the america country part.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/markuslerner/travelscope/issues/1#issuecomment-370738728, or mute the thread https://github.com/notifications/unsubscribe-auth/AEMeZxQSUGn555Q9IowyvvCLD930x1Ayks5tbmb_gaJpZM4SU4L-.

[ghost]

any idea where to put this function in the existing files?

[markuslerner]

Hi Akshay,

In index.js > createCountries() I would create a function before window.setTimeout() that iterates over all the countries:

for(i = 0; i < this.countries.length; i++) { // create html labels (e.g. using jQuery) with country.name and absolute positions using center2D (like in my previous e-mail) }

Then you would have to update the positions of the html labels when the controls have changed:

In index.js > initControls():

this.controlsPinchZoom.addEventListener('change', function() { // interate over all the countries and update html label positions });

I haven't tested it, but it should work like this.

Good luck! Markus

On 16. Mar 2018, at 08:35, akshay kalambe notifications@github.com wrote:

any idea where to put this function in the existing files?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/markuslerner/travelscope/issues/1#issuecomment-373628206, or mute the thread https://github.com/notifications/unsubscribe-auth/AEMeZ453_zdMntXknbRLICZYsHAuX2O-ks5te2tLgaJpZM4SU4L-.

[ghost]

Okay.

Ill try this one. Actually I am new to three.js and other things. I didn't found any thing related to find center point of a shape, can you help me in this?

[markuslerner]

I didn't found any thing related to find center point of a shape, can you help me in this?

The center point I have already calculated (country.center2D and country.center3D), like I have written to you before:

"Basically you would have to take the country's center2D or center3D position (2D/3D map view center in three.js), transform it to a 2D screen position:

var pos2D = projector.projectVector( center2D, camera );

And then draw an HTML label element with the country name in that position."

Best Markus