I created a simple map with two polygons (most of the code I got from the Interactive Choropleth Map tutorial). I added a L.control() to show information about the polygons in a div. Contrary to the tutorial, I would like to have this div displayed outside the map.
To get a clue what I mean please look here: jsfiddle.net/Tbr9p/
I'm pretty new to leaflet and javascript so it would be nice if anybody can help!
I think Leaflet is styling the _div you return on the event handler so it appears as a popup. Just get the DIV you want to write into (by ID, not by Class) and edit it.
See jsfiddle here:
http://jsfiddle.net/7n58L/6/
lines 103 and 110 of the JS, as well as some CSS and HTML tweaks. I think I changed some names.
see updated fiddle here
document.getElementById("information").innerText = layer.feature.properties.Name;
Related
I am trying to make a hierarchical tree like this, 1
I have designed the basic tree, but I am unable to find a way to draw the lines, connecting the parent and child entries in the menu.
enter image description here
Does anyone know a better way, or literally any way to draw the lines?
I wish I could see some code to see how that's implemented. What about adding borders on divs? Like just a border-left? I'm sorry if I'm missing the question, I'd need more info. I hope this helps. If you share a live code I may be able to work on it live and test some things.
I am trying to create an html imagemap with highlighting.
I therefor use http://www.outsharked.com/imagemapster/ which did work on my tryouts, but does not work on the final map. The areas in the map seem to be correct - I did attach an click handler to them responding with the expected area. However, imagemapster does not highlight the areas.
What am I missing here?
Find my example here http://bernhardriegler.github.io/imagemap/index.html
found the answer here:
jQuery plugin imagemapster isn't doing anything
imagemapster does require the href attribute on all areas you wish to highlight.
I am using javascript amcharts v3 to generate trend like interface element. I use trendline class to create trend lines that mark certain events. I would like to handle trendline click event but there seems to be no way of doing it.
Has anyone come across this type of problem or do you have any idea how to work around this?
For trend line example I use this page. There is jsfiddle link in it.
Thank you for the time you spend reading my question.
Edit: JSfiddle example - > here
Not the most elegant solution (i.e. it uses the generated content rather than hooking neatly into the framework), but I have done the following to catch a click event.
$('#chartdiv').on('click', 'svg path[fill="#00CC00"]', function(){alert('hello');})
Which will bind a click to the chartdiv and then filter on all svg path objects that are the colour of the trendline, triggering the code if it matches.
I am trying to put a map from Openlayers 3 into a stack container which is being supplied by Dojo. But apparently there is no map being displayed until one resizes the main (browser) window.
There are no obvious errors on the Javascript console.
I made a jsfiddle: http://jsfiddle.net/q989r/
If I create the map in the same way but without all the Dojo stuff it works. I have also tried to put a distinct DIV#map for the map within DIV#center2D.
I found this similar issue: Dojo stackContainer is not displaying children until window resize but in these answers their suggestions are based on the fact that the ContentPane is created programatically which is not the case here. Anyway a
dijit.byId('view2d').startup()
nor a
dijit.byId('view2d').resize()
did not help.
So what am I probably missing? This is intended to work, right?
It appears that there is some strange logic (maybe bug) with Dojo containers that are not visible (this hint came from the Dojo IRC #neekfenwick):
Changing the order of the Applicationstack.forward() and createMap() calls did the trick. You can find an updated and working fiddle here: http://jsfiddle.net/q989r/1/
I am kind of newbie in geocoding, so I hope you can give me some hints how to get the following:
I want to make a map with D3 or leaflet that has some marker on it. If you click on a marker, information should pop up/be shown right next to the map. Kind of like in this example: http://www.washingtonpost.com/wp-srv/special/local/14th-street-businesses/
How can I accomplish this?
I guess there are 3 components involved. I need help with 2 of them.
The map: I can do that
Some kind of ajax, because I don't want the page to be loaded, if you click on a marker - right?
Some kind of jquery/javascript that opens on the righthand side if I click on a marker - right?
Plus: If you know any tutorials, case studies etc. that deal with this kind of task, please let me know.
Thanks!
I accomplished my goal by combining leaflet and jquery following this tutorial and extending it http://palewi.re/posts/2012/03/26/leaflet-recipe-hover-events-features-and-polygons/
Or maybe this http://leafletjs.com/examples/choropleth.html ? It's similar to what you are asking with few adjustments. You should play with the css to make it right for you. Instead of the numeric values of the example you can enter anything you want(images, html code etc)