[GIS] Adobe Illustrator to Interactive Web Map. Need the basic requirements and steps

googleillustratormapsweb

I have a set of city maps designed and customized in Adobe Illustrator with me. This is the first time I'm involving a GIS project. I need to develop an API & GIS supported interactive Web Map (Like Google Maps) with using that AI files. I don't know where to begin and what all are the requirements to start with.

EDIT: Hi Andrew Tice, I would like to use QGIS (Since it's a Open Source). If that's not effective with features, I Don't mind using commercial packages too.

NO, The maps i have are NOT from existing map, they're drawn in our own way with some extra elements (like cartoon/game maps). I would like to develop an interactive web map using them.

Best Answer

If you want to create a tile-based Google Maps style 'slippy map' where custom tiles are geolocated and served up from a server with different levels of detail at different zoom levels, geolocated interactive features, etc etc, the best and simplest option I'm aware of is Mapbox's TileMill (examples, docs), which is designed for the purpose. And it's open source!

(I believe there's also the option of paying them to run a server with it set up for you if you don't want to be/hire a sysadmin)

While it's mostly geared up for realistic geographic maps from things like shapefiles that have data about latitude, longitude, projection formulas and so on, it can also work with plain old images.

Here's a blog post walking through the steps using plain images from Inkscape ('the open source Illustrator'). Key principle: it's all about making a master image, chopping it into 'tiles' for different zoom levels, then feeding the tiles into TileMill and setting up any other interactivity.


Depending on how much sophistication you need, you might want to create your own geographical information - e.g. a co-ordinate system like your own equivalent of latitude and longitude, and a data schema for things like location names and types. This means converting your images into conventional GIS files like Shapefiles, adding that GIS-specific metadata, then pumping these into a 'slippy maps' tool like TileMill.

Apparently, QGIS can take SVG import, which you can get out of Illustrator. If that doesn't give good results (Illustrator's SVG isn't perfect) you might get better results via Inkscape, or using another file format like DXF (apparently GIS software have worked with DXF much longer than they've worked with SVG).

Related Question