Jump to content

 
Photo

tools for creating Web maps

- - - - -

  • Please log in to reply
12 replies to this topic

#1
Dennis McClendon

Dennis McClendon

    Hall of Fame

  • Validated Member
  • PipPipPipPipPipPipPip
  • 1,170 posts
  • Gender:Male
  • Location:Chicago
  • Interests:map design, large-scale maps of cities
  • United States

I'm curious what tools folks are making use of these days to put maps on the Web for clients.

 

I did some maps of the Chicago region for a book author, and he now wants a website offering folks insight into these sites of natural beauty (most are public parks).  He'd like the map to "allow a window to open up when pin is clicked (or on mouse-over) and it would show, say, info about the site, possibly a small standard picture, and a link to a more detailed page."

 

I can hand-code something that uses the maps I made for the book, with a usemap that makes hotspots on the map to open a new window.  And I think I could figure out how to use Leaflet and MapBox to put Open Street Map content, with my own CartoCSS styling, into a window.  But I wonder if there are other toolsets I should be looking at.  The author mentioned ZeeMaps, which was a new one for me, but it looks like that's just placing Google Maps markers.


Dennis McClendon, Chicago CartoGraphics
chicagocarto.com

#2
David Medeiros

David Medeiros

    Hall of Fame

  • Moderator
  • PipPipPipPipPipPipPip
  • 1,312 posts
  • Gender:Male
  • Location:Redwood City CA
  • Interests:Cartography, wood working, wooden boats, fishing, camping, overland travel, exploring.
  • United States

Depending on the specific use case I use: CartoDB, ArcGIS Online, Google Fusion Tables, Google My Maps, or export for web from MAPublisher.

 

Most of those allow some customization of the pop ups through html or java script for things like embedded graphs, pics, or live links. In some cases you can embed sound files or even movie clips.


GIS Reference and Instruction Specialist, Stanford Geospatial Center.

www.mapbliss.com
@mapbliss

#3
tangnar

tangnar

    Master Contributor

  • Validated Member
  • PipPipPipPip
  • 143 posts
  • Gender:Male
  • Location:South Carolina
  • Interests:Rivers, Urban Design, Geomorphology, Bicycling, Outdoors
  • United States

There's also a plugin for QGIS called qgis2web that will export from qgis to Leaflet or Open Layers web maps. It gives you a very quick jump start on those platforms because it creates all of the initial code for you, maintains your styling options, and gives you a handful of options for output.  For basemaps, there's a very helpful gallery of basemaps with associated code for leaflet. 

 

All you have to do is host the code somewhere.



#4
skorasaurus

skorasaurus

    Contributor

  • Validated Member
  • PipPip
  • 44 posts
  • Gender:Not Telling
  • Location:Cleveland, OH, United States
  • United States

Hi Dennis,

 

As cartographers know for any map, there's no one tool that can get the job done for every map. The same is with making maps and visualizations on the web.

 

For what you describe, leaflet, cartodb.js or mapbox.js (the latter two are forks, or extend the functionality of leaflet with their company's services) are very suitable tools for what you're looking for; all 3 offer the capabilities that you're asking.

 

I personally would lean toward leaflet and mapbox.js but for me, that's because I'm most comfortable with those tools and mapbox's examples page is pretty comprehensive (https://www.mapbox.c...ox.js/examples/ )

 

The available tools and each tools capabilities change rapidly; the online comprehensive comparison of feature capabilities of tools is at http://cartographicp...roth-et-al/1348 - done in 2014 and is already outdated; I wouldn't use several of the libraries (wax, modest maps) listed on there as they are no longer supported by their developers.

 

I second looking at qgis2web as well; I've only used it once but it sounds suitable for your activities.



#5
Dennis McClendon

Dennis McClendon

    Hall of Fame

  • Validated Member
  • PipPipPipPipPipPipPip
  • 1,170 posts
  • Gender:Male
  • Location:Chicago
  • Interests:map design, large-scale maps of cities
  • United States

From what I understand, Leaflet, etc. are ways to put someone else's maps (Open Street Map linework) on the Web.  I'm sure that has its value, but it's the modern equivalent of photocopying a National Geographic map and drawing a red arrow to put in your college term paper.

 

I keep trying to figure out how to put maps I've drawn for a special purpose on the Web in some slippy interface.


Dennis McClendon, Chicago CartoGraphics
chicagocarto.com

#6
David Medeiros

David Medeiros

    Hall of Fame

  • Moderator
  • PipPipPipPipPipPipPip
  • 1,312 posts
  • Gender:Male
  • Location:Redwood City CA
  • Interests:Cartography, wood working, wooden boats, fishing, camping, overland travel, exploring.
  • United States

Not necessarily, if you can create a web tile set of your map and host it somewhere you can use those tools to push the tiles online as a slippy map. MAPublisher (if you use it) can export directly to Web Tiles. I'm sure you could do the same in QGIS (from QGIS art or from a geo referenced image export of you map from AI etc.)


GIS Reference and Instruction Specialist, Stanford Geospatial Center.

www.mapbliss.com
@mapbliss

#7
Matthew Hampton

Matthew Hampton

    Hall of Fame

  • Moderator
  • PipPipPipPipPipPipPip
  • 1,413 posts
  • Gender:Male
  • Location:Portland, Oregon
  • Interests:Playing in the mountains and rivers.
  • United States

If you have a print quality map that you have already spent countless hours designing and you don't want to have to re-do everything using a completely different workflow - you might be interested in checking out MapTiler.

 

I haven't used it, but it was shared by Adam Wilburt (NACIS and Cartotalk contributor) at a cartography symposium in Portland last year.  His presentation slides From Paper Map to Slippy Map are available online.

 

I don't explicitly see a way to integrate pop-ups, but perhaps the Pro version allows that capability - if not, they should get to work.


co-cartographic creator of boringmaps.com


#8
tangnar

tangnar

    Master Contributor

  • Validated Member
  • PipPipPipPip
  • 143 posts
  • Gender:Male
  • Location:South Carolina
  • Interests:Rivers, Urban Design, Geomorphology, Bicycling, Outdoors
  • United States

Continuing/condensing from what others have said, I think you basically have three steps to figure out... Maybe there is some software/service that does all three steps, I'm not sure.

 

1) Generating tiles from your map. This turns it from a single image into multiple image tiles that are 'slippy'. Can be done with MapTiler, as mentioned, or ArcGIS if you have it. Probably some others. 

 

2) Hosting those tiles. You need to host and serve the tiles somehow. There are probably a handful of different options, from configuring your own server to using some a service, like MapBox or ArcGIS online. 

 

3) Rendering the tiles, and creating interaction like popups. Things like leaflet, mapbox, ArcGIS online. 

 

Something to consider... if your maps are in different projection Web Mercator, things could get weird depending on the scale...  



#9
Dennis McClendon

Dennis McClendon

    Hall of Fame

  • Validated Member
  • PipPipPipPipPipPipPip
  • 1,170 posts
  • Gender:Male
  • Location:Chicago
  • Interests:map design, large-scale maps of cities
  • United States

MapTiler certainly looks mighty interesting.

 

I stumbled across https://seattletransitmap.com/app/ which does exactly what I've been dreaming of doing.

 

To the extent I can understand the coding, it looks like the author just created his map in Illustrator, somehow exported tiles for zoom levels 12-16, and then is using Leaflet to get them into a web page.  I don't immediately see any clues as to what he used to generate the tilesets.


Dennis McClendon, Chicago CartoGraphics
chicagocarto.com

#10
tangnar

tangnar

    Master Contributor

  • Validated Member
  • PipPipPipPip
  • 143 posts
  • Gender:Male
  • Location:South Carolina
  • Interests:Rivers, Urban Design, Geomorphology, Bicycling, Outdoors
  • United States

That looks like a great example! it would be very easy to add markers with popups with leaflet. 

 

MapTiler certainly looks mighty interesting.

 

I stumbled across https://seattletransitmap.com/app/ which does exactly what I've been dreaming of doing.

 

To the extent I can understand the coding, it looks like the author just created his map in Illustrator, somehow exported tiles for zoom levels 12-16, and then is using Leaflet to get them into a web page.  I don't immediately see any clues as to what he used to generate the tilesets.



#11
Dennis McClendon

Dennis McClendon

    Hall of Fame

  • Validated Member
  • PipPipPipPipPipPipPip
  • 1,170 posts
  • Gender:Male
  • Location:Chicago
  • Interests:map design, large-scale maps of cities
  • United States

Bumping this topic again to see if anyone has any new ideas, as the same problem has arisen for a different client.

 

For some years I've done these poster-size maps of North America, 30 inches wide.  Naturally, they use a conic projection:

 

HzVYimW.png

 

The facilities represented by ovals, as well as city labels, have often been displaced a bit so they'll all show:

 

77fDNeg.png

 

Now the client would like to put this map on the Web, with the ovals clickable so they'll bring up name and facility info.  I thought maybe I should focus on zooming technologies like Open Seadragon or Zoomify—but those don't seem to offer a way to make part of the image clickable links.  Making spots on the map link to underlying data is the reason my clients want to put their maps on the Web.

 

I thought maybe jumping straight to SVG would be they way to go, but even a simple map produced a 2MB SVG file, and I never got it to display in my browser.

 

I could do it with calling up a quarter or ninth of the continent at a time as a dumb JPEG, and then putting a usemap on top, but that wouldn't be pannable.

 

I'd love to hear thoughts about this challenge.  Maybe just thinking of the right buzzwords to search will allow me to find that this problem has already been solved.  Setting aside that the object is a map, all I really want to do is put a large complex graphic on the Web and make parts of it clickable.  


Dennis McClendon, Chicago CartoGraphics
chicagocarto.com

#12
frax

frax

    Hall of Fame

  • Admin
  • PipPipPipPipPipPipPip
  • 2,420 posts
  • Gender:Male
  • Location:Stockholm, Sweden
  • Interests:music, hiking, friends, nature, photography, traveling. and maps!
  • Sweden

One way to go would be to build an SVG with interactivity - with everything except the ovals as a raster back drop. Ideally you would have that as tiles though, and you could try something like MapBox...


Hugo Ahlenius
Nordpil - custom maps and GIS
http://nordpil.com/
Twitter

#13
David Medeiros

David Medeiros

    Hall of Fame

  • Moderator
  • PipPipPipPipPipPipPip
  • 1,312 posts
  • Gender:Male
  • Location:Redwood City CA
  • Interests:Cartography, wood working, wooden boats, fishing, camping, overland travel, exploring.
  • United States

What frax said. This is not really a geospatial web-map issue, but an image map and interactivity issue that would be solved with java, html etc. That it's a map is more or less irrelevant. You just need to find a way to combine a tiled image and interactive popups for locations. I used to do this in MAPublisher with their flash export. Since flash started getting a bad rap, they added an html5 exporter to do the same. It packages up the map and any interactive elements you set into a single folder ready to be hosted online as an interactive map. I don't know how it handles tiling though, or if it can. 


GIS Reference and Instruction Specialist, Stanford Geospatial Center.

www.mapbliss.com
@mapbliss




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

-->