How to make an interactive city map without Flash - javascript

So I've looked at all the previous questions asked and found that nothing was answered to the point of what most are asking and I would like to rephrase the question asked about making clickable maps.
The idea - Have a map of a singular city in the USA that I could use jquery to outline the towns inside said city. I would then like to be able to go into further detail of said town showing things like shopping centers, parks, street names, available housing, etc.
I could use the map detail I received from the city to draw/outline all these small sections from a vector file I have.
This doesn't necessarily have to remain on the same page but it would be nice if it did.
If this could be too expensive hiring someone or too long to sit and code for one person, then my next option would be using Google Maps. Now I know that Google Maps doesn't have the most up-to-date visuals so I was wondering if it was possible to set up all my own markers and possibly pictures of locations if they don't exist on Google?
The Result - A custom map that's somewhat reminiscent to that of Google Maps only without the hassle of Google Maps itself and if there was a search option for the map using Google Maps as a last resort I wouldn't want the search results to display anything but locations within the city limits.
Or should I just use DreamWeaver to hot-spot a map that each link to their respective location details?
These are similar examples I've found but most are just hover and click but nothing further. http://davidlynch.org/projects/maphilight/docs/demo_usa.html
http://exploregooglemaps.blogspot.com.br/p/resources.html

there is a great plugin doing that, it is jvectormap :
http://jvectormap.com/
it is very lightweight & cross browser (vml is used for non svg support) & very easily extensible (which imo is better than have a plugin full of option you don't need, here it has the minimum then you add what you need) through on click, on mouse over call back to start with & that shall be enough for most cases.
lightweight if you convert your map correctly (limit to the max the level of details).
now the conversion of the vector map for use by the plugin can be tricky but there is a wiki about it :
https://github.com/datag/jvectormap/wiki/Map-converter-notes
i've redacted the part of the wiki about using GIS software on ubuntu. using SAGA-GIS was indeed a saviour & a good thing to learn to publish any map for the plugin in no time.
I'll add that i've tested anymap from anychart & fusionmap from fusioncharts and that imo jvector is the winner without any contest for cross-browser/customisation ease/flexibility/bandwidth/execution efficiency... & last but not least it is free !

Related

highlight building google maps v3

Im trying to highlight specific building within a map using the google maps v3 api. I was wondering if anyone had any idea how to do this. I've been looking through google api documentation and come across nothing at the moment.
For example: http://goo.gl/maps/GyrDB - This is a map of a section manhattan, as you can see the 3d building. Im trying to highlight specific ones on hover.
Thanks :D
If you have information about where the building is, then you can use a Polygon to highlight it. If you don't have information about where the building is, then you are probably out of luck. The Google Maps API doesn't have any way of interacting with the map at that level.
Now, I suppose that one thing you could do is:
download the Google Maps tile,
find the point in the image that the user clicked on,
do a flood fill of that point with some awful colour,
set to clear all the pixels which are not the colour,
overlay that image on top of your map
You would also need to be clever about buildings which lie in more than one tile.
HOWEVER, this might run you afoul of the Terms of Use. I know that they disallow modifying the artwork; I am not sure if this would count as modifying the artwork; you'd need to look carefully at the TOU and maybe ask a lawyer. Or ask Google. (Don't ask me, I am not a lawyer.)
In many countries, every building is a cadastral parcel and there Web Map Service (WMS) layers showing them, provided for free by state bodies.
Using these layers, you can get building polygon coordinates. For ex: https://snag.gy/WtU7ZT.jpg

Google Maps - Get Province outline from Google map

When searching for a Province in Google Maps, it outlines the map and adds a icon on the Province.
How would you get that from google without having to draw it point by point ? Im sure it's available if its showing on their maps.
Here is an example:
Western Cape, South Africa
I do not think it is directly available through the API beyond what you can achieve with the styling wizard
To implement it yourself you'd need to find a shapefile for the areas of interest, store it in a spatially enabled database, (like PostgreSQL/PostGIS), and then load the relevant polygons, which you can style freely. Alternatively you can create a custom tile layer, like this, (check the "density" box), or you may be able to load it using fusion tables, (not an entirely simple process).
See this similar question (doing the same thing for countries)
The answer can be applied to a province rather than a country.
Here is the closest I could come to that styling.

Display own places on custom Google Map

I'd like to create a map of a space system from a computer game.
I understand that you can use the Google Maps API to render your own map with custom tiles and placemarks etc (which I've done successfully), but I'd really like to be able to see hierarchical place names in the same way that you see New York, Brooklyn, Manhatten, Queens etc when viewing New York from this zoom level, and Chinatown, East Village, Hudson Square when viewing New York from this zoom level.
I've also had a look at Google Fusion tables, but they appear to be restricted to Earth locations only.
I suppose ideally I'd like a modified version of the google.map.Marker object that displays the name of the marker next to the marker itself and allows specification of the text-size and at what zoom level the marker text appears. But that feels like a hack.
Is this possible using the Google Maps API, or another browser-based mapping system?
EDIT:
D'oh, should have kept Googling. Someone's basically done what I was looking for here.
Self-answering the question so it doesn't keep coming up as unanswered.
I've used the code from Uncle Tomm's blog to solve the problem.
I just need a good algorithm for displaying nearby placenames without them overlapping... but that's another question!

Color in Country

I have a written up HTML file using the Google Maps API v3.
All I want to do is color a couple of countries, for example, color in China and Canada to red. What is a simple solution (that doesn't involve Polygons and thousands of coordinates) to color in countries?
After browsing previous StackOverFlow questions, there seemed to be three common solutions. However these 3 solutions do not seem appropriate for my situation.
Charts API
-I don't really understand if Charts API is a good solution for me because I have already have a file using Google Maps API. Unless Charts can be applied over my map, or synchronize with the map, this does not seem to be a valid solution.
Styling (With Styling Wizard)
-This wizard (as far as I know) deals with the style of general characteristics, like road, water, population, etc. Unless someone can show me how to assign a specific country a color, I do not see how this can work.
Polygons
-I saw the example of the Bermuta triangle and other people have suggested to get the coordinates of the perimeter of a country and create a polygon. This may work except I may need a thousands of coordinates in order to fully outline China. Perhaps there is a more simple method in which I can color in a country?
Use either FusionTablesLayer or KmlLayer.
Both take kml formated geographical data and render it on tiles, yielding better performance with complex or large numbers of polygons.
The Natural Earth data set is available in Fusion Tables, and contains most countries.
This might work for you if coordinates generated automatically in different resolutions depending on your requirements. all you need to do is to load an appropriate GeoJSON onto your map. See here for the complete answer which is done just by adding a couple of line of codes.

Google Maps API - How can I enable 'Points of Interest'?

I've seen some sites, that use Google Maps, have the ability to show 'Points of Interest' on the map. Similar to what Google Earth does.
Here's an example of what I'm talking about: http://i.imgur.com/5OCor.jpg
How can I do this? :/
As far as I know, Google Map does not have a 'Points of Interest' feature for you to enable.
But you always can do it on your own. First of all, you have to obtain a POI database, e.g. Open source POI database? - Stack Overflow
Next, select the POIs visible in the viewport. Then add them to the map using GMarker. You also have to add or remove the POI as user pan and zoom the map.
As you can see this requires fair bit of programming. Google Earth has already packaged this into a great application. But this isn't available in Google map API (that I know of).
One possible source of POI data is http://compass.webservius.com - it's a REST API allowing access to a database of millions of businesses in the USA, searchable by business type (industry code), latitude/longitude bounding box, etc.

Categories

Resources