Step One

  • Create a new page in your wiki workspace.
  • Make its title something like "My Web Map"
  • Replace the wiki default wiki markup with this:


+++++ Description
lorem ipsum
+++++ Data Sources
lorem ipsum
+++++ Map
[[html]]
Temporary HTML to Test Whether This Works <button>PUSH</button>
[[/html]]

Description

lorem ipsum

Data Sources

lorem ipsum

Map


<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>

<style type="text/css">
#mapdiv { height: 400px; width: 400px;
margin-left:auto;
margin-right:auto;}
</style>
</head>

<body>
<div id="mapdiv"></div>

<script type="text/javascript">

var ourmap = L.map('mapdiv').setView([37.781, -122.182], 16);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org"> OpenStreetMap </a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/"> CC-BY-SA </a>, Imagery <a href="http://openstreetmap.org"> OpenStreetMap </a> contributors',
maxZoom: 18
}).addTo(ourmap);

</script>
</body>

You should replace the numbers in green with the long/lat and zoom level appropriate for your map.

tutorial