View a simple OpenStreetMap in Joomla content

Guido Marangoni

Ciao,
I would like to use Sourcerer to display a map from within a Joomla content using these simple html, css and js to display a map. I tried following the guide but it doesn't work! 🙁
How should I do it? What is the correct syntax?
Thanks

Guido

-----

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple map</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
    />
    <script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="map"></div>
    <script src="script.js"></script>
  </body>
</html>

script.js

/* eslint-disable no-undef */
/**
 * Simple map
 */

// config map
let config = {
  minZoom: 7,
  maxZoom: 18,
};
// magnification with which the map will start
const zoom = 18;
// co-ordinates
const lat = 52.22977;
const lng = 21.01178;

// calling map
const map = L.map("map", config).setView([lat, lng], zoom);

// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

style.css

*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body,
html,
#map {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

Peter van Westen ADMIN

11 months 6 days ago

Peter van Westen ADMIN

11 months 6 days ago

Please read the documentation:
docs4.regularlabs.com/sourcerer

Please post a rating at the Joomla! Extensions Directory

Guido Marangoni

11 months 6 days ago

Guido Marangoni

11 months 6 days ago

Thanks Peter! 🙂
I have already read the documentation and I tried this...where's the mistake? 🙁

{source}<?php
$doc->addStyleSheet( 'https://unpkg.com/leaflet@1.9.2/dist/leaflet.css' );
?>
{/source}

{source}<?php
$doc->addScript( 'https://unpkg.com/leaflet@1.9.2/dist/leaflet.js' );
?>{/source}

{source}<?php
$doc->addStyleSheet( JURI::root( true ).'style.css' );
?>
{/source}

{source}
<div id="map"></div>
<script src="script.js"></script>
{/source}

Peter van Westen ADMIN

11 months 6 days ago

Peter van Westen ADMIN

11 months 6 days ago

You'll also need to place the correct path to the css and script files.

{source}
<?php
$doc->addStyleSheet( 'https://unpkg.com/leaflet@1.9.2/dist/leaflet.css' );
$doc->addScript( 'https://unpkg.com/leaflet@1.9.2/dist/leaflet.js' );
$doc->addStyleSheet( JURI::root( true ).'/path/to/your/style.css' );
?>
<div id="map"></div>
<script src="<?php echo JURI::root( true ).'/path/to/your/script.js'; ?>"></script>
{/source}

Please post a rating at the Joomla! Extensions Directory

Guido Marangoni

11 months 3 days ago

Guido Marangoni

11 months 3 days ago

Thank you Peter 🙂

Guido

Sourcerer

S Sourcerer