Jump to content

 
Photo

Interactive multi-scale map of the Portland region

- - - - -

  • Please log in to reply
12 replies to this topic

#1
Matthew Hampton

Matthew Hampton

    Hall of Fame

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

I'm working on new map tiles (designed in ArcGIS) for our agency's map service that's live now.  There is still a bit of work to do, but I wanted to share the progress of my initial foray into web mapping.

 

You can view the basemap tiles via Metro Map.  If you're curious, be sure to zoom in and see the canopy-shading.

 

Attached File  Screen shot 2013-03-20 at 1.08.40 PM.png   653.81KB   7 downloads


  • François Goulet likes this

co-cartographic creator of boringmaps.com


#2
David Medeiros

David Medeiros

    Hall of Fame

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

That looks great Matthew. That's a clean easy to use interface and good looking maps.

 

What's the workfkow (in simple terms) of how you work with ArcGIS and Leaflet? Is the entire UI built in Leaflet?

 

We are trying to get our campus base map project off the gound here and are currently using ArcGIS Viewer for Flex. It's WYSIWYG, which is good for non-progammers like us, but I know there are better ways. Might have to investigate.

 

David


GIS Reference and Instruction Specialist, Stanford Geospatial Center.

 

www.mapbliss.com

 


#3
Matthew Hampton

Matthew Hampton

    Hall of Fame

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

Thanks David.

 

I could tell you more about the cartographic workflow than the back-end workflow  :rolleyes:.

 

But as I understand it - our talented developer (Ben Sainsbury) takes the Map Service, creates tiles with MapBox and serves them via Leaflet.


co-cartographic creator of boringmaps.com


#4
David Medeiros

David Medeiros

    Hall of Fame

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

Ahh, sorry I assumed you had done the development bit as well, but that is helpful (that's how little I know about this).

 

And the maps look great of course. I especially like the water body vignetting, not typically seen in an Arc map.


GIS Reference and Instruction Specialist, Stanford Geospatial Center.

 

www.mapbliss.com

 


#5
david17tym

david17tym

    Master Contributor

  • Validated Member
  • PipPipPipPip
  • 103 posts
  • Gender:Male
  • Location:North Wales
  • United Kingdom

Hey Matt,

I bet you're having some fun and games untangling all the under/over passes?

Nice clean design. Is the shading derived from Lidar?



#6
Hans van der Maarel

Hans van der Maarel

    CartoTalk Editor-in-Chief

  • Admin
  • PipPipPipPipPipPipPip
  • 3,890 posts
  • Gender:Male
  • Location:The Netherlands
  • Interests:Cartography, GIS, history, popular science, music.
  • Netherlands

Looks great Matthew! Love the tree shading and the water vignette. Very subtle.


Hans van der Maarel - Cartotalk Editor
Red Geographics
Email: hans@redgeographics.com / Twitter: @redgeographics

#7
Matthew Hampton

Matthew Hampton

    Hall of Fame

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

The basemap tiles were designed for thematic overlays, so tried to keep the color values subtle, however I realized that there is less room for subtly in web maps than there is for print.  There was a temptation to crank the color volume/saturation on some of the elements (similar to other basemaps) to create a stronger figure.

 

For elevation data I used a 10m at smaller scales, then blended in 15ft and 3ft for larger scales.  The canopy texture comes from highest-hit LiDAR postings.  The building footprints and stream centerlines are derived from LiDAR as well.

 

There are several aspects of this basemap still needing cartographic development including representation of over/under-passes, building outlines, and finer tuning of labeling rules so stay tuned.  I think we'll be baking tiles every quarter - simultaneously with the updates to our Regional Land Information System (RLIS).


co-cartographic creator of boringmaps.com


#8
Adam Wilbert

Adam Wilbert

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 276 posts
  • Gender:Male
  • Location:Bellingham, WA, USA
  • United States

looking good. Thanks for sharing the process.


Adam Wilbert

@awilbert
CartoGaia.com
Lynda.com author of "ArcGIS Essential Training"


#9
Michael Karpovage

Michael Karpovage

    Master Contributor

  • Validated Member
  • PipPipPipPip
  • 173 posts
  • Gender:Male
  • Location:Roswell, GA
  • Interests:Making beautiful, functional maps
  • United States

An exceptional map design, Matthew! Really like the look of it and the ease of use. Fast too. Looks like a lot of work you put into this. Really like the layers option too in upper right corner giving me different map options to view. Great job.


--
Michael Karpovage

• Savannah Historic District Illustrated Map
www.karpovagecreative.com/savannah

• Account Manager/Illustrator
Mapformation, LLC - Atlanta, GA office
www.mapformation.com

• Author of Map of Thieves
www.mapofthieves.com


#10
DaveB

DaveB

    Hall of Fame

  • Validated Member
  • PipPipPipPipPipPipPip
  • 1,055 posts
  • Gender:Not Telling
  • Location:Redlands, CA
  • United States

Very nice work, Matt!

I've got to get back up to Portland one of these days!


Dave Barnes
Esri
Product Engineer
Map Geek

#11
François Goulet

François Goulet

    Ultimate Contributor

  • Validated Member
  • PipPipPipPipPipPip
  • 688 posts
  • Gender:Male
  • Location:Mille-Isles, Qc
  • Interests:Cartography, History, Graphic Design and almost everything else...
  • Canada

Great map!

 

I'd like to do something similar for our organization. What's serving the tiles? 



#12
Matthew Hampton

Matthew Hampton

    Hall of Fame

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

Hi François,

 

Currently the tiles are being served with Tileserver.  It seems to be a rather effective and agnostic web 2.0 technology.


co-cartographic creator of boringmaps.com


#13
Matthew Hampton

Matthew Hampton

    Hall of Fame

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

In order to get proper looking highway shields I changed from Character Marker Symbols to Picture Marker Symbols which required the use of an .emf file (enhanced metafile). Thank goodness 10.1 supports .png's.

In either case the switch in symbol formats for 8 scale levels and ~21 highway shields required over 3,500 clicks in one hour. It almost caused carpal tunnel syndrome. If you want to watch one of the most boring 30 second videos, check out this swf video I made of the process for changing just one shield.

There must be an automated process!


  • Mike Boruta likes this

co-cartographic creator of boringmaps.com





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

-->