API Samples

Basic example

var map = new lux.Map({
  target: 'map1',
  bgLayer: 'basemap_2015_global',
  zoom: 18,
  position: [76771, 72205]
});

Basic example with print

Print the current map :

var map1a = new lux.Map({
  target: 'map1a',
  bgLayer: 'basemap_2015_global',
  zoom: 18,
  position: [76771, 72205]
});
<button onclick="map1a.print();">Print the current map</button>

Basic example with coordinate display

This is the basic example with coordinate display

var map1b = new lux.Map({
  target: 'map1b',
  bgLayer: 'basemap_2015_global',
  zoom: 18,
  position: [76771, 72205],
  mousePosition    : {
    target: 'map1b',
    srs : 2169
},
});

Basic example with coordinate display in div

This is the basic example with coordinate display in a div

var map1c = new lux.Map({
  target: 'map1c',
  bgLayer: 'basemap_2015_global',
  zoom: 18,
  position: [76771, 72205],
  mousePosition    : {
    target: 'coord1c',
    srs : 2169
},
});

Basic example with marker

This is a simple map with a marker

var position = [76771, 72205];
var map2 = new lux.Map({
  target: 'map2',
  bgLayer: 'basemap_2015_global',
  zoom: 18,
  position: position
});

map2.showMarker(
  {positioning: 'center-center',
   iconURL: 'lion.png',
   html: '<h2>The popover</h2><p>With some content</p><ul><li>Item 1</li><li>Item 2</li></ul>'
});

Basic example with marker on click

This is a simple map with a marker on click

var position = [76771, 72205];
var map2a = new lux.Map({
  target: 'map2a',
  bgLayer: 'basemap_2015_global',
  zoom: 18,
  position: position
});

map2a.showMarker(
  {positioning: 'center-center',
   iconURL: 'lion.png',
   click: true,
   html: '<h2>The popover</h2><p>With some content</p><ul><li>Item 1</li><li>Item 2</li></ul>'
});

Basic example with marker in other position

This is a simple map with a marker in another position than the center

var position = [77213, 71822];
var map2b = new lux.Map({
  target: 'map2b',
  bgLayer: 'streets_jpeg',
  zoom: 18,
  position: position
});

var position2 = [76771, 72205];
map2b.showMarker(
  {position: position2,
   positioning: 'center-center',
   iconURL: 'lion.png',
   html: '<h2>The popover</h2><p>With some content</p><ul><li>Item 1</li><li>Item 2</li></ul>'
});

Basic example with marker on click

This is a simple map with a marker showing popup on click in div

var position = [76771, 72205];
var map2c = new lux.Map({
  target: 'map2c',
  bgLayer: 'basemap_2015_global',
  zoom: 18,
  position: position
});

map2c.showMarker(
  {positioning: 'center-center',
   iconURL: 'lion.png',
   click: true,
   target: info2c,
   html: '<h2>The popover</h2><p>With some content</p><ul><li>Item 1</li><li>Item 2</li></ul>'
});

Basic example with markers position with different SRS

This is a simple map with 2 markers displayed in different SRS.

var position2d2169 = [76771, 72205];
var position2d4326 = [6.11149,49.61062];
var map2d = new lux.Map({
  target: 'map2d',
  bgLayer: 'basemap_2015_global',
  zoom: 18,
  position: position2d2169
});

map2d.showMarker(
  {
  position: position2d2169,
  positioning: 'center-center',
   iconURL: 'lion.png',
   click: false,
   target: info2d
});
map2d.showMarker(
  {
  position: position2d4326,
  positionSrs: 4326,
  positioning: 'center-center',
   iconURL: 'lion.png',
   click: false,
   target: info2d
});

Example with overlay, layermanager and bgSelector

This is a basic example with overlay-layers, a layer manager in a div and a bgSelector in a div. The layer visibility can be set with layerVisibilities parameter. If not set, ech layer is visible.

var map3 = new lux.Map({
  target: 'map3',
  bgLayer: 'streets_jpeg',
  layers: [ '149','1386','512' ],
  layerOpacities: [0.6,0.8,0.8],
  layerVisibilities: [true,true,false],
  layerManager: {
    target: 'layerManager3'
  },
  bgSelector: {
    target: 'bgMap3'
  },
  zoom: 12,
  position: [76825, 75133]
});

Example with GPX

This is a basic example with a GPX file. It can only contain lines and points.

var map4 = new lux.Map({
  target: 'map4',
  bgLayer: 'streets_jpeg',
  zoom: 12,
  position: [76825, 75133]
});
map4.addGPX('DemoGPX.gpx', {click:true, target:'info4'});

Example with GPX and new style

This is a basic example with a GPX file.

  var map4b = new lux.Map({
    target: 'map4b',
    bgLayer: 'streets_jpeg',
    zoom: 12,
    position: [76825, 75133]
  });
 var style = {
    'Point': new ol.style.Style({
      image: new ol.style.Circle({
        fill: new ol.style.Fill({
          color: 'rgba(255,255,255,1)'
        }),
        radius: 10,
        stroke: new ol.style.Stroke({
          color: '#fff',
          width: 1
        })
      })
    }),
    'LineString': new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#fff',
        width: 3
      })
    }),
    'MultiLineString': new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#fff',
        width: 3
      })
    })
  };

  var styleFunction = function(feature) {
    return style[feature.getGeometry().getType()];
  };
  map4b.addGPX('DemoGPX.gpx', {style: styleFunction, click:true});

Example with KML

This is a basic example with a KML file. It can contain points, lines and polygons.

var map5 = new lux.Map({
  target: 'map5',
  bgLayer: 'streets_jpeg',
  zoom: 12,
  position: [76825, 75133]
});
map5.addKML('//cita.lu/kml/chantiers_actuel.kml',
{reloadInterval: 60, click:true});

Example with Search in Map

This is a basic example with a search widget inside the map

var map6 = new lux.Map({
  target: 'map6',
  bgLayer: 'topo_bw_jpeg',
  zoom: 12,
  position: [76825, 75133],
  search      : {
    target : 'map6'
}
});

Example with Search in div

This is a basic example with a search widget inside a div. The search by coordinates is enabled.

var map7 = new lux.Map({
  target: 'map7',
  bgLayer: 'topo_bw_jpeg',
  zoom: 12,
  position: [76825, 75133],
  search      : {
    target : 'search7',
    dataSets : ['Adresse', 'Coordinates']
  }
});

Example with mymaps

This is a basic example with a mymaps map

var map8 = new lux.Map({
  target: 'map8',
  bgLayer: 'topo_bw_jpeg',
  zoom: 12,
  position: [76825, 75133]
});
map8.addMyMapLayer({
  mapId: '0416ef680fbe4cdaa2d8009262d1127c'
});

Example with mymaps and profile

This is a basic example with a mymaps map and a profile in a div

var map9 = new lux.Map({
  target: 'map9',
  bgLayer: 'topogr_global',
  zoom: 12,
  position: [76825, 75133]
});
map9.addMyMapLayer({
  mapId: '63c5e450445e438d9126a3757bee9d2b',
  profileTarget:'profile9'
});

Example with mymaps and opened profile

This is a basic example with a mymaps map and a profile that is already open in a div

var map10 = new lux.Map({
  target: 'map10',
  bgLayer: 'topogr_global',
  zoom: 12,
  position: [76825, 75133]
});
map10.addMyMapLayer({
  mapId: '63c5e450445e438d9126a3757bee9d2b',
  onload: function(features) {
    this.loadProfile(features[0].getGeometry(), 'profile10');
  }
});

Example with recenter on feature

This is a basic example with a feature ID that we want to zoom on

var map11 = new lux.Map({
  target: 'map11',
  bgLayer: 'blank',
  layers: ['parcels','parcels_labels'],
  features    : {
    ids   : ['061C00204002980'],
    layer : '359'
  }
});

Example with recenter on feature with click

This is a basic example with a feature ID that we want to zoom on, infos on click

var map11b = new lux.Map({
  target: 'map11b',
  bgLayer: 'blank',
  layers: ['parcels','parcels_labels'],
  features    : {
    ids   : ['061C00204002980'],
    layer : '359',
    click: true
  }
});

Example with recenter on feature with click rendered in div

This is a basic example with a feature ID that we want to zoom on, infos on click, rendered in div

var map11c = new lux.Map({
  target: 'map11c',
  bgLayer: 'blank',
  layers: ['parcels','parcels_labels'],
  features    : {
    ids   : ['061C00204002980'],
    layer : '359',
    click: true
  }
});

Example with geocoding

This is a map that will zoom using a textual address rather than coordinates

var map12 = new lux.Map({
  target: 'map12',
  bgLayer: 'basemap_2015_global',
  zoom: 17
});

lux.geocode({
  num: 1,
  street: 'Rue Charles Darwin',
  zip: 1433,
  locality: 'luxembourg'
}, function(position) {
  map12.showMarker({
    position: position,
    autoCenter: true,
    positioning: 'center-center',
    iconURL: 'lion.png'
  });
});

Example with reverse geocoding

Click in the map to see the address

var map13 = new lux.Map({
  target: 'map13',
  bgLayer: 'basemap_2015_global',
  zoom: 12,
  position: [76825, 75133]
});

map13.on('click', function(evt) {
  var coordinate = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:2169');
  lux.reverseGeocode(coordinate, function(address) {
    var html = [address.number, address.street, address.postal_code + ' ' + address.locality] .join(', ');
    document.getElementById('address').innerHTML = html;
  });
});

Example with tooltips

Click on a feature to see the tooltip

var map14 = new lux.Map({
  target: 'map14',
  bgLayer: 'basemap_2015_global',
  zoom: 12,
  position: [76825, 75133],
  layers: [147],
  showLayerInfoPopup : true
});

Example with tooltips

Click on a feature to see the tooltip in a div

var map15 = new lux.Map({
  target: 'map15',
  bgLayer: 'basemap_2015_global',
  zoom: 12,
  position: [76825, 75133],
  layers: [147],
  popupTarget: 'info15',
  showLayerInfoPopup : true
});

Use OL3 API together with the GeoAPI

Click on a feature to see the tooltip in a div

var map16 = new lux.Map({
   target: 'map16',
   bgLayer: 'basemap_2015_global',
   zoom: 18,
   position: [76771, 72205]
});
var cadastreFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.transform([76771, 72205], 'EPSG:2169', 'EPSG:3857')),
  name: 'Cadastre'
});
var iconStyle = new ol.style.Style({
  image: new ol.style.Icon(({
    anchor: [0.5, 46],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: 'lion.png'
  }))
});
cadastreFeature.setStyle(iconStyle);
var vectorSource = new ol.source.Vector({
    features: [cadastreFeature]
});
var vectorLayer = new ol.layer.Vector({
    source: vectorSource
});

map16.on('click', function(evt) {
  var feature = map16.forEachFeatureAtPixel(evt.pixel, function(feature) {
    return feature;
  });
  if (feature !== undefined) {
    document.getElementById('info16').innerHTML = "Name : " + feature.get('name');
  } else {
    document.getElementById('info16').innerHTML = "";
  }
});

map16.addLayer(vectorLayer);

Programatically activate the layer information popup.

The example displays the layer information either on map or on div.
Activate/Unactivate layer query.

<input type="checkbox" id="cbInfo17" onclick="map17.showLayerInfoPopup(this.checked)">Activate/Unactivate layer query.
var map17 = new lux.Map({
   target: 'map17',
   bgLayer     : 'blank',
   layers: ['parcels','parcels_labels'],
   zoom: 14,
   position: [76771, 72205],
   showLayerInfoPopup : false,
   popupTarget: 'info17'
});
var onInfo17 = true;
map17.on('click', function(evt) {
  if (!document.getElementById("cbInfo17").checked) {
    return;
  }
  map17.removeInfoPopup();
  if (onInfo17) {
    onInfo17 = false;
    map17.setPopupTarget('info17');
  } else {
    onInfo17 = true;
    map17.setPopupTarget(undefined);
  }
});

Example with custom style url

          var map18 = new lux.Map({
            target: 'map18',
            bgLayer: 'basemap_2015_global',
            bgLayerStyle: 'https://vectortiles.geoportail.lu/styles/roadmap_jsapi/style.json',
            // Eventually, to allow printing
            // bgLayerStyleXYZ: 'https://vectortiles.geoportail.lu/styles/roadmap_jsapi/{z}/{x}/{y}.png',
            zoom: 18,
            position: [76771, 72205]
          });

Example with custom inline style

          const customJson = {
            "version": 8,
            "name": "Geoportail.lu Road Map",
            "sources": {
              "geoportail.lu_layers": {
                "type": "vector",
                "url": "https://vectortiles.geoportail.lu/data/omt-geoportail-lu.json"
              }
            },
            "layers": [
              {
                "id": "background",
                "type": "background",
                "layout": {"visibility": "visible"},
                "paint": {"background-color": "rgba(248, 248, 248, 1)"}
              },
              {
                "id": "lu_landcover_wood",
                "type": "fill",
                "source": "geoportail.lu_layers",
                "source-layer": "landcover",
                "filter": ["==", "class", "wood"],
                "paint": {"fill-color": "rgba(115, 179, 28, 1)", "fill-opacity": 0.55}
              },
              {
                "id": "lu_water",
                "type": "fill",
                "source": "geoportail.lu_layers",
                "source-layer": "water",
                "filter": ["all", ["==", "$type", "Polygon"], ["!=", "intermittent", 1]],
                "layout": {"visibility": "visible"},
                "paint": {"fill-color": "rgba(0, 27, 255, 1)"}
              },
            ],
            "id": "+geoportail_lu_road_map"
          };

          const map19 = new lux.Map({
            target: 'map19',
            bgLayer: 'basemap_2015_global',
            bgLayerStyle: customJson,
            zoom: 10,
            position: [76771, 72205]
          });