So I have a choropleth that is very similar to https://gist.github.com/mbostock/9656675. The only real difference is that I am display all the us counties, not states.
What I want to do display data related to what counties are in the view. This would be done outside of d3, I would display a more granular level related to those counties. So as they zoom in further to the map, the dataset would update and only display data related to the counties zoomed in on. This is easy to do with the click on a single county, however I am unsure of how to do it for the manual zoom and are viewing a lot of counties.
As I see it there are two ways that I could accomplish this:
1) Somehow via d3.selectAll I am able to grab only elements(counties) that are in the current view, however with my current searching I am unsure of how to do this.
2) Some how I pull from the svg transformation and projection the latitude and longitude bounds of the current zoom, and then use that lat/long to filter my data.
Anyone provide any insight on this or point me in the right direction? I did some digging however wasn't really able to come up with anything useful?
I am using d3v3.
Thanks.
So as often happens, I can search for stuff forever and not find answers. But the moment I post a stack overflow question I then find the answer myself not soon after.
This example gives me an example of what I need.
https://bl.ocks.org/iamkevinv/5af87b4e8ace557cb4b10bbfe7f7dab4
Related
Aoa,
I am working on a web application where a shop vendor must put a latitude and longitude of his/her shop.
It is easy to get if he/she is using application from the shop. But if he/she is somewhere else i want to show a map option to the vendor where he/she could search his/her shop point it. And I could get co-ordinates from that marker position.
I have studied google map api found a lot of useful things but couldn't understand how to achieve this as I am unable to find anything regarding getting co-ordinates from the marker.
It will be great if anybody could guide me that where should I look or what should I study to solve my issue.
Thanks in advance..
You can use the Maps JavaScript API to put a marker every time a certain point in the map was clicked then get the coordinates of the point and display it so that your user can directly get the exact coordinate of the marker. Here is a simple code I made to demonstrate this.
In the code, I used a listener to the map to check for every click on the map and put a marker on it. It will then update the label display with the coordinate of the marker.
map.addListener('click', function(event) {
addMarker(event.latLng);
document.getElementById("text").innerHTML = event.latLng.lat() + ',' + event.latLng.lng();
});
Hope this helps!
Right-click on the red marker on Google Maps after searching the location, select "what's here?" and you will see the coordinates in a pop-up.
A few days ago I've explored geomaps and, however, it turned out to be easy to change the properties of the elements.
But I have two questions:
I'd like to add rivers and forests on the maps. So Ive considered to set a background image instead of the geomaps figure. But I can't find a way to get this one fixed. Is there a way to set a background picture for a country or region?
How can I change the shape of the "bubbles" when you select a city e.g. "London"? I'd like to change it to a square.
Thanks in advance for your help!
Unfortunately what you're looking for is not available in geocharts in their current implementation.
Using a background image is possible in the sense that you can use CSS to make all shapes in the map transparent, and use a background image in the div to make it appear as if the little circles are being drawn on a map with forest and rivers, but you will run in to two big hurdles:
Your map will need to be identical in size/layout to the Google Maps SVG
If Google ever changes the SVG they use (or the view/projection they use) you will need to edit yours too
This isn't ideal, obviously. You could work around it by creating custom javascript to write rivers and forests on your map, but that is going to be a huge headache (especially if you are using multiple maps/views).
As for the circles, you can't change them to squares without hacking the actual SVG in the background with javascript. While this is definitely possible (if you're really good with SVG/Javascript), it again isn't using any of the fancy features of geocharts, and is more just a custom solution that will have to be updated if/when google updates their API.
Rather than doing it that way, you may want to look in to the same implementation on google maps itself. That will allow you to use custom markers, draw custom shapes, etc. with a lot more flexibility (and a much more stable API).
I am new to D3js and working with the parsets reusable chart (http://www.jasondavies.com/parallel-sets/). I want to make changes to this chart such as adding sort based on thickness of ribbons on mouseover, and overlaying two parallel sets over each other to compare different datasets at once (The one at the back being faded).
Being new to D3js, I am having difficulty in understanding where to start. I am currently trying to understand the code of d3.parsets.js but its not going too well. If anyone has worked with this before and understands the procedure being followed in the code, please help me out.
The best adaptation I've seen of d3.parsets.js is by Hongjian Yang: Airline Vis adapted from d3.parsets.
It may be able to accomplish some of what you're looking for, though I'm not sure you'll readily be able to overlay two datasets (nor am I sure I understand the need to do so).
I am building a map navigation for a client and am stuck! I have built the map using and coords and all is fine. However I now need for each region to change colour when you hover over it.
I have done this before with simple sliced-up PNGs in Photoshop but because of the complexity of the map and overlapping items this isn't an option. I don't even know where to start - have tried some different tutorials and a lot of googling but can't find a good solution.
Here is my map so far: http://www.wiredcanvas.com/uploads/map/map.html
I want it so that when you click on a region it will turn a different colour - and I may also add a tooltip if necessary.
Any advice or help as to where I should go from here very gratefully received!!
Thank-you in advance
Alice
I am really sorry to post this question, because most likely the solution will be really simple. But I am completely out of search string ideas.
I have a running Geoserver and some custom shapefiles describing buildings etc. I can requesting maps as pngs with the WMS interface and display on a website. So for so good.
In the next step I want to enable the user to specify a coordinate an draw a little marker on the map. This position should not be stored anywhere, I just want to draw it for this user. I am pretty sure this is possible with a WMS request and an inline feature, but I had not any luck finding a working solution and I am out of google search strings.
Please help me before I start drawing overlays over a png map.
You can do this with an inline feature in your SLD - See http://lyceum.massgis.state.ma.us/wiki/doku.php?id=wms:sld:inline_feature for an example.
You can let OpenLayers do the drawing on the client.
Check this example to see how it can be done. It demonstrates how to draw lines, points, and polygons:
http://dev.openlayers.org/releases/OpenLayers-2.10/examples/draw-feature.html