I made something like this:
http://static.cmslog.com/testapp/google/terrain
What I want to achieve now is terrain map with grayscale styling like here:
http://static.cmslog.com/testapp/google/maps
For now I applied the same rules (saturation: -100 for all), but it doesn't work. I can't also achieve this effect here:
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
Does anyone know, how to make terrain map in grayscale so it looks like this image:
I didn't provide any code, as all I have is under links pasted above.
Also this method doesn't work :/
Sorry if links above will stop working after a while.
It does appear that Google do not allow [do not have the capability for] the terrain map tiles to show the land as styled. You can style everything but the land itself.
So: can't be done. The Terms of Service only allow you to do what the API is capable of, and it can't style the land in terrain maps.
According to what #Andrew Leach wrote, the only way to do it, is to convert terrain map images to grayscale (i.e. in PHP) and cache them in your own server. Then you can replace them in HTML, as I made it here:
http://static.cmslog.com/testapp/google/terrain-tweak
EDIT:
But as it's stated in comment below it's against ToS, so it can't be done in this way, and link is down now.
Related
On d3.js homepage, http://d3js.org/, any source code or examples on how the interactive hexagons are created? In particular, I have a set of photos and I'd like to create the same effect. i.e. on mouse hover, the tiles move a little and the hovered tile is highlighted.
If you look at the html source code, they use d3.js (of course) and d3hexbin.js, which is a library able to create and animate hexagons.
You can take a look on the code used in this page (thanks to dev tools) to learn how they use it.
I would like to implement a little map "like" Google Maps. Its a fictive one (Game Map). I should have the ability to zoom and move around. Also i would like to be able to put some markes on it and do a very basic routing.
My question is now purly conceptual. How would you realize this?
Map as background that scales and moves. Then an overlay like a Canvas object to draw over it? Somene has experience with this? I don't really know if this is the right approach.
Thank You.
Have you ever used a program called Impact?
its really useful when building games in HTML5
http://impactjs.com/
I don't fully get what you want but with jVectorMap ou can create you own vector(!) maps with markers and custom colors.
So I think it will help you.
I would like to make a simple website that has a picture of the United States. When the user hovers their mouse over a particular state, I want to display a tooltip with information on that state.
The main problem I'm having is that I want the boundaries of the state to be obeyed. I do not want to have hidden rectangles overlayed on the state image, but rather I want the tooltip to be responsive to every state contour.
What would be the most logical way to go about this? Does the type of image I use for the United States (bitmap-based vs. vector-based)?
Thank you for your help!.
Do you have any browser limitation?? because if you use a SVG image you can easy detect which states has been click with javascript. But of course this is not Totally support it in older browsers...!!
You can make the SVG image with Adobe illustrator as example export the image as SVG, and consume it in you html as code (you should open the svg image with a text editor copy and paste the code) and from them you can define which areas you will click..
best
Method 1 - use regular HTML with a regular bitmap image (probably png). Use an imagemap with tooltips. You can define circles, rectangles, polygons, whatever. It's just easy HTML, no javascript, but the image is static.
Method 2 - use openlayers.org and define your areas using a gpx / kml file or similar. This looks much fancier and you can zoom and pan and do all sorts of fancy things, including pretty HTML popups, but it requires much more work, including javascript.
You could use the html tag to map your image and define each particular state area as a polygon shape with a set of points to interpolate the state contour. It would be a hell of an effort thought.
You should use this solution. It's already pretty much done for you. Also check out the docs.
If you want to do something fancier with the mouseover, you could use qtip2, it works great.
Using the google maps v3 javascript API, it's possible to add 'GroundOverlays' as a picture. Have a look here:
http://jsfiddle.net/9YYJB/1/
However, I'm working on a project where I'm trying to add a texture to the whole world map. Obviously I can add a single, absolutely massive gif/png overlay but I'd rather add a tiling texture. I've been digging around in the API and can't find any way to do this.
Anyone have any ideas on how this could be done?
Thanks very much
Yes, what you want to use is an image map type. This allows you to add tiles on top of the regular Google Base Map. If you want to completely replace the Google tiles, you would need to implement a Custom Map Type. My favorite example of that is the Liberty City Map.
I need to create an interactive world map on the front page of a site, the view portal will be about 650x200 pixels. The interactivity would include the following, mouse-over a country would highlight (the countries are will literally be filled with "red" for example) that country and display the countries' name (preferably text in a div), I will also be linking the highlighting event with a that will highlight a country when selected.
I am having a difficult time finding a suitable solution, I refuse to use or learn a proprietry technology such as flash so it is not an option. I created a simple mockup using openlayers and a custom map image but the countries' markers load too slowly in IE6.
Also svg seems too large, as I tried to use RaphaelJS, but abondoned it when I realised the world map data is 1.2mb which is totally un acceptable for the front page of a site..
I am really at a loss on how I am going to do this, my last resort is to manually create 250+ (however many countries there are) pngs and apply mouseover events to hotspots in the image... but this is probably going to be a dead end too.. desperately seeking a solution, any helpful comments will be appreciated!
I developed jVectorMap for that purpose.
Why reinvent the wheel. Google Charts already does this.
I finaly settled with RaphaelJS, importing all the paths from an svg in inkscape, works amazingly well!
We've developed Highmaps, related to Highcharts, to easily solve data visualization problems like this. We also supply a map collection of over 350 maps, optimized for size to keep things lightweight.
For a drilldown example (loading more detailed map on mouse click) see this demo.
Highmaps is free for non-commercial use.
Do you have country coordinate data stored somewhere?
If so setting up functions to parse through the passed in data and create 250+ paths should not be that large.