Mapping

Show Only ...
Maps - Photos - Videos

Hillshade

Hillshade

Hillshading is a technique used to create a realistic view of terrain by creating a three-dimensional surface from a two-dimensional display of it. Hillshading creates a hypothetical illumination of a surface by setting a position for a light source and calculating an illumination value for each cell based on the cell's relative orientation to the light, or based on the slope and aspect of the cell.

...

Anyone can easily search for ArcGIS servers.

Assume you want to know if St. Louis County Minnesota (County seat is Duluth) has a public-facing ArcGIS server. First, find the county website. Note that the website address includes “stlouiscountymn”. Second, do a Google search on: stlouiscountymn “rest/services”.  Include the quotes in your search.

If this county has a GIS server then you will likely see search hits to various places within the table of contents. Open any table of contents page and then in the upper left corner click on “Home”. You now will see the ‘top’ of the table of contents for this ArcGIS server and the browser address bar will display an address that ends in “/rest/services”.

Of course at the county and city level you could simply call or email the GIS staff and ask. Here is one way to phrase the question: “Do you have a public-facing ArcGIS server and, if so, what  is the rest service endpoint?”

Sometimes you might see two server addresses that appear identical except one of them says “arcgis” and the other says “ArcGIS”. Technically these are different internet addresses and these two servers may or may not contain the same information.

Tip: If you are interested in a topic instead of a state/county/city then try a Google search like this example: “climate change” “rest/services”. Include keywords for your topic and always include rest/services in quotes. Many of the hits that are returned will point you to ArcGIS layers.

Some useful information from Joseph Elfelt’s amazing List of ARC GIS Servers.

How to Add LIDAR Hillshade to Your LeafletJS Map

How to Add LIDAR Hillshade to Your LeafletJS Maps

Using the 3DEP Hillshade and some CSS3, it’s quite easy to add beautiful, LIDAR-generated hillshade to LeafletJS Maps.

A few things to note …

  • This is not mobile friendly, as it uses a lot of CPU for the mix-blend-mode, so you may want to disable for mobile browsers
  • Areas without hillshade (e.g. the ocean) are shown as black, so you won’t want to use this for large scale maps

Here is a simple example of how to do this with NY Aerial Orthophotography:

<html>
  <head>
    <title>Example</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
     
     .lidarBase {
		 filter: brightness(140%) contrast(100%) !important; 
		 // this filter raises brightness and contrast for better appearance
	 }
      
    .baseLayer  {
		mix-blend-mode: multiply !important;
		// usually a nice way to blend the hillshade with the overlay
	}
	
	.nyAerial {
		filter: saturate(150%) contrast(110%) brightness(130%);
		// enhance colors a bit
	}
    </style>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

  </head>
  <body>	  
    <div id="map-canvas"></div>
          <script>
          
var nyAerial =	L.tileLayer.wms(
	'https://orthos.its.ny.gov/ArcGIS/services/wms/Latest/MapServer/WMSServer?', 
	{ layers: '0,1,2,3,4,5', 
	attribution: 'NYS High-Resolution Color Aerial (Winter 2015-2020) - <a href="https://gis.ny.gov/">NYS Geographic Information Services</a>', 
	className: 'nyAerial',
	maxZoom: 21 });

var lidarBase =	L.tileLayer.wms(
	'https://elevation.nationalmap.gov/arcgis/services/3DEPElevation/ImageServer/WMSServer?', 
	{ 
		layers: '3DEPElevation:Hillshade Gray',
		className: 'lidarBase',
	}
);

var map = L.map('map-canvas', {
			center: [42.37348470, -76.88088670],
			zoom: 17,
			layers: [lidarBase,nyAerial]
		});
		
</script>
</body>
</html>

Here is the produced map with this code:

Why so many maps?

Why so many maps?

Well for one, I am really loving how easy it to make interactive maps with Leaflet, and I keep hacking away at the code to improve presentation and meaning. I really enjoy exploring the land surface and use of land, and there are seemingly endless places I can explore and share on the blog. Plus, with once the code is written, creating new leaflet maps is easy enough – just scroll and feed the coordinates into the system, and it is displayed.

Running out of web maps

Running out of web maps πŸ•Έ

I concede at some point I will run out of places to tell stories about and make up web maps. But truth be told it’s pretty easy and there are so many interesting places to spot light that I don’t think it will happen right away.