Map Swipe Javascript

    Tutorial (En) Advanced useAdd WMS layer

    Build a map swipe on Javascript

    We’re going to create a map swipe. You’ll be able to compare two maps with a bar to slide between the two layers. We’ll use Sentinel 2 Global layer and base Stament layer as an example. This guide takes a deeper dive into JavaScript with Ramani.js to build an interactive web map. If you’re new to Ramani.js you might want to check out this page first.

    Turn your engine on

    For this project, we recommend that you create a local folder called "map-swipe" to house your project files. We’ll refer to this folder as your project folder.

    You need prepare some item before can start this project :

    • A map ID. An ID points to a unique map you have created on Ramani Cloud. Check this page and learn how to make it

    • Your API token. The token is used to associate a map with your account: var rc = new RamaniAPI(); rc.init({ username:' **username**', apiKey:' **API_KEY**', package:' **package**' });

    • Ramani.js. The Ramani JavaScript API for building maps.

    • A text editor. You’ll be writing HTML, CSS, and JavaScript after all.

    Preparing the page

    In your project folder, create an index.html file. Set up the document by adding jQuery, LeafletJs, Ramani.js and CSS at the head section.

            `<link rel="stylesheet" href="https://ramani.ujuizi.com/api/v.0.1/ramani.css" />

  <script src="https://ramani.ujuizi.com/api/v.0.1/ramani.min.js"></script>`

    Next, let’s markup the page to create a map container and sidebar listing on the body section.

     `<div style="width: 800px;height: 500px;" id="map"></div>
  <input id='range' class='range' type='range' min='0' max='1.0' step='any' />`

    Let’s also apply some CSS so we can visualize what the layout looks like.

     `#map { position:absolute; top:0; bottom:0; width:100%; }
  .range {
    position:absolute;
    width:100%;
  }`

    Initializing the map

    We’ll now initialize the map in the JavaScript code exactly like we did in the quick start guide, but won’t set the map view yet:

     `var rc = new RamaniAPI();
rc.init({
    username:'',
    apiKey:'',
    package:''
});
var map = rc.map({
    center : new L.LatLng(41.3768, 2.3291),
    zoom : 10,
    baselayer : 'osm'
});

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
edit: {
    featureGroup: drawnItems
    }
});
map.addControl(drawControl);`

    Overlaying the Layer

    We now ready to make map swipe functionality :

     `var layer1 = { db: "_put your database name_", layer: '_put your layer name_', opacity:1 };
var layer1 = { db: "_put your database name_", layer: '_put your layer name_'};

rc.mapsSwipe(layer1, layer1);`

    Mission complete

    That's it, you project ready to publish and if your success your view will like this example