I am searching for a script similar to mapper.js or Map Hilight which will allow me to control the colours of the map areas. I found found a few that work well but I also want to control the unactive state. This is where most fall flat. What I want to accomplish is on page load a map will appear and each map area will be a different shade of blue according to population density.
Please let me know if anyone knows of a good script I can use, cheers
UPDATED
Thanks guys, I managed to solve this using the map hilight script
what I did was actually really simple, just another case of RTFM or in this case, documentation. I used the Map Hilight script (http://davidlynch.org/js/maphilight/docs/).
In the js file there is an option: alwaysOn: true, I set this to false. Then I added this class to every area tag: class="{fillOpacity:'0.5'}"
I used the fill opacity to change the opcacity for each area based on the population density. Cheers
Related
I want to render two google map in one page. In First map I want to create some areas like polygons and edit it, and then into second map I want to display all available areas but not edit it. It's possible?
Thanks a lot.
Oh, absolutely Yes. It's possible my friend.
In Leaflet there is an option for icons to be div's instead of images. Which meant you could make a marker which is just text, essentially a label which could be moved by the user. Which is what I am trying to reproduce using OL3 with no success.
Is there anything available in OL3 to have text on the map which behaves like a Point feature? As in, can be moved in edit mode and attached to the map in a vector layer.
Yes it is possible if you set correctly the style for markers (without using an image):
new ol.style.Style({
text: new ol.style.Text({......
Look at the following working example:
http://jsfiddle.net/pfavero/yabta24t/13/
I think Overlay is what you need: see http://openlayers.org/en/master/examples/overlay.html
Hi Pardon me if this is repeat question or obvious one as i am new to programming
I am trying to implement an angular google map using this api. it has a property called options boxClass,boxStyle,content,disableAutoPan,maxWidth,pixelOffset,alignBottom,position,zIndex,closeBoxMargin,closeBoxURL,infoBoxClearance,isHidden,visible,enableEventPropagation as different values(seen from the JS file.)
Now i want to know what each one of those will do as it is not specified in their documentation. and mostly i wanna know how i can make the info window to appear on rightside of marker like shown here I designied the html for the infobox and when i give boxClass as the option the infobox is rendered properly but is displaying below the marker. i want it to be to the side of marker.
EDIT: let me clarify on certain points. I mainly wanted to know
1.how to remove the default close button and replace with mine. (which function to call for it to work )
2.how to use pixelOffset or another property to help me display the infobox to the side of marker as in example above without using margin or padding. gmaps api v3 specify the pixelOffset to be of type size. i tried various ways to offset the infobox so that it will shift but it seems i am using it wrong as the box either wont change its position or will be displayed at the top of map irrespective of the marker.
A lot of them are CSS properties that changes appearance and not really maps term. You can google them or learn from here.
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.
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.