Archive for category Web Maps

Tools for Making Webmaps

Posted by G.P. in Cartography Profession, Web Maps on April 25, 2018

 

You call yourself an expert. You call yourself a consultant. And then you get a call asking how you would put together a web map for a small organization without much in the way of resources, that doesn’t know a lot about geo. And that’s when it hits you: sure, there are the big companies and products that come to mind like Esri’s AGOL, Mapbox, and Carto, but what else is out there? Could something new have popped up that I should advise they use instead? With an ever-changing landscape of products, both paid and open source, and all with varying nuances in terms of their limitations and strengths, how can we possibly know what the answer is with 100% surety?

Thanks to social media (not an oft-heard phrase these days, granted) I now have a great list of potential ways to make this map that I can pass along to the client. It seems this was a popular topic as the thread garnered quite a lot more discussion than most in the geo niche and as such, it feels like there is a need to put them all into one place in a post. Prefer to read the thread? Here you go:

 


Prefer a list? Here you go:

 

  • umap – open source and based on OpenStreetMap.
  • Google MyMaps – looks like it requires a google login. Upload a csv with latitudes and longitudes or addresses of up to 2,000 records. Or just plot straight on the map. Embed code provided.
  • Carto – make maps with on-the-fly analysis capabilities. Their site says they support educators (the field my client was in) with free plans.
  • Esri AGOL – you can probably do it all with AGOL and it isn’t too hard to get into even if you aren’t very familiar with geospatial technologies. The difficulty used to be in determining how much it would cost. But it looks like they may have changed their pricing plans to real dollars instead of points, so it might be easier. (Geoloket was mentioned as an example of an AGOL site that was built by one person for a small city.) Esri Story Maps were mentioned too, a sub-component of AGOL.
  • MapHub – upload via GeoJSON, KML, GPX and get embed code for the map.
  • MapMaker Enhanced – This is a WordPress plugin and hasn’t been updated recently.
  • mapzap – this looks pretty sweet. It provides a “builder” for making a map app and it is open source. Host on GitHub Pages for free.
  • QGIS – export from qgis to html, host on GitHub Pages for free. (Qgis2web was also mentioned.)
  • Someone who thought “doesn’t know much geo” meant that the person was a dev (they’re not) said “R, leaflet, and five lines of code.” But for a dev this is something to look into for sure. Someone else suggested the combination of Leaflet, QGIS, and json, which is along the same line in terms of needing dev expertise or at least geo expertise. While we’re mentioning these techs we should also mention GeoServer, OpenLayers, D3, Tegola, Maputnik, and Fresco! Again, expertise is needed for all of these (or a lot of time).
  • Astuntech’s iShareMaps (edited 4/26 to add info from Astun Technology) – aimed at local authorities in large, enterprise types of environments.
  • Geojson-dashboard – this looks pretty interesting. You need a GeoJSON file and I’m not sure what you do about basemap needs. 
  • Geopedia – this seems to be for satellite imagery?
  • Mapbox – you can definitely do everything needed with mapbox and they do have a free plan.
  • GitHub Gist was also mentioned.

 

Well, I’m exhausted. 

 

BTW: that list is in absolutely no order and I am not endorsing these or saying that any of them are better than any others. In fact, I know very little about several of these and it is very likely that good details have been left out. But it is always nice to have a handy list of potential tools to take a look at from time to time to keep the ‘ol consulting brain in tip-top order. 

Lastly, there is a wiki list of GIS software here. It does not contain all of the above ideas/options though and, indeed, a tool to make a webmap need not be a full GIS package and a full GIS package need not have the capability to create a webmap (it might instead do analysis and output static maps for example). So this list isn’t too helpful for the use case outlined at the beginning of the post but could be helpful to someone else with a different use case.

4 Comments

Natural Earth Quickstart Style Implemented with Tegola

Posted by G.P. in Web Maps on April 6, 2018

 

NaturalEarthQuickstartStyle2

 

NaturalEarthQuickstartInspector4

 

Natural Earth came out with a newly updated version recently and the group I’m working with decided to be one of the first to use it in a comprehensive vector tile map. There is a “quickstart” style implemented in QGIS and ArcMap but we wanted one implemented in Mapbox GL JS.

Check out the new Tegola Implementation of the Natural Earth Version 4 Quickstart here.

We’re using the minzoom feature of the new data in the Tegola set-up so that only features that have minzooms less than the current user’s zoom level show up. It’s such an easy way to filter data it’s almost not even fair.

 

minzoom

 

The various files used in this implementation include the script to download the Natural Earth data into a PostGIS database, the configuration file that Tegola uses to configure that data, the style file that styles that data in Mapbox GL JS code, and of course the Tegola software itself (use the non “cgo” version for a PostGIS database, use the “cgo” version for geopackage data.)

 

I put together a quick visual guide on how Tegola can be used for those who maybe want to just see what it is all about without going through the process. 

 

There is some great, official, Tegola getting-started documentation to explore as well. And Eric Theise put together a Hello Tegola blog post that goes much more in depth.

 

See Nathaniel Kelso’s Natural Earth repo for more information on the data and to see the styling implemented in QGIS and ArcMap (the styling such as colors, line-widths and which datasets to show and how are all translated from those original Kelso styles.)

 
 

No Comments

Creating a new Hot OSM map

Posted by G.P. in Web Maps on April 27, 2017

 
Using Tegola and Tegola-OSM I’ve been working on approximating the HOT OSM map style in Mapbox GL. Using the handy CartoCSS available for this style, by-eye comparisons with the raster tile map, and personal interpretation for the 3d building elements, we’ve got this going:
 
nyc2

 

View the demo live here. It’ll be a bit slow and not so great at zoom 4, but we are working on that. I mean, it’s the OSM data of the entire world styled at all zoom levels (plus a bit of natural earth data for admin boundaries and more to come) so there’s a huge amount of data to work with here and lots of things to work out to get right.

If you aren’t familiar with vector tile maps, note that you can shift the pitch (tilt) via Ctrl + left-click + drag. That’s something that we cartographic consultants need to start teaching our clients. Also, different parts of the GL spec are operational on desktop vs iOS vs Android so depending on your device your results will vary a bit at this time.

Maputnik, for the most part, makes it “easy” to style a map as long as you have an endpoint like Tegola serving up some good data (the Tegola endpoint is still very much under development and is undergoing some optimizations and doesn’t have every single map item we’d like to have quite yet).

I say “easy” in quotes because as with everything there is still a learning curve and, as with everything, it is still under development as well. There are a few things that have to be added to the style.json by hand so anything beyond its interface capabilities will require knowledge of json.

Like the data-driven styling on the buildings in this map. You can see an example of that in the image above where the hospital building (type=hospital) is a bit reddish compared to the other buildings. In Maputnik this style still looks like all the buildings except the hospitals and schools are black whereas live it looks the way it is supposed to. Thus I await with eagerness the incorporation of all the cool new things available in the GL spec. :)

Here’s that bit of code for the building tilt data-driven styling. You can see the “default” property isn’t used and instead, mysteriously, the empty quote does the job for providing the default gray color.

codesnip

 

One of the more interesting style choices that came up was where to put the road labels. Google maps puts road labels above 3d buildings when you view on your mobile device and tilt (two finger swipe). This might be ideal for a small amount of screen real estate when you’re using the map for navigation but I think that on larger screens and with different map purposes the street labels can look cleaner when they are beneath the 3d buildings. Take a look at this thread for some opinions on this:

 


 
 

————————————————————————————————————

No Comments

Posted by G.P. in Design, Web Maps on January 6, 2017

I’ve been using a new vector tile style editor to create some maps. The editor is called Maputnik and is still in early development, but it is usable even at this early stage. I’m really impressed with how much of the mapbox gl js spec has been implemented and the multitude of complex tasks that it makes easy.

Here’s a couple of screenshots from a style I’m working on called Camo:

screenshot1 screenshot2

No Comments

Creating an Aspect-slope Map in GeoServer

Posted by G.P. in Analysis, Web Maps on June 22, 2016

An aspect-slope map (sometimes called a slope-aspect map) is an overlay of a semi-transparent slope map on top of an aspect map that is styled with a unique hue for every 45 degrees of slope direction. To put it visually:

aspect_slope_visual

To do this in GeoServer, you need slope and aspect raster datasets in degrees. Create an SLD for each with the following syntax (I’m not including the whole SLDs here for brevity).

SLOPE SLD

<sld:ColorMapEntry color=”#999999″ opacity=”1″ quantity=”10″/>
<sld:ColorMapEntry color=”#999999″ opacity=”.66″ quantity=”20″/>
<sld:ColorMapEntry color=”#999999″ opacity=”.33″ quantity=”30″/>
<sld:ColorMapEntry color=”#999999″ opacity=”0″ quantity=”90″/>

Here we have a gray color being used to denote very flat areas where the slope is less than 10. The gray is increasingly transparent as the slope becomes steeper, thus revealing the underlying aspect layer with more brightness in the steepest locations. These parameters could be tweaked to allow more or less brightness to show through.

ASPECT SLD

<ColorMapEntry color=”#9AFB0C” quantity=”22.5″ />
<ColorMapEntry color=”#00AD43″ quantity=”67.5″ />
<ColorMapEntry color=”#0068C0″ quantity=”112.5″ />
<ColorMapEntry color=”#6C00A3″ quantity=”157.5″ />
<ColorMapEntry color=”#CA009C” quantity=”202.5″ />
<ColorMapEntry color=”#FF5568″ quantity=”247.5″ />
<ColorMapEntry color=”#FFAB47″ quantity=”292.5″ />
<ColorMapEntry color=”#F4FA00″ quantity=”337.5″ />
<ColorMapEntry color=”#9AFB0C” quantity=”360″ />

The colors and class breaks are from this Esri/Buckley blog entry which, in turn, references the color scheme from Moellering and Kimerling’s MKS-ASPECT (GIS world 1991). The colors, in order, are shown here:

 

aspect_slope_palette

PUTTING THE LAYERS TOGETHER

Using a two-layer syntax in the wms request mashes the two layers together. List the aspect layer first and the slope second. I had it switched around on my first try and it took me a bit of time to realize that it draws that second referenced layer on top. And no, the finished map does not have a hillshade underneath. The combination of aspect and slope creates that “hillshade” effect.

————-

 

4 Comments

Thoughts on UI For Webmaps

Posted by G.P. in Web Maps on April 26, 2016

Webmap design is a lot different from static map design. Yet, writing a book about webmap design is difficult since the tech is changing so rapidly. (There is a book, called Web Cartography, that is worth having but I still don’t think it goes into everything we want to know.) Indeed, there are a lot of unknowns surrounding the idea of what good UI for webmaps even is.

Some people are using google analytics types of software to analyze how people are using their webmaps (e.g., maptiks) but I don’t see a lot of A/B testing out there, which is probably the ideal way to harness the power of webmap analytics results.

Certainly we can still make some guesses at what works. For example, we can guess that tools and functions that have been on webmaps for at least a certain amount of time, say 5 years, are well ingrained into the public’s knowledge base and probably don’t need a lot of explanation on your map. Zooming in/out, panning, and even the ubiquitous (and not often needed) measure tool are all pretty familiar concepts to most webmap users so they need only be indicated with the usual plus/minus/ruler buttons. Brand-new tools for navigating the map, such as oblique tilts, probably will slow your user down until web GL is more common. These tools may require user education, perhaps in the form of a pop-up info box on first use.

Let’s talk about disclaimers. These could really benefit from testing. Typically, an organization will require a long-winded disclaimer to be presented to the web user before they have even seen the webmap. I’d really like to know how many users leave the site without clicking “agree.” Furthermore, I’d really like to see if clicking “agree” really does hold the organization free from liability in court, or if not having a disclaimer could allow prosecution of the organization for some users’ misuse of the data. My guess is that a reasonable judge would allow neither of these but I’m no lawyer.

What if we A/B tested disclaimers specifically? One site shows the user the disclaimer on the page, and the user has to click “agree” before the webmap will load. Another site shows the disclaimer on top of the webmap such that a faded view of the webmap is visible so that the user gets a glimpse of the webmap. Lots of guesswork here, but the hypothesis would be that the B test would result in more users.

Now let’s take a look at the freshymap. I believe that their use of these three small buttons on the top of the map make it easier for first-time users to pay attention to the main attraction–the map–before they get bogged down in the details–the layers. This one small button can be discovered at some later date, when the user is already familiar with the site.

freshymapbuttons

Contrast that with this Puget Sound Watershed Characterization Project map (that’s a mouthful). Once you get past the disclaimer, which by the way happens to mention a two volume rules guide!, and then figure out how to actually get into the webmap (I’ll let you brave souls go figure that out yourselves), you find yourself on a webmap.

I think you’ll see right away that there are a remarkable amount of superfluous details on what is, essentially, trying to be a cataloging of their data holdings. In other words, it is trying to be all things to all people. We don’t need share, print and find location buttons at the very top of the page. We also don’t need the words “interactive map” at the top of the visual hierarchy (aka top-left) because we already get that it is an interactive map. In fact, that’s something that goes under the category of “user is used to this–we’ve had interactive maps for more than 5 years now,” and there is simply no need to explicitly use up good page real estate in telling them what they already know. The layer transparency slider also being at top-left? Nope, probably not needed, or at least not there.

ecologysitecritique

It’s not a bad webmap at all. It’s actually very interesting once you really take the time to explore it. I do like the basemap switcher on the right (not shown on the above screenshot), which seems much easier to deal with since it has little pictures rather than words (though Timoney states that basemaps switchers are used very little of the time, in one rare case of actual user testing.) I’d just like to see more testing of these things. In a way, it’s a grand place to be in because there’s a lot of room for people to really be creative and come up with some amazing new ways to present webmaps to users that have a lot of potential to really shake things up.

Even the little things can be improved, like the titles we use on webmap legends. For example, I spotted the title, “Explore & Compare” on a legend title today and thought that they were a good choice of words, a call to action for the user, if you will. Again, only some testing would prove if my instincts are correct on that.

Amazonia map hat tip @stamen

Amazonia map hat tip @stamen

Until we get some more expert guidance on this, the best we can do is to keep our eyes peeled for the ways in which people are making webmaps easier to use and try to incorporate the best UI features in our own designs. We can also push back against our bosses or our fellow scientists when they ask for everything but the kitchen sink in one single webmap. Perhaps a series of webmaps for each intended purpose could be proposed instead. Good luck with that.

———

 

No Comments