I want to make an interactive map web application for a game that I play. Basically I want it to be a kind of Google maps clone, where I have a vector-based graphic of the region area and I can zoom in and out to reveal certain level of detail.
My research into map APIs has returned little results. OpenStreetMaps and Google Maps only allow custom maps with real geolocation data. My project requires the creation of a map with nonexistent locations. Does anyone have a suggestion on how to approach this? Thanks.
I think you can use "real" GPS coordinates and then customise the base layer beneath. The GPS Lat Long coordinates (between -90 and +90 each) offer as good a scale as any to then locate your fictional positions.
Google Maps has an API that allows putting custom layers and base maps here:
https://developers.google.com/maps/documentation/javascript/maptypes#CustomMapTypes
OpenStreetMaps will also allow this. Some recommended guides available here:
https://switch2osm.org/serving-tiles/
Good luck!
Related
I want to add a 3D layer showing cloud location and elevation on a Google Maps.
The idea is that when you tilt the map (ctrl+drag in Earth mode) you could see how high each cloud is.
I found this article which explains how to add 3D buildings but it's "fakes", cheating with the latitudes to get some height effect:
http://johndyer.name/drawing-3d-objects-and-building-on-google-maps/
I couldn't find anything up to date in the doc.
Google seems to be silent about 3D features in Javascript API. Closest I can get to this are Styled Maps but nowhere does it specifically indicate 3D. Only Android implementations are available as of now.
I did some research and found this library which help you build 2D and 3D: https://github.com/OSMBuildings/OSMBuildings
Another option is Cesium JS:
An open-source JavaScript library for world-class 3D globes and maps
https://cesiumjs.org/
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.
If I do a search for a city or neighbourhood which google recognizes, like Fernwood, Victoria, I get a pretty map with a drawn boundary. Is there any way to access this kind of information with the google maps API?
I am not looking to draw my own lines on maps, I am looking to make a map showing multiple neighbourhoods with limits on the same map. Bonus points for the ability to style these limits (eg: fill them in like a regular polygon)?
I'm pretty sure that this kind of functionality is not supported by the api and works only for google maps.
I had implement this by finding the boundaries that i needed insert them in my postgis db and then send them with json whenever the polygon was within the map viewport.
Hope it helps
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.
Is there any way to highlight/display on Google/Bing/(any other map provider) Maps whole street (from the beginning of the street to the end of)?
I know the existence of Polyline in Google Maps API, but it's just connecting two latitude points, and there is no way of making it automatic so I could display any street in some city.
Also I was thinking about Directions, but many street are 2 way, there is no guarante that you will mark whole street and it's just now user friendly. Example
You may want to check Mike Williams' article on how to snap points and polylines to streets with the Google Maps API:
Snap points (and polylines) to street
Especially this example:
Click on the map and a path will be drawn that follows the streets.
Take a look at OpenStreetMap. (Google and Bing won't let you access their underlying street data.)
You can show a map with OSM tiles, and use the API to query for the features you're interested in displaying on the map. OpenLayers is a javascript mapping library that could support this.
Here's a view of Chicago showing street vectors and other features overlaid on top of the map tiles:
http://www.openstreetmap.org/?lat=41.902104&lon=-87.626441&zoom=18&layers=B000FTTT
In Azure Maps you could access the vector tile road layers and use a data driven style based on the name of the road. Here is a tool that inspects the underlying data in the map tiles and highlights things that you click on. This has a lot of the basic functionality that you would need to achieve what you are asking for: https://azuremapscodesamples.azurewebsites.net/?search=inspect&sample=Inspect%20features%20under%20the%20mouse