X

Geertjan's Blog

  • June 12, 2016

Indoor Maps with Leaflet and Oracle JET

Geertjan Wielenga
Product Manager

Let's take Leaflet Indoor and create an Oracle JET application (i.e., an enterprise-ready application based on Require, Knockout, JQuery, and more) that provides indoor map features:


Here are the steps:

  1. Clone everything from the repo at this location: https://github.com/cbaines/leaflet-indoor

  2. Put "leaflet-indoor.js", "leaflet-src.js", and "osmtogeojson.js" into the "js/libs" folder of your project.

  3. Add to the "paths" in "requirejs.config":







    'leaflet-indoor': 'libs/leaflet-indoor',
    'leaflet-src': 'libs/leaflet-src',
    'osmtogeojson': 'libs/osmtogeojson'
  4. Add to the "shim" in "requirejs.config":





    'leaflet-indoor': {
    deps: ['leaflet-src'],
    exports: 'L'
    }
  5. Copy "leaflet.css" into "css" and reference it in the "index.html".

  6. We'll now port one of the samples from the repo that you cloned in part 1, which uses OpenStreetMap, into a JET module. In the view of your JET module:





    <div id="map"></div>
  7. In the viewModel of your JET module:





    define(['ojs/ojcore',
    'knockout',
    'osmtogeojson',
    'leaflet-indoor',
    'leaflet-src'
    ], function (oj, ko, osmtogeojson) {
    function leafletContentViewModel() {
    var self = this;
    self.handleAttached = function () {
    var osmUrl = '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osm = new L.TileLayer(osmUrl, {
    maxZoom: 22,
    attribution: "Map data © OpenStreetMap contributors"
    });
    map = new L.Map('map', {
    layers: [osm],
    center: new L.LatLng(49.41873, 8.67689),
    zoom: 19
    });
    var query = '(relation(1370729);>>->.rels;>;);out;';
    $.get("//overpass-api.de/api/interpreter?data=" + query, function (data) {
    var geoJSON = osmtogeojson(data, {
    polygonFeatures: {
    buildingpart: true
    }
    });
    var indoorLayer = new L.Indoor(geoJSON, {
    getLevel: function (feature) {
    if (feature.properties.relations.length === 0)
    return null;
    return feature.properties.relations[0].reltags.level;
    },
    onEachFeature: function (feature, layer) {
    layer.bindPopup(JSON.stringify(feature.properties, null, 4));
    },
    style: function (feature) {
    var fill = 'white';
    if (feature.properties.tags.buildingpart === 'corridor') {
    fill = '#169EC6';
    } else if (feature.properties.tags.buildingpart === 'verticalpassage') {
    fill = '#0A485B';
    }
    return {
    fillColor: fill,
    weight: 1,
    color: '#666',
    fillOpacity: 1
    };
    }
    });
    indoorLayer.setLevel("0");
    indoorLayer.addTo(map);
    var levelControl = new L.Control.Level({
    level: "0",
    levels: indoorLayer.getLevels()
    });
    // Connect the level control to the indoor layer
    levelControl.addEventListener("levelchange", indoorLayer.setLevel, indoorLayer);
    levelControl.addTo(map);
    });
    $(window).on("resize", function () {
    $("#map").height($(window).height()).width($(window).width());
    map.invalidateSize();
    }).trigger("resize");
    };
    }
    return leafletContentViewModel;
    });

That's all you need to do. Also take a look at this example:

http://jsfiddle.net/fPEaV/

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha
Oracle

Integrated Cloud Applications & Platform Services