JavaScript map library with individual map - javascript

I would like to create my own map, based on the GoogleMaps functions. But not with the real world map. The map I want to create is a fantasy map. For example I want to make a map of „Middle Earth“ (Lord of the Ring) - not really but some kind like that :-)
I have already found some free libraries but this are always based on the real map of the earth.
It would be ok if it has only the simplest functions, like scrolling (zooming), add some pins or stuff like that.
No routing stuff needed...

You could use a mapping tool like http://leafletjs.com/ and load in custom tiles.
This guy used it I think to create an interactive map of Guild Wars 2 https://github.com/lpdumas/gw2cartographers I had a brief look at it a while ago, quite a lot of code

Another option for the mapping functionality would be OpenLayers, in practice it is fairly similar in usage to the Google Maps API if you have any experience with this. It's open source and easy to use.
You will however have to provide your own custom map tiles.

Related

JS world map plugin with custom regions

I try to display a big world map on my website with Javascript and/or Jquery.
The particularity is that I have to set and draw specific region with a custom list of countries. Exemple :
All the countries with French language (France, Belgium, Switzerland etc...)
All the countries with Spanish language (Spain, Columbia etc...)
Then, the visitors would be able to click on these custom areas to get more info. I found a lot of plugins (Google GeoChart, Mapael, Kartograph, jVectorMap) but no one seems to serve my purpose.
I'd like to avoid HTML image map.
Thanks !
Question is pretty broad but I will try my best:
Your best bet is to use the JavaScript API and embed a map in a div, from there you will have access to Google Maps API.
In terms of your implementation, I guess you could go a couple different ways, you could show 2 different markers for Spanish and French countries with click listeners and more info on the country, or you could get more fancy and draw polygons/polylines. If you go Marker route, it's easier so I would recommend that.

Custom Google Map

I can see mention, but no example of being able to use an image to create a Google Map (Or at least use their API). From what I can work out you can use the ImageMapType class in the API to create a map, instead of earth (or and area), an image like JPEG. Is this correct or am I barking up the wrong tree?
You might want to check out Leaflet JS for this. I've used it for custom tiles and it works well.
I found the tutorial I followed years ago. This should at least be a starting point... http://www.dicabrio.com/javascript/custom-world-google-maps.php

Interactive maps with overlay on mouse over

I have stumbled upon the world of javascripting and css just moments ago and I have been given a project by my adviser on interactive maps.
The problem is I don't have a clue on how i should start this project and one thing I want to know and find out is that How can I make an interactive map with just javascript , css and a little bit of php or cms?
I found these sites:
http://www.lglab.co.uk/usaSVG/advanced/index.html
http://edition.cnn.com/ELECTION/2012/ecalculator#?battleground
both are related to what I'm about to do.
I want to know how I could be able to code an interactive map like those in the examples above with a little bit of customization and without paying for tools
Try OpenLayers [ http://openlayers.org/ ] - its a free and open source javascript mapping toolkit. Check the examples for interaction and events and all that.
You need your data in some vector format - GeoJSON, GML - something like that. Then write a whole bunch of javascript to add layers to the base map and handle events.
Other Open Source Javascript map toolkits are available (eg Leaflet) but OpenLayers is the heavyweight master.
You need to learn SVG - the only way you can really make event-driven polygons.
See: http://www.netzgesta.de/mapper/
You can use geoJSON for this.
see http://palewi.re/posts/2012/03/26/leaflet-recipe-hover-events-features-and-polygons/

Imagemap layer on top of united states map... jquery rollovers

I am trying to just make a clickable united states map in html. I think the best way is to create an imagemap with my US image and then just use jquery from there for rollovers and such. Does anyone know the best way to make imagemaps with irregular shapes (states in this case). I was looking for something in photoshop but seems like they used to have something for that but now they don't.
Are you just trying to find an image map of the US? There are many online already made for you. For example wikipedia commons.
Here's my jQuery plugin for doing stuff with image maps with a demo using the wikipedia commons map.
I also made a simple online tool to scale image maps which is useful if you found one for something you need to use but it's too big or too small.
Dreamweaver might be you best choice: http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WScbb6b82af5544594822510a94ae8d65-7c13a.html

How do I create a zoom in/zoom out feature like in Google Maps

I want to create a web based tool that allows people to visualise semantic web ontologies. The visualisation will look like a tree structure. I want people to be able to zoom in and zoom out the way they can with Google Maps, to get a close look to make a selection or to get a overview of the main topics etc.
Can you provide some pointers regarding the zoom in/zoom out part. Maybe a jQuery library that provides these features?
PS: I know such tools already exist, but I think I have a few new ideas to try out during my weekends.

Categories