Add a small introduction text/displace text from usage to this introduction/ add a gif.

Author: HaudinFlorence

docs/source/_static/gallery.gif

@@ -1,6 +1,9 @@
-ipyleaflet: Interactive maps in the Jupyter notebook
-====================================================
+Introduction
+============
+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
 -------------

docs/source/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::
 

docs/source/usage/index.rst

@@ -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
 }