Defining Regions in a US Map Using D3.js - javascript

I am displaying a very basic map of the US; just the states. What I'm looking for is a good method for dividing the map into regions, with a single hover (all the states in the region change color) and click listener.
So far the best option if found is here: How/Where do I get geoJSON data for states, provinces, and administrative regions of non-US countries?
That seems like a lot more work than it should be. Anyone have suggestions for a better method than importing 50 different shape files, and manually editing them into regions?

This demo is near what you want:
http://bl.ocks.org/mbostock/4060606
http://bl.ocks.org/mbostock/raw/4060606/
http://bl.ocks.org/mbostock/raw/4090846/us.json
What you're going to want to do is manipulate the us.json file; offhand I don't see state names but I see ids, create your regions by merging states in the region into one ID.
try applying your own onclick/hover, if you can't get it, share what you tried and we'll go from there.

Related

How to add location-pin to Cartagen map?

I don't see much mention of Cartagen on stackoverflow, so please point me somewhere else if there is a better forum for this question. I am using Cartagen JavaScript library to render a map in the browser. I want to place a location pin on the map. I figure there must be an easy way to do this but I haven't been able to find it in the documentation or code.
I found a way to place a map-pin. I used User.set_loc() to set the location of the default User. Then I used User.mark() to mark that location. I changed the code in User.mark() from drawing a circle for the mark, to using ctx.drawImage() to put my .png of a map-pin on to the map. I might be able to make other pins if I make other instances of User.
This use of User.mark() did not create an object that will be automatically be used on every redraw of the map. For that I think I might have to use something like the User.add_node() and User.toggle_way_drawing() whereby a node is created, tagged with "user_submited", and put on the Geohash.objects array. The Geohash.objects array is used by Gartagen.draw() to add user-submitted objects to the Cartagen.feature_queue which are then rendered on the map.
But I haven't totally figured out the use of User.add_node() yet, so instead I added code to Cartagen.draw() to call User.set_loc() and User.mark() every time the map map is redrawn.

JS world map plugin with custom regions

I try to display a big world map on my website with Javascript and/or Jquery.
The particularity is that I have to set and draw specific region with a custom list of countries. Exemple :
All the countries with French language (France, Belgium, Switzerland etc...)
All the countries with Spanish language (Spain, Columbia etc...)
Then, the visitors would be able to click on these custom areas to get more info. I found a lot of plugins (Google GeoChart, Mapael, Kartograph, jVectorMap) but no one seems to serve my purpose.
I'd like to avoid HTML image map.
Thanks !
Question is pretty broad but I will try my best:
Your best bet is to use the JavaScript API and embed a map in a div, from there you will have access to Google Maps API.
In terms of your implementation, I guess you could go a couple different ways, you could show 2 different markers for Spanish and French countries with click listeners and more info on the country, or you could get more fancy and draw polygons/polylines. If you go Marker route, it's easier so I would recommend that.

Tile-based map solution supporting vector layers

I need to display a map of the US and, above that, a layer of states, another of counties and another of places (as per defined by US Census). Also, depending on some criteria, I need to dynamically toggle one layer or another, and to colorize some parts of the layer (e.g. fill some counties in red, others in green, etc). The map itself can be plain simple, I don't need roads or anything that detailed.
My first attempt was done with d3 based on this example, but I'd really like to switch to a tiling-based solution as it seems more responsive, lightweight, smoother and better supported for mobile devices.
I've been looking on the web for a solution (commercial and non-commercial, as a service or locally implementable) but I haven't found one to fulfill all my needs. For example, I've found MapBox which even has a very nice editor, but you can't fine-control the layers you define. I can hide/show a layer, but I can't colorize just a part of it. Google Maps was of course my first option but I didn't find a way to do as above.
Do you know if is there any solution out there that I could use?
I would have a look at the products supplied by boundless. They enable you to use a wide range of technologies and provide the final product in a number of ways. They use Geoserver as a tiling server into which you can output tiles or features depending on what your needs for that layer is.
You can connect to it using ESRI, Quantum GIS or use the included web based map. They are open source so there is a community version that can be used for free or a commercial version that is basically the same but comes with enterprise support.
You can find them here.

how can i create a dynamic map that shows our company locations?

I'm searching for a jquery plugin that allows me to create a dynamic world map and mark the countries that we have a branch there in a different color or put a logo of our company on that country.
I need to have access to that map so when a user clicks on a country i can fire a jquery event.
i think Google has something like this but I'm not sure
Thank you
I'm not quite sure what is your intention. But think you may draw your attention follwings.
http://www.gethifi.com/blog/jquery-vs-flash-for-interactive-map
http://code.google.com/p/jquery-ui-map/
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-basic-example.html
http://jqvmap.com/
http://jquerygeo.com/test/examples/events.html
These are the best I found so far

What language to use to create maps dynamically

I want to create a map dynamically and display it on the website. You can call it to be more of a graph than a map. Here I take the source and destination from the database. There can be many sources to a destination or many destinations for a source or both. Also there can be many other locations directed to/from source/destination. Source and Destination will always be there. But other locations are optional. So for example the route could be
L1 --> L2 --> Source --> Destination --> L3 --> L4.
where L1-L4 are locations (optional)
I want to depict this diagrammatically on a website. The user should be able to click on a each location/path (depicted as the arrow line above) and a popup should be opened. In the popup some data editing can take place. Also along the path(arrow line) some data has to be displayed. Basically all HTML,JS functionality should be available for this diagram.
Can someone please suggest me which language I can use for this?
I checked out some of the map APIs. But they expect some kind preloaded image to be present. That is not possible in my case.
The site I'm working on similar to any air fare info site, where we select multi city and get different rates for different airlines. I want to show this graphically with nodes representing locations and lines representing paths and should show rates along paths and stuff like that.
Any pointers will be appreciated.
Thanks
Some of your options are: SVG, HTML Canvas, or HTML+CSS. Given your desire to track events per object, I would rule out HTML Canvas: binding events to objects in a retained drawing system is much easier than manually processing events based on mouse position.
I would recommend using either SVG (if you can limit yourself to browsers that support it) or a drawing API like Raphaël to abstract support over SVG and VML for IE. You will have far more flexibility of drawing and hit detection than using HTML divs plus backgrounds.
Although I haven't used it, Google found the Joint library (that uses Raphaël) for a higher abstraction than the drawing level. Perhaps this meets your needs.
If I understand you correctly, it sounds like the google maps api would work for you:
You can find more info here. here
Additionally, you may find this info useful.

Categories