X

Geertjan's Blog

  • June 14, 2016

Integrating Mapbox with Oracle JET

Geertjan Wielenga
Product Manager

Mapbox is a developer platform for creating and using maps. It is based on Leaflet, which I discussed recently here.

In this article I'll show how to get started integrating Mapbox into an Oracle JET application. The benefit of Mapbox is that it gives you maps, and a lot of related concepts, such as markers, while the benefit of Oracle JET is that it gives your application a well structured architecture based on open source libraries. By following the steps below, you'll end up with an application that looks like this:

Take the following steps:

  1. Use the "Oracle JET QuickStart Basic" template to set up your Oracle JET application. For example, in NetBeans IDE 8.1, with the Oracle JET Support plugin installed, you'll find it in the Samples category in the New Project window.

  2. Use Bower to install "mapbox.js", e.g., from the tools provided in NetBeans IDE 8.1, e.g., shown below:



  3. Add to the "requirejs.config" section in "main.js":



    'mapbox': 'libs/mapbox.js/mapbox'
  4. In the "index.html" file, refer to the "mapbox.css" file, as follows:



    <link href="js/libs/mapbox.js/mapbox.css" rel="stylesheet" type="text/css"/>
  5. Next, create a new CSS file, in the "css" folder, with any name, e.g., "styles.css", with this content:



    #map { width:100%; height:100%; }
  6. Rewrite "home.html" to the following:

    <STYLE TYPE="text/css">
    <!--
    @import url(css/styles.css);
    -->
    </STYLE>
    <div id='map'></div>
  7. Rewrite "home.js" to the following:

    define(['ojs/ojcore', 'knockout', 'mapbox'],
    function (oj, ko) {
    function mainContentViewModel() {
    var self = this;
    self.handleAttached = function () {
    L.mapbox.accessToken = your-access-token-goes-here';
    var map = L.mapbox.map('map', 'mapbox.dc-markers');
    map.featureLayer.on('click', function (e) {
    map.panTo(e.layer.getLatLng());
    });
    };
    }
    return new mainContentViewModel();
    });

That's it, you've taken your first steps in bringing Mapbox into your Oracle JET application.

Next steps might include communicating with other modules the geolocation of the selected marker, so that the related address and other information can be displayed in some way, using knockout-postbox (as explained here):

Here's the publishing side, i.e., here we are communicating the currently selected marker:

L.mapbox.accessToken = 'pk.eyJ1IjoiZ2VlcnRqYW53aWVsZW5nYSIsImEiOiJjaXBkcWQxYTcwMDA3dXFuZmVlZTA2aXQyIn0.h7YKD28ii2TbOEzfvns5JQ';
var map = L.mapbox.map('map', 'mapbox.dc-markers');
map.featureLayer.on('click', function (e) {
var latLng = e.layer.getLatLng();
map.panTo(latLng);
ko.postbox.publish("publishLatLng",
{
'lat': latLng.lat,
'lon': latLng.lng
});
});

And here we are using Knockout Postbox to pick up and process the geolocations:

define(['ojs/ojcore', 'knockout', 'knockout-postbox'],
function (oj, ko) {
function navContentViewModel() {
var self = this;
self.street = ko.observable();
self.streetNumber = ko.observable();
self.placename = ko.observable();
self.postalcode = ko.observable();
self.adminName1 = ko.observable();
self.handleAttached = function () {
ko.postbox.subscribe("publishLatLng", function (newValue) {
var lat = newValue.lat;
var lon = newValue.lon;
$.getJSON("http://api.geonames.org/findNearestAddressJSON?lat=+"+
lat+"+&lng=+"+
lon+"+&username=demo").
then(function (json) {
var address = json.address;
$.each(json, function () {
self.street(address.street);
self.streetNumber(address.streetNumber);
self.placename(address.placename);
self.postalcode(address.postalcode);
self.adminName1(address.adminName1);
});
});
});
};
}
return new navContentViewModel();
});

Finally, here's how to render the properties above, i.e., in the matching view expressed in HTML:

<p><b>Address Details</b></p>
<div class="oj-flex">
<div class="oj-flex-item oj-panel">
<p>
<span data-bind="text: street"></span>
<span data-bind="text: streetNumber"></span>
</p>
<p><span data-bind="text: placename"></span></p>
<p><span data-bind="text: postalcode"></span></p>
<p><span data-bind="text: adminName1"></span></p>
</div>
</div>

Join the discussion

Comments ( 5 )
  • guest Monday, June 13, 2016

    Hello,

    When I shrink the width of the chrome browser window to simulate a handphone dimension, the 3 modules start to realign vertically i.e. Navigation, Home & Complementary. However the mapbox/Home window is reduced to only a horizontal white bar without displaying any map.

    This does not happen with the Cesium tutorial. Cesium still maintains its dimension and displays the 3D globe upon resizing.

    Any advice?

    Thanks,

    Sean


  • Geertjan Monday, June 13, 2016

    Yeah, I've been playing a bit with that aspect too. Something to do with the FlexBox layouts, not sure exactly, a question of tweaking. Let me know if you figure it out.


  • guest Thursday, June 16, 2016

    Hello,

    How do you get the 'Add Bower package' dialogue to appear?

    I am unable to locate from where to click. I am using Netbeans 8.1.

    I created the project from the 'New Project' wizard and selected Oracle JET QuickStart Basic sample.

    What do I do next? Tried enabling Node.js and installed Node.js etc...

    Any advice?

    Thanks,

    Sean


  • Geertjan Thursday, June 16, 2016

    You'll need a 'bower.json' and a '.bowerrc' file first, both of which can be created from the New File dialog.


  • guest Saturday, July 9, 2016

    Hello,

    Could you send me the source to your tutorial?

    Thanks,

    Sean


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