Moore Spatial

GIS and Related Pursuits

By

Stupid Simple Map

Stupid Simple Map (SSMap) might be the easiest way ever to add a map to your website. You just have to add the <script> tags where you want the map to show up. There’s no making divs, no finding tile URLs, etc.

SSMap loads the Leaflet JavaScript and CSS if needed then adds a map right after the <script> tag in your HTML document.

For example, if you place

<script src='http://moorespatial.com/code/ssmap/ssmap-min.js'></script>

in your HTML document, you would see something like this:

Default SSMap map

Default SSMap map

Odds are you’d like to have some control over your map, and you do that by setting a query string to the ssmap.js file. For example:

<script src='http://moorespatial.com/code/ssmap/ssmap-min.js?lat=-90&lon=45&z=8&mark=true&tiles=map&w=50%'></script>

would give you:

SSMap with arguments

SSMap with arguments

The marker appears at the center of the map any time the coordinates are not (0,0).

 

Options

Each of these options are set in the query string. All options are optional, and I tried to provide sane defaults.

Option Default Values Notes
lat 0 Latitude (decimal degrees) -90 to 90
lon 0 Longitude (decimal degrees) -180 to 180
div random ID string Map div ID. The div also get class ssmap
h 500px Valid CSS height Height of the map div (including units)
w 500px Valid CSS Width Width of the map div (including units)
z 1 1-18 Initial zoom level
tiles sat map (street map) or sat (satelite) Which tiles to use
mark t t (true) or f (false) Place a marker at the map centerpoint if coordinates are not set to 0,0?

 

Notes For Advanced Users

For advanced usage, you’ll want to use Leaflet directly. It’s not hard, and you can customize just about anything.

You can use the JavaScript directly off of my site by linking to http://moorespatial.com/code/ssmap/ssmap-min.js or you can download it and host it on your own site.

You can download the uncompressed version on Github or here.

This script won’t work with SSL. I don’t have SSL configured on this host, and the script itself loads the Leaflet libraries via http (https isn’t available).

By

Adding To the Leaf Pile

I recently presented at the 2013 MN GIS/LIS conference on leaflet plugin development. You can now see my demo and presentation online.

I demonstrate three ways to write leaflet plugins.

  1. Adding a new method to an existing Leaflet object
  2. Overriding an existing method in an existing Leaflet object
  3. Extending an existing Leaflet object to create your own object

 

The presentation can be found here:

PDF, Google Docs PDF, SlideShare

 

The Demo can be found here:

Leaflet-Spiders Demo on MooreSpatial.com

Leaflet-Spiders Demo on GitHub

 

The code can be found here:

GitHub

 

Happy Hacking!

 

By

SSTiles — Stupid Simple Tile Maker

SSTiles is a small project I’ve been working on. It’s a simple PHP script that generates XYZ slippy map tiles on demand.

Ideally you’ll use a correctly projected base image (a square image, in Web Mercator projection). Since the image is square, SSTiles will just slice it up, no scaling is needed.

Usage

Usage is simple. Place the sstiles.php library and the tile.php or pad.php helper script in a directory with your base map, and add the layer to your map like so:

http://example.com/mysite/sstile/tile.php/basemap.jpg/$Z/$X/$Y.png

For Leaflet, you would do:

L.tileLayer('http://example.com/mysite/sstile/tile.php/basemap.jpg/{z}/{x}/{y}.png').addTo(map);

For OpenLayers you would do:
var basemap = new OpenLayers.Layer.XYZ("Basemap", "http://example.com/mysite/sstile/tile.php/basemap.jpg/${z}/${x}/${y}.png");
map.addLayer(basemap);

Basemap types

DEMO

A Nice Square Map

A Nice Square Map

Other times it might not matter if the map is correctly projected, in which case you can use a non-square image which will be sliced and scaled so that resulting tiles are square.

DEMO

A Non-Square Map Is Stretched To Be Square

 

And finally, for the real use case that I wrote this script, if you want to abuse Leaflet (or OpenLayers, etc.) to make a tiled image viewer for high-resolution images you can ask SSTiles to pad the image so that resulting tiles won’t be distorted.

DEMO

padded

Features

  • Lets you use any image as a slippy map!
  • Generates slippy-map tiles from a single top-level image!
  • Stretches the image if it’s not square!
    • OR Pads the image if it’s not square!
  • Caches generated tiles!
  • Auto-updates cache when source file is updated!
  • Sends HTTP caching headers!
  • Supports GD and ImageMagick!