Public | Automated Build

Last pushed: 2 years ago
Short Description
Communicate with a Leaflet map thru HTML5 postMessage()
Full Description

Embed Map: Communicate with a Leaflet map thru HTML5 postMessage()


Embed Map is a simple widget that allows users to interact with a Leaflet
map via postMessage() calls to an iframe. See the example in test/demo.html

Watch the screencast


  1. Embed Map can be developed independently, using Angular and Node.
  2. With Leaflet, map tiles can be cached for off-line demos.
  3. Embed Map comes with its own http server, to ease local development.
  4. Easily add a map display to hard-to-install, monolithic apps.

How do I send data to the widget?

Simply post messages to the iframe with ui-leaflet
options like this:

// get the iframe
var mapframe = document.getElementById("map-frame").contentWindow

// send keys 'geojson', 'markers', or both. see ui-leaflet examples.
        tiles: {
          url: "http://{s}{z}/{x}/{y}.png"
        center: {
          lat: -8.98,
          lng: -38.22,
          zoom: 5
        geojson: { ... },
        markers: { ... }
      }, '*')


cp .env.template .env # modify as needed
npm install
bower install


npm run dev


# uncomment to build locally
# docker build --no-cache --force-rm -t lukewendling/embed-map .
docker pull lukewendling/embed-map # always get the latest version
docker run -it --rm -p 3000:3000 --name mymap lukewendling/embed-map
open http://localhost:3000/test/demo.html

Tile server

The server (server.js) optionally serves tiles from a filesystem cache.
A tile server url can be sent to the widget API.

Hint: First, cache tiles with desktop apps like KDE Marble.


Developed on Chrome.

Docker Pull Command
Source Repository