I would like to do something like what is shown in the screenshot - http://themanyfacesof.com/wp-content/uploads/2010/03/map.png
I want to be able to highlight certain areas on a map using PHP as a server side technology and jQuery(preferable) on client side with some tooltip functionality. Is there anything available or any idea how this could be achieved with the complexity involved?
Completely client-side solution: http://jvectormap.owl-hollow.net/
Look into using Google Maps for this. You can overlay lines and polygons which effectively means you can do anything - for example Loughbrough University does this.
A good way to start is to
Log in to Google
Go to Google Maps, then to my maps and create a new map
Draw polygons and line using the tools provided
Right click and copy the link for Google Earth, visit this link but change the output to KML output=kml. KML is just like XML
You now have a file with the exported polygons and lines that you drew. You can then re-draw these onto a Google Map programmatically
I did this the other day to get some rather complex polygons drawn onto a map without having to trial and error the latitude and longitude coordinates for them.
Hope that helps.
Related
Bing maps v8 - I am trying to represent more than one icon/symbol at a particular location in the map.
For example, at a particular location, i want to have a pushpin that denotes the location plus I want to have another icon/symbol below the pushpin which represents the severity of the location say (highly crowded - red, moderately crowded - yellow, and less crowded - green).
I am not interested in showing this in the pushpin (image) itself, but I want to have it under the pushpin image along with the title of the location.
With version 7 of bing maps, it was possible to add - atleast a border with different color for puspin image which would satisfy my requirement, but in v8 bing maps it is not possible to add custom CSS/HTML.
Also I want the puspin to be draggable. There are HTMLPushpins but they do not supply proper dragging of pushpin.
Any help at the earliest or need more info? Thanks in advance!
A sample image : As you see the markup in the following link works, but it just does not work in bing maps I dont know why!
`https://jsfiddle.net/BalakrishnanE/19z7rd1h/#&togetherjs=NwAKHyPv9G`
I highly recommend taking a look at using SVG templates for pushpins. This will allow you to easily change the color using the shapes color option. Here is a tool that provides some examples of different SVG pushpin templates: http://bingmapsv8samples.azurewebsites.net/#SVG%20Pushpin%20Maker
If you can provide a screenshot of the pushpin you want to create, I can see if I can put together an SVG template that matches it.
I have a map created in My Maps, and I wand to embed it in a website, however I'd like to have InfoWindows on marker click instead of the default side panel, and change the description a bit.
From what I found, the only way to do so is to use a regular Google Maps API and add my data onto it with a KML layer. This is working, however, the icons (the pins) are highly pixelated and look terrible. When using the same map via embed (or simply opening it) they are OK.
Would really appreciate any help with the issue. Probably there is another way of adding a custom map to an API-powered map?
The answer I've come up with is: no way to achieve what I'm looking for.
When exporting KML layers, Google scales all icons to 32X32 px, and then scales them up (kml file contains scale 1.1 directive). Even if you change the scale, the files remain 32X32, so it does not help; you need to create another files, in other words: the kml exported from Google is not usable if you have custom png icons.
I ended up using regular markers instead of KML layer.
Google maps does a very good job highliting the neoghborhood boundaries polygons:
The underlying polygon data is very good. It's definitely better than Foursquare's Quattroshapes.
Since I don't think there's a way to extract this data from Google, I thought that maybe it would be possible to show / highlight and manipulate these polygons as first class objects inside Google Maps using the Google Maps Javascript API?
What I would like to do is i.e highlight only a subset of the neighbourhood polygons per city, change their fill colors based on my own data, etc.
Another option would be to get the polygon data from Google and draw the polygons myself, but I'm pretty sure it's not really available. Does anyone know?
Thanks!
Unfortunately, you cannot get the information directly through the JavaScript API. If you can find KML data online (or make some yourself), it can be loaded through google.maps.KmlLayer.
It is pretty easy to make KML layers in Google Earth. So if you only need 1 city, it may be a good time investment to make.
I was drawing polygons using Polygon Creator Class on Google Maps. As you see this tool is not easy to use. For example, it's impossible to add new polygon or edit some of them after getting result code.
In following link when you zoom in between polygons you will see gaps that I want to remove. To recreate the issue please open following link and zoom in between polygons:
http://jsbin.com/bovogaqowu/1/edit?js,output
Now question is, how to remove gap between these polygons ? In this case I can't use the tool that I used to create this map.
And which tool is better to use in this situation ?
Thank for your time
I would suggest you using the Google's official tool for drawing, editing, locatiing and even finding driving directions for the markers you have placed on the maps. You can always save these edited maps and retrieve them later when you need them.
Please click the following link and get started!!
Even I tried drawing some polygons side by side and there were no gaps :)
Hope this would help!!
I want to show different places over an OpenStreetMap with different types of marker as two or more markers can have same text on their markers and there are a lot of markers like those with different text and the whole work will be done when the body loads.
Can anyone give me appropriate suggestion?
Thanks
Khandaker Mustakimur Rahman
I think what you're asking is how to draw a series of markers with popup balloon text over a map that uses OpenStreetMap data, and display that annotated map in a web page. If that's the case, you'll need to
Find a map server that can serve the OpenStreetMap tiles, or make your own.
Use a JavaScript map-drawing library in your page to load tiles from the server, draw them on the page, and the place markers and popups on the map.
Two easy options I know of for map servers are the ones hosted by CloudMade, which you'll need to sign up for a free developer key to access, and the ones hosted by MapQuest, which you can access freely without an API key.
There are several JavaScript libraries that you can use to draw maps in a "widget" on your webpage, but the most common are OpenLayers and Leaflet. Each of these libraries has a basic tutorial showing how to use it to draw a map on a page, though Leaflet's is nicer and friendlier. Once you decide on which library to use, you can look through its documentation to find out how to draw markers with text in popup balloons, or come back to StackOverflow to ask a more specific question.
For a good overview of the technologies involved in drawing an OpenStreetMap map on your web page, check out switch2osm.org.