Add a small introduction text/displace text from usage to this introd…

docs/source/index.rst

@@ -1,12 +1,15 @@
-ipyleaflet: Interactive maps in the Jupyter notebook
-====================================================
+Introduction to ipyleaflet
+==========================
+Ipyleaflet is a Jupyter / Leaflet bridge enabling interactive maps in the Jupyter notebook. It is an interactive widgets library, based on ipywidgets. This means that everything in ipyleaflet (e.g. the Map, TileLayers, Layers, Controls…) is interactive: you can dynamically update attributes from Python or from the Notebook interface.
 
+.. image:: _static/gallery.gif
+   :width: 1200
 
 Try it online
 -------------
 
-You can give ipyleaflet a try in this documentation by clicking on `Try it on RetroLab <https://ipyleaflet.readthedocs.io/en/latest/lite/retro>`__ or
-`Try it on JupyterLab <https://ipyleaflet.readthedocs.io/en/latest/lite/lab>`__.
+You can give ipyleaflet a try in this documentation by clicking on `Try it on RetroLite <https://ipyleaflet.readthedocs.io/en/latest/lite/retro>`__ or
+`Try it on JupyterLite <https://ipyleaflet.readthedocs.io/en/latest/lite/lab>`__.
 
 Index
 -----

docs/source/usage/index.rst

@@ -3,11 +3,7 @@
 Usage
 =====
 
-ipyleaflet is an interactive widgets library, it is based on `ipywidgets <https://github.com/jupyter-widgets/ipywidgets/>`_.
-This means that everything in ipyleaflet (e.g. the ``Map``, ``TileLayers``, ``Markers``...) is interactive: you can dynamically update
-attributes from Python or from the Notebook interface.
-
-For example, you can create a ``Marker`` layer and interact with it:
+In the following example, a ``Marker`` layer is created and one interacts with it:
 
 .. code::
 

examples/BaseMap.ipynb

@@ -2,7 +2,7 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 1,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -11,19 +11,48 @@
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 2,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "2395000484b445ca8a84934119bd192f",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Map(center=[52, 10], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title', 'zoom_out_tex…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
-    "m = Map(center=(52, 10), zoom=8, basemap=basemaps.OpenStreetMap.Mapnik)\n",
-    "m"
+    "m = Map(center=(52, 10), zoom=8, basemap=basemaps.OpenStreetMap.Mapnik)"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 3,
    "metadata": {},
-   "outputs": [],
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "2395000484b445ca8a84934119bd192f",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "Map(bottom=21848.0, center=[52, 10], controls=(ZoomControl(options=['position', 'zoom_in_text', 'zoom_in_title…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
    "source": [
     "strava_all = basemap_to_tiles(basemaps.Strava.All)\n",
     "m.add(strava_all)"
@@ -108,7 +137,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -122,9 +151,9 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.7.4"
+   "version": "3.9.13"
   }
  },
  "nbformat": 4,
- "nbformat_minor": 2
+ "nbformat_minor": 4
 }