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.
Related
I'm looking for a way to create a zoomable, draggable and customisable (add pins, draw trails, etc...) map using my own pictures (taken from various game maps).
I've found out about OpenLayers but I'm completely lost on how to use my custom files. I've also heard about tiles naming convention but I'm a bit lost too
Could someone provide some input on what external script I could use (does OpenLayers fit my needs?) and how should I get started?
Thanks in advance
Google has a pretty cool exemple of their Google Maps API on the moon. You can find it here and it should be enough to get you started. It's using custom images and the code is documented, have fun :)
I never used OpenLayers so I can't really help on that part, but you should try Google Maps first and see if It fits your needs. If not, you'll probably have more specific questions which OpenLayers might answer.
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
I'm planning a website which will use huge schematics, that is, raster images that are not photos. If they were photos and I were interested on displaying them as so, I would use either zoomify, IIPImage or PanoJS. Although all of these solutions offer HTML5 support, they are not entirely satisfactory for my purposes, as they are optimized for JPEGs, use arcane JavaScript or have non-smooth transitions.
So, I was thinking that perhaps I could use leaflet with custom tiles. That is, instead of connecting the javascript to a map server, I could connect it to my own tile-provider with the schematics. My rationale is that leaflet provides smooth rendering, the used tile pieces seem to be png, and that I could even use markers and vector layers. But I came to a stumbling block:
What kind of tiles leaflet expects? Where is information about that? Would the map projection, or other geo-specific aspects that I'm not aware of, be a problem?
Thanks in advance for any help.
Found it!
http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
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.