minorua / Qgis2threejs

3D map visualization and web export plugin for QGIS
http://minorua.github.io/Qgis2threejs/docs/
495 stars 91 forks source link

Legend for 3D Maps #121

Open daches opened 6 years ago

daches commented 6 years ago

Is there any way to add a legend for a three d map? Similar to the one at this link: https://blueshift.io/election-2016-county-map.html

nmalawskey commented 6 years ago

Yes. I did something similar using jquery, to append a div to the webgl div after the threejs canvas has loaded:

$.when( app.start() ).done(function() {

$( "#webgl" ).append( "

LEGEND STUFF GOES HERE
" );

});

and then just style it using css:

.legend { position: absolute; top: 20px; left: 20px; text-align:center; font-size:12px; background: white; border:1px solid black; width: 20%; height: 40%; }

in the project html file.

hope that helps.

daches commented 6 years ago

Thank you, Nick. I think this would help if I knew enough about the programming language. I am something of an anomaly. I wrote my first computer program in 1957, on an IBM 650, and wound up a few years later working on a PhD in Chemical Physics, developing and using a program for Monte Carlo calculations to estimated the thermodynamic properties for an assembly of particles on a lattice. The computer itself was a research project, and I wrote over 10,000 lines of assembly language code, which I had to translate manually into octal because the assembler had not been developed by the time I needed it. My career developed in such a way that I was more interested in the science and engineering than in the programming components of solving problems. When Mathcad became available I pretty much gave up programming because it provided very powerful ways to calculate results directly from the math formulas.

Sorry for the long introduction, but I wanted you to know that I do have years of experience with computing, but I just barely know my way around html and have zero understanding of Python.

Which leads to my next question: Do you, or anyone you know, have any experience with QGIS 3.0? It was just released a few days ago, and I downloaded it on another computer. In the properties dialog, there is an option for 3D rendering, but I have been unable to find any documentation on how to use it.

Thank you very much for your response!

Best regards, Dwayne

On Wed, Feb 28, 2018 at 6:50 AM, Nick Malawskey notifications@github.com wrote:

Yes. I did something similar using jquery, to append a div to the webgl div after the threejs canvas has loaded:

$.when( app.start() ).done(function() {

$( "#webgl" ).append( " LEGEND STUFF GOES HERE " );

});

and then just style it using css:

.legend { position: absolute; top: 20px; left: 20px; text-align:center; font-size:12px; background: white; border:1px solid black; width: 20%; height: 40%; }

in the project html file.

hope that helps.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/minorua/Qgis2threejs/issues/121#issuecomment-369263029, or mute the thread https://github.com/notifications/unsubscribe-auth/AjCWYF45VmNxIeVBqAOqAqTiA1NgJz7eks5tZWfRgaJpZM4SPjoF .

-- Dwayne Chesnut, Ph.D. PO Box 35500 Las Vegas, NV 89133-5500

(H) 702-655-5505 (C) 702-561-7949

nmalawskey commented 6 years ago

Not a problem. I'm actually entirely self-taught in this stuff, so I just bang my head against brick walls until they shake loose.

The code I had posted was just javascript/html. I don't do python (yet) :-)

And no, I haven't been playing with the new version of QGIS (yet). I do web programming for a news organization, so my end-use is building something that can live on the web. Hence my interest in the qgis2threejs plug in.

I know there was a 2.5D style in 2.18 in properties, so I imagine it's something similar? Sorry I can't be of more help.

Best, Nick

daches commented 6 years ago

Thanks again, Nick. I am also essentially self-taught, since computer science was not even in the vocabulary when I started. I start with an objective and also just bang at it until I stumble upon a solution. I have used the 2.5D style in 2.18, but the GUI seems to be very different for the Layers Properties. Fun to keep trying. Best, Dwayne

On Wed, Feb 28, 2018 at 11:33 AM, Nick Malawskey notifications@github.com wrote:

Not a problem. I'm actually entirely self-taught in this stuff, so I just bang my head against brick walls until they shake loose.

The code I had posted was just javascript/html. I don't do python (yet) :-)

And no, I haven't been playing with the new version of QGIS (yet). I do web programming for a news organization, so my end-use is building something that can live on the web. Hence my interest in the qgis2threejs plug in.

I know there was a 2.5D style in 2.18 in properties, so I imagine it's something similar? Sorry I can't be of more help.

Best, Nick

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/minorua/Qgis2threejs/issues/121#issuecomment-369356046, or mute the thread https://github.com/notifications/unsubscribe-auth/AjCWYIJTxcrEMkD7ZkRe9oZtP1kGVI6gks5tZan-gaJpZM4SPjoF .

-- Dwayne Chesnut, Ph.D. PO Box 35500 Las Vegas, NV 89133-5500

(H) 702-655-5505 (C) 702-561-7949

daches commented 6 years ago

Hi, Nick, I got into the 3D problem because I saw this display of the 2016 presidential election results: https://blueshift.io/election-2016-county-map.html

Since I'm retired, I dabble with using GIS to analyze and present data for political activism -- strictly as a hobby, because I want to improve grassroots efforts. Anyway, the html link above shows a very striking way to provide more information than a simple flat map with different colors. I have used Qgis 2.18, along with Qgis2threejs, to develop a similar display for voter registration by party in each precinct in Clark County, Nevada.

Best, Dwayne

On Wed, Feb 28, 2018 at 11:48 AM, Dwayne Chesnut dwayne.chesnut@gmail.com wrote:

Thanks again, Nick. I am also essentially self-taught, since computer science was not even in the vocabulary when I started. I start with an objective and also just bang at it until I stumble upon a solution. I have used the 2.5D style in 2.18, but the GUI seems to be very different for the Layers Properties. Fun to keep trying. Best, Dwayne

On Wed, Feb 28, 2018 at 11:33 AM, Nick Malawskey <notifications@github.com

wrote:

Not a problem. I'm actually entirely self-taught in this stuff, so I just bang my head against brick walls until they shake loose.

The code I had posted was just javascript/html. I don't do python (yet) :-)

And no, I haven't been playing with the new version of QGIS (yet). I do web programming for a news organization, so my end-use is building something that can live on the web. Hence my interest in the qgis2threejs plug in.

I know there was a 2.5D style in 2.18 in properties, so I imagine it's something similar? Sorry I can't be of more help.

Best, Nick

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/minorua/Qgis2threejs/issues/121#issuecomment-369356046, or mute the thread https://github.com/notifications/unsubscribe-auth/AjCWYIJTxcrEMkD7ZkRe9oZtP1kGVI6gks5tZan-gaJpZM4SPjoF .

-- Dwayne Chesnut, Ph.D. PO Box 35500 Las Vegas, NV 89133-5500

(H) 702-655-5505 <(702)%20655-5505> (C) 702-561-7949 <(702)%20561-7949>

-- Dwayne Chesnut, Ph.D. PO Box 35500 Las Vegas, NV 89133-5500

(H) 702-655-5505 (C) 702-561-7949

Llaves commented 5 years ago

+1 on this request

Llaves commented 5 years ago

Here's a quick hack for adding a legend that requires almost zero understanding of HTML or anything else. Before exporting your map with qgis2threejs, set the footer (under Scene->Decorations->Header/Footer Labels) to <img src="legend.png" alt="Legend">

Using the Print Layout (used to be Print Composer) create a legend that suits your interest. Now use a screen capture tool to grab the image of the legend and save the screen grab to a file legend.png (or whatever you feel like calling it.) Save/copy legend.png to the same directory that you exported your map to. This directory should include the map's index.html file.

Your result will look like this: taos