Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
This branch is 4 commits ahead of luxigo:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


webapp for web maps based on angularjs and ui-leaflet


Proof of concept


The online demo is available here:

The configuration file is:

And the "offline" map tiles are stored in

Please always give appropriate credit and respect the licensing terms for map tiles and layer imagery.


We began to develop an application aiming to display live map overlays for several pre-defined locations using [ui-leaflet] (

Layers must be defined in layers/layers.json (see below)

The base layers (satellite, plan, geojson) have to be available offline.

To generate the base layers from geolocated raster images we are using [ctb-tiles] ( or [gdal2tiles] (

For indoor plans we only need imageOverlay layers, using "Simple" CRS.

For the geojson overlays, when the data received from the url specified in layers.json needs pre-processing and/or when it needs to be refreshed, we can define a scope.<className>.onload method to process data as needed and setup the refresh loop at initialization time. (see the "beacons.js" service in this example)

[Yeoman] ( [generator-angular] ( was choosed because it's brings in:

  • a formatted collaborative environment
  • powerful tools like bower, wiredep, sass, auto-prefixer, live-reload and more

Subsequently, [Strongloop] ( and the [loopback-sdk-angular] ( could be used to generate a database abstraction layer (a HTTP REST API plus a javascript CRUD API available both server side and client side) and manage access control lists (ACL)

The loopback cassandra connector at looks dead and is unusable at the time I'm writing this.

"Battelle.js" and "beacons.js" are named like this for historical reasons and it does not reflect the reality very well anymore since "layers.json" is now used to define and configure the available views or locations (base layers) and any type of geojson overlays could be displayed using "beacons.js"

An [angular directive] ( will eventually emerge from the actual battelle.js view.


git clone

The application html root is located in webmapp/dist.

The layers directory (currently omitted) is webmapp/app/layers and should be copied in webmapp/dist/layers

Actually the application main view is "app/views/battelle" which is looking for 'layers/battelle/layers.json'

Baselayers examples:

  "layer_name": {
    "description": "layer name",
    "baseLayer": <boolean>,
    "visible": <boolean>,
    "type": <leaflet-layer-type>,  // eg "xyz", "geoJSONShape" or "imageOverlay"
    "CRS": <crs>, // eg: "Simple" for imageOverlays
    "url": <url>, // according to leaflet layer type
    "projection": <proj4-projection-type>, // eg "WGS84"
    "center": <coordinates-array>, // expressed in proj4-projection-type (pixel coordinates for imageOverlay)
    "bounds": [ <coordinates-array>, <coordinates-array> ], // expressed in proj4-projection-type (pixel coordinates for imageOverlay)
    "options": <leaflet-layer-options>

Dynamic geojson overlay example:

    "beacons": {
      "description": "Beacons, filtered",
      "baseLayer": false,
      "visible": true,
      "type": "geoJSONShape",
      "projection": "WGS84",
      "url": "/cassandra/find?model=repoble.currentxy&filter={\"fields\": [\"shortname\",\"x\",\"y\"]}",
      "refresh": "1000",
      "class": "beacons", // triggers $scope.beacons.onload
      "localsystem": {
        "photo": {
          "proj": "EPSG:2056",
          "origin": [ 2499670.90206156, 1114753.42399633 ],
          "downVector": [ 2499680.14609066, 1114764.71805181 ]
        "biblio": {
          "switchAxis": true, // downVector is now "rightVector"...
          "invertXaxis": false,
          "invertYaxis": false,
          "origin": [-424, 418],
          "downVector": [643, 419],
          "downVectorLength": 18
      "options": {
        "style": {
          "fillColor": "yellow",
          "weight": 2,
          "opacity": 1,
          "color": "blue",
          "dashArray": 3,
          "fillOpacity": 0.7



  • node > 4.4.0

I recommend you install node via nvm which allow upgrading and switching versions easily:

nvm install v4
  • npm > 3.0
npm install -g npm
  • compass and sass
sudo apt-get install ruby-compass 
sudo gem install compass
  • Other required packages
npm install -g yo generator-angular grunt grunt-cli grunt-karma bower

Install dependencies

cd webmapp
npm install
bower install

Cassandra database

Our test application was fetching data from a cassandra database. If you want to setup or disable cassandra database support, edit cassandra-client-config.json.

Build, serve and reload

grunt --force serve


This project is generated with yo angular generator version 0.15.1.

Run grunt for building and grunt serve for preview.

Running grunt test will run the unit tests with karma.


webapp for web maps based on angularjs and ui-leaflet







No releases published


No packages published


  • JavaScript 80.4%
  • HTML 16.2%
  • CSS 3.4%