Data Resources

We provide REST services so that clubs can include the official SEMLA fixtures and league tables on their own web pages.

If you have any trouble using these services, then please email the SEMLA Webmaster at webmaster@southlacrosse.org.uk. And thanks to Dan Scott for suggesting the idea.

Summary of Available Services

Fixtures & league tables are available as embed tags, HTML snippets, or JSON data, and team fixtures as iCalendar.

If you would like different data, or another format, then please email the Webmaster.

Embedding The Quick Way

If you just want to embed the fixtures or league tables in your own web page then we provide tags which you can add to your page to do this for you. Simply go to the REST Clubs page, and click on the club or team to display the services available, and follow the instructions under Embedding In A Web Page.

Advanced Styling

Both the league tables and fixtures are embedded as HTML tables, each with their own class which can be targeted by CSS to change the way it is displayed. All classes start with sl-, and the fixtures HTML table's class is sl-fixtures, and the league table's class is sl-league-table. To see the full HTML markup go to the REST Clubs page and navigate to your club/team, and then click the HTML snippet and view the source.

For example, if you wanted to change the fixtures to right-align the home teams and the column heading (column 2), and centre the results (column 3), you could add the following CSS:

.sl-fixtures>thead>tr>th:nth-of-type(2),
.sl-fixtures>tbody>tr>td:nth-of-type(2) {
  text-align: right;
}
.sl-fixtures>tbody>tr>td:nth-of-type(3) {
  text-align: center;
}

The league tables also have a sl-divider class on table rows where a divider for promotion/relegation would appear below it. A suggested styling would be:

.sl-divider>td {
  border-bottom: 1px dashed #4F4D4B;
}

We also add a tag line to credit "Data provided by southlacrosse.org.uk" which has a class of sl-tagline.

Spinners For Asynchronous Tags

If you are using the asynchronous version of the tags then you should display an indication that something will be loaded, for example a spinner as below, or a "Loading..." message.

The script we provide replaces the inner HTML of your <div> tag with the fixtures or tables when they are loaded, which means you can place a loading message inside the <div>. The example below will add a spinner and accessible text:

<noscript><p>You need Javascript enabled to be able to see the fixtures.</p></noscript>
<div id="fixtures"><div class="spinner-border"><span class="screen-reader-text">Loading</span></div></div>

Then you will need to add the following CSS to style the spinner, and hide the accessible text from everyone except screen readers:

@keyframes spinner-border {
  to {
  transform: rotate(360deg);
  }
}
.spinner-border {
  color: #6c757d!important;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  margin-left: 10rem;
  vertical-align: text-bottom;
  border: .25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border .75s linear infinite;
}
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

You may have to alter the above to fit in with your website.

Additional League Tables Styling

You can also request extra classes be added to the league tables HTML to enable further styling by adding ?classes after the .js in the embed tag, or if you are using the asynchronous method then change the ?async to ?async&classes.

This will add a sl-team class to all team and team heading cells. This would enable you to centre all cells except the team names as below (which is how the tables are displayed in this site):

.sl-league-table {
  text-align: center;
}
.sl-team {
  text-align: left;
}

It also lets you make the table responsive by adding the sl-hide-small class to all cells which can be safely hidden on smaller screens (goals for & against, goal difference, and form). You can then hide these cells at a certain screen widths by using a CSS media query like:

@media (max-width: 589px) {
  .sl-hide-small {
    display: none;
  }
}

Making the Content Responsive

All embedded HTML tables are wrapped in <div class="sl-wrapper">, so you can add the following CSS to enable them to be scrolled left and right if the screen is too small to display the full content.

.sl-wrapper {
  overflow-x: auto;
}

You can see the effect on this page as all code boxes use overflow-x:auto, so if you reduce the width of the browser window you should be able to scroll the code boxes left and right without affecting the rest of the page.

Club GPS Location Data

GPS data for all club locations is available to download in gpx format, which is a format used by all modern SatNav devices and mapping software.

For instructions on how to import it for your particular device, please see your manufacturer's instructions.

Import instructions for Google My Maps

This data is supplied as a tool only. SEMLA cannot accept any responsibility for any errors or omissions contained within. When using a SatNav device please observe road safety regulations, and use in conjunction with common sense and pre-planning of your route.