A brief guide to embedding maps on PublicLab.org pages.

Note: these work normally when in a post, or when there is only one per page. We are debugging the issues on this page where we have many maps at once. Thanks!

Inline maps are a form of inline power tags which you can read more about on the power tags page. These will display any content tagged with lat:____ and lon:____ tags showing location, near the provided coordinates.

Basic usage is with [map:content:_latitude_:_longitude]; for example:

[map:content:29.9:-90.0] gets you:

Add a story +

[map:content:40.7:-73.9] gets you:

Add a story +

A good place to quickly find lat/lon for any place is http://osm.org (the URL will change as you pan around).

Zoom level

Note how if you specify more precise numbers (more digits), it doesn't search as widely. Also, the precision sets the zoom level of the map, so shorter (less precise) coordinates make for a more zoomed-out map.

[map:content:40.70:-73.90]

Add a story +

Maps with preset layers

This syntax can be used to show layers from Leaflet Environmental Layers in an embedded map:

[map:layers:content:41.7:-71.5:Unearthing,toxicReleaseLayer]

Add a story +

Tag-filtered maps

This type of inline map shows only content tagged with a given tagname. It follows the format [map:tag:_tagname_:_latitude_:_longitude]. For example:

[map:tag:infragram:43:-71] shows only nodes tagged with infragram.

Add a story +

Questions on a topic near a place

(we don't currently have a lot of questions tagged with locations, but if we add some it'll work)

[map:tag:question:infragram:43:-71]

Add a story +

People maps

Share your own location on your profile. Learn about privacy

---

Customization

Customizing maps on PublicLab.org

We've made a simple way to embed interactive maps that feature Public Lab content as well as externally hosted environmental data. We've balanced simplicity of use (for non-programmers) with customizability. From the simplest to most customized options for making maps:

1. Simplest way: use inline maps - https://publiclab.org/wiki/inline-maps - several customization options
   • No coding needed
2. If this won't meet your needs, consider if what you need would be useful to others; if so, request the feature on LEL: https://github.com/publiclab/leaflet-environmental-layers (PL staff input too, re: broader community utility)
   • Consider if the inline maps syntax will accommodate this new feature?
   • OR would it be OK as a default for all maps on PL?
   • This path takes some community process and necessarily slower integration work, but comes with more future support and sustainability
3. If it wouldn't be useful for other LEL users, consider making a static instance of LEL, hosted on GH Pages, and embedding it using an <iframe\>
   • Here's an example of this (source code viewable on GitHub here)
   • This allows ANY plug-and-play leaflet code as per http://leafletjs.com/
4. Hybrid approach: use inline JS to add leaflet settings directly as properties to a native inline map object
   • A bit brittle, a bit obscure
   • here is an example of how to do this on a wiki page
   • Hotfix --- while development on inline syntax is built and then we can unbrittle your map. Could introduce bugs and lives outside of tested development.
     • It's a nice bridge to either B or C