Page Comparison

There are several places in Microbizz where maps are displayed, with different information overlaid on the maps.

We use use LeafletJS for  for the maps.

See also also the section about the GIS data format and the Map class.

Data layers

Different data layers may be defined, to get data from tile servers or WMS servers.

This is used by Gentofte Fjernvarme, amongst others.

GPS traces

The Equipment module can display GPS traces on the map for an equipment. The is done by fetching the traces from gps.microbizz.dk.

Traces and other info from gps.microbizz.dk can be read using the various PHP scripts in in obj/Gps/php/tracker/. Eg. to read the last location of a tracker, use:

^var

...

^args

...

⁼

...

^{

...

^imei:

...

^{'123456789012345',}

...

^maxage:

...

³⁰

...

^/*minutes*/

...

^};

...

^{$.post('/obj/Gps/php/tracker.php',}

...

^args,

...

^{function(reply)}

...

^{

...

^if

...

^{(reply.status}

...

⁼⁼

...

⁰⁾

...

^return;

...

^{console.log(reply.loc.lat+','+reply.loc.lon);}

...

^},

...

^'json');

POI

Parts of Microbizz display various POI (Points Of Interest) on the map, f.ex. the on-location map displays markers indicating the location companies, tasks and equipment.

There is currently no standard way for handling this.

Displaying a map

To display a map, make sure to include

^'mapload'

...

^=>

...

^'leaflet'

in the array passed as 4th argument to to head(), and include the script /obj/Map/script/routeviewer.js. Setup the map by calling:

var map = new RouteViewer(mapid, 15, [55.4, 12.6], {width:800, height: 600});

Old style

Call the javascript function function leaflet_setup(divid, zoom, center, args) where divid is  where divid is the ID of a a <div>, zoom is  is the initial zoom level (typically 15), center is  is an array with two values (lat and lon), and and args is  is an object with additional settings. Only Only divid is  is required.

...

leaflet_setup('mymapcontainer', 15, [ 55.4, 12.6 ], {});

Drawing layers

Multiple layers with features (rectangle, circles, places etc) are handled by by MapLayerUI.

In PHP you call

$ui = new MapLayerUI($id, $modcode, $sysref, $editable);
$ui->display();

$id is  is an ID used as a prefix for all the various various <div> and  and buttons etc used in the UI; typically we use the string string maplayers.

$modcode and $sysref specifies  and $sysref specifies which object you are dealing with.

$editable is  is a bool which indicates if the layers/features should be editable.

In Javascript you call

var layerui = new LayerUI(id);

LayerIU() will call  will call leaflet_setup().

To initialize initialize maped.js at  at the same time, simply pass the the maped.js configuration  configuration object as the second argument to to LayerUI().

Drawing

Drawing features on a map is handled by by maped.js.

If you are not using using layerui.js then  then maped.js is  is initialised using

var maped = maped_init(id, cfg);

id is  is the ID of the map, and and cfg is  is a object with the configuration.

Style

If you want to be able to edit the style of features, then you need to provide a dialog for editing the style.

In PHP the following will generate the dialog:

MapLayerUI::styleEditor();

In Javascript the following will initialised initialise the dialog:

var markers = ['marker1.png','marker2.png'];
var mse = new maped_style_editor('#mapedstyleeditor', markers, 25, 41);

Also include the following in the the maped.js configuration  configuration object, so that that maped.js will  will know how to invoke the style editor:

...

style: {
     editor: mse,
     onopen: mse.open,
     onclose: mse.close
 }

Example of configuration

var mapedcfg = {
  toolcfg: {
      style: {
          editor: mse,
          onopen: mse.open,
          onclose: mse.close
      },
      text: {
          defaulttext: 'Hello',
          // if defaultstyle is set, all fields must be specified
          defaultstyle: { fontsize: 30, color: '#222222', bold: false, italic: false, opacity: 0.8 }
      },
      polyline: {
          nearby: 12,
          nearbycolor: 'red',
          nearbyopacity: 0.3
      },
      point: {
          width: 25, // required
          height: 41, // required
          path: '/gfx/map/maped/markers/',
          markers: markers // list of markers, at least 1 is required
      }
  },
  tools: ['edit','geofence','rect','circle','polyline','shape','freehand','point','text','style','delete'],
  disabled: [ 'freehand'], // disabled tools
  icons: { edit: 'new-edit-icon.png' } // mapping from toolname to iconname
  zoom: 13,            // initial zoom
  lat: 55.6869,        // initial lat,lon
  lon: 12.5226,        //
  marker: 'default',   // either a Leaflet Icon, or the string 'default'
  midpoint: 'default', // either a Leaflet Icon, or the string 'default'
  layergroup: 'new',   // either a Leaflet LayerGroup, or the string 'new' (to create new LayerGroup)
  map: 'init',         // either the result from leaflet_setup(id, ...), or the string 'init' (to call leaflet_setup())
  css: {               // css for various stuff
      message: "text-align: center; border-radius: 4px; border: 1px solid #bbb; position: absolute; bottom: 10px; height: 20px; background-color: white; z-index: 1000;",
  }
};

Most of the configuration object are optional; typically you will only need a list of enabled tools:

var mapedcfg = { tools: ['edit','circle','rect','point','style','delete'] };