We’ll use the code of the already finished map that’s hosted on our GitHub page so we don’t have to start at the very beginning again. Simply download the directory to your computer and open it in your text editor. If you’ve never created an interactive map with Leaflet.js before, please have a look at the two tutorials mentioned above before proceeding with this one.
Now, open index.html in the editor and include the two files you just downloaded:
position:'topleft',// where do you want the search bar?
layer:markersLayer,// name of the layer
zoom:11,// set zoom to found location when searched
textPlaceholder:'search...'// placeholder while nothing is searched
map.addControl(controlSearch);// add it to the map
If you want a nice search icon to appear on the bar, download the images directory of Stefano Cudinis library and copy it into your map directory. Now, when you open the index file in a web browser, you should see the search bar on your map.
The search bar is useless as of now, since we haven‘t given the search bar any data to look through. So in the next step, we want to fill markersLayer with the search keywords and the markers’ location. We use the code of the Google Spreadsheet map, so we’ll load the data with Tabletop, like we did in the previous tutorial, and set the URL, size and orientation of our icons. But we’ll delete or comment out the entire part where we actually add the markers on the map:
Now, to add the markers with matching popups to the map and also to the search corpus, we have to add the markers to markersLayer. We define the value searched as the markers’ title and the found position as loc. Then we’ll save every new L.marker as marker, bind the popup and add the whole thing to our layer.
So let’s start right away with setting up a data table with Google Spreadsheets.
Java Script libraries and other tools offer cool ways to visualize data, but sometimes, you may want an even more customizable way of presenting a topic on the web. Maybe you already have the perfect graphic, but it’s not interactive yet. In this tutorial, we’ll show you a way to add tooltips to your SVG graphics.
One example for an interactive graphic a library can’t give you is the following site plan showing the Düsseldorfer Rhine Funfair with its attractions and food stands I built for the Rheinische Post. You can find additional information (in german) as tooltips when hovering over some of the attractions.
The basis for the map is a simple image I created with the design program Sketch. The trick I used to add tooltips to some of the map elements doesn’t require much coding and can be used to add tooltips to every website element including divs, text and pictures.
So let’s get right to it!
In this tutorial we will add tooltips to a very simple examplary SVG file you can download here. SVG stands for scaleable vector graphic. It’s the name of a file format where every image object is described not by the colour of its individual pixels, but by its basic shapes and their attributes. A big advantage SVG graphics have over other formats like PNG or JPEG ist that they’re scalable, just like their name says, so they never get blurry, no matter how much you zoom in. One way to create SVG files is to use a design program like Illustrator, Inkscape or Sketch.
Pro tip: RStudio lets you export charts in this format, too. Pimp up boring charts with some creative elements like I did with this stacked barchart on germanys reasons for trading trash:
The following screenshot shows the SVG image we are going to add tooltips to. It contains a big rectangle with a turquoise frame as the background, a red circle, a yellow star and a blue triangle.
If you save the image as an SVG file and open it with a text editor, this is what you’ll get:
This is not the typical way you expect images to look like. And this is what makes SVG awesome: It translates your artwork into a snippet of XML code. XML files, or Extensible Markup Language files, look a lot like HTML. They’re not, though: XML was developed as a way to store data, while HTML is responsible for displaying data, mostly on the web. XML doesn’t have predefined tags like <a> or <body>, like HTML does. In XML, you’re entirely free to make up your own tags to describe different parts of your data.
SVG graphics still follow a very specific XML structure. That structure will work like a charm. Try putting the SVG code into your websites body. Set the SVG width to a 100%, delete the height settings and save the file as index.html. It should look like this:
Et voilà: The static image is ready for the web! Your browser can interpret the XML code of your SVG image easily and convert it back to a beautiful graphic.
Great! Now, we will use the jQuery Plugin Tooltipster to add information to this svg! The Plugin has nice presettings and a really good documentation. These three steps will lead you to your first interactive SVG:
Step 1: Download the Plugin
Create a new folder, name it svg_interactive (for example) and store the index.html file in it. You can find and download the Plugin’s scripts and style sheets on our GitHub repository or on the Plugins webpage. The main folder contains plenty of subfolders and documents you’ll barely need. For our example, we’ll only use tooltipster.bundle.min.js, tooltipster.bundle.min.css and, for a little bit of extra style, the theme sheet tooltipster-sideTip-punk.min.css. You can either save the whole tooltipster folder in svg_interactive and then set the correct paths to those files in your html head, or you only store the three files you’ll actually use in your folder like we did as shown in the screenshot.
Step 2: Include the scripts
Set the paths to the style sheets and the JS script in the head of your webpage. Don’t forget to include jQuery, since Tooltipster depends on it:
Next, we’ll add a small snippet of Java Script code to the head manually. You could also save these few lines in an extra .js file and include them like the others, but for now, we’ll just keep it as an inline script.
This snippet defines a tooltip class with the theme tooltipster-punk and specifies that the content will be HTML. If you add
to an SVG element it will get a tooltipster-punk themed tooltip with HTML styled text. And that’s basically it!
Now, if you want to change the tooltip’s style you can save some CSS settings in a new stylesheet and include it in the webpages head. You can change the font family, the color of the popup background, the popup arrow or the default pink border-bottom, for example, like this:
border-bottom:3pxsolid#50E3C2;/*colored line at popup bottom*/
background:#fff/*background of popup*/
/*arrow and border color depending on where the tooltip opens (for example above or below the element)*/
Save the file as style.css and include it in the .html file. You can also change the trigger for opening and closing the tooltips in the manually added Java Script. You can set it to hover, click or optimize it for mobile devices with a customized trigger like this: