<!doctype html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>MapData</title>
<link rel='stylesheet' href='../../3rdparty/highlight/styles/default.css'>
<link rel='stylesheet' href='../../../css/doctest.css'>
<script src="../../../dist/iwmlib.3rdparty.js"></script>
<script src="../../../dist/iwmlib.js"></script>
<script src="../../../dist/iwmlib.pixi.js"></script>
<style>
.inline-showcase {
display: flex
}
.map-example {
display: inline-block;
width: 256px;
margin: 5px;
}
.map-container {
position: relative;
display: inline-flex;
}
.map-marker {
position: absolute;
transform: translate(-50%, -75%) scale(0.5);
}
</style>
</head>
<body onload='Doctest.run()'>
<h1>MapData</h1>
<p>Mapdata calculates is responsible for transforming map coordinates to pixel coordinates and backwards.</p>
<h2>Static Squared World Map</h2>
<p>The most simple example is a squared world map, thats projected with mercator transformation. Ranging from
Longitude
-180 to 180 and Latitude from -90 to 90 (Exclusive, because mercator gets infinite at +/-90). </p>
<p>Coordinates:
<strong id="map_coords_0"></strong>
</p>
<div id="mapContainerGeneral" class="map-container">
<img src="../assets/maps/osm/0/0/0.png" id="map_image_0" alt="Image is missing." width="512">
</div>
<script>
let capitals = {
abidjan: { x: 5.349470, y: -4.006472 },
berlin: { x: 52.525430, y: 13.385291 },
canberra: { x: -35.282025, y: 149.128648 },
capetown: { x: -33.925448, y: 18.416962 },
moscow: { x: 55.750892, y: 37.622799 },
washington: { x: 38.895650, y: -77.031407 },
rio: { x: -22.871400, y: -43.280490 },
tokio: { x: 35.696278, y: 139.731366 }
}
const europeanCapitalCities = {
berlin: { x: 52.505949, y: 13.379400 },
london: { x: 51.5, y: -0.083333 },
rome: { x: 41.9, y: 12.483333 },
madrid: { x: 40.4, y: -3.683333 },
paris: { x: 48.833986, y: 2.346989 }
}
//Helper function to print the coordinates to a dom element.
function printCoordinates(element, mapdata, out_dom) {
element.addEventListener("mousemove", (event) => {
let coords = mapdata.toCoordinates({ x: event.offsetX / event.target.width, y: event.offsetY / event.target.height })
out_dom.innerHTML = "Lat: " + coords.x.toFixed(4) + " Lng: " + coords.y.toFixed(4)
})
}
function placeMarker(parent, position) {
const markerIconPath = "../../../assets/icons/room.png"
let marker = document.createElement("img")
marker.src = markerIconPath
marker.className = "map-marker"
Object.assign(marker.style, {
left: (position.x * 100) + "%",
top: (position.y * 100) + "%"
})
parent.appendChild(marker)
console.log(marker)
}
</script>
<script class="doctest">
// Instantiate our mapdata.
let squared_world = new MapData(new Projection.Mercator());
// Define a position, we are interested in in {x: latitude, y: longitude}
let iceland = { x: 64.514979, y: -19.020796 }
// Gets the normalized positition of the coordinates
let pos_0 = squared_world.toPixel(iceland)
// Helper function to set the dom marker.
placeMarker(mapContainerGeneral, pos_0)
</script>
<script>
printCoordinates(map_image_0, squared_world, map_coords_0)
</script>
<h2 id="germany">Clipped Map</h2>
<p>Often we don't use the whole map, or our map is a subsection of the world. MapData can clip those cases, using
the a
bounding box of min and max coordinates.</p>
<p>Coordinates:
<strong id="map_coords_1"></strong>
</p>
<div class="map-container" id="mapContainerClipped">
<img src="../assets/maps/pixabay/europe.jpg" id="map_image_1" alt="Image is missing." width="512">
</div>
<script class="doctest">
//Same procedure as above, just add a clipping parameter to the MapData object.
let europe = new MapData(new Projection.Mercator(), {
clip: {
min: { x: 32.863294, y: -18.58 },
max: { x: 57.467973, y: 44.277158 }
}
})
//Same as above
for (let coordinates of Object.values(europeanCapitalCities)) {
let pixelPosition = europe.toPixel(coordinates)
placeMarker(mapContainerClipped, pixelPosition)
}
</script>
<script>
printCoordinates(map_image_1, germany, map_coords_1)
</script>
<h2>Clipped And Translated Map</h2>
<p>Maps can be also translated, if the whole world is shown and clipping is not an option.</p>
<p>Coordinates:
<strong id="map_coords_2"></strong>
</p>
<div id="map_image_2" class="map-container"">
</div>
<script class=" doctest">
const size = 256
// Fake offset by using the old mapdata.
let translation = squared_world.toPixel({ x: 0, y: -140 })
console.log(translation)
//This map is clipped at the bottom
// And also translated in hoizontal direction.
// The translate option corrects that.
let translated_world = new MapData(new Projection.Mercator(), {
translate: { x: 0, y: 40 },
})
console.log(translation)
Object.assign(map_image_2.style, {
width: size + "px",
height: size + "px",
backgroundImage: "url(../assets/maps/osm/0/0/0.png)",
backgroundColor: "red",
backgroundPosition: translation.x * size + "px 0"
})
//Same as above
for (let coordinates of Object.values(capitals)) {
let position = translated_world.toPixel(coordinates)
placeMarker(map_image_2, position)
}
</script>
<script>
map_image_2.addEventListener("mousemove", (event) => {
let coords = translated_world.toCoordinates({ x: event.offsetX / event.target.width, y: event.offsetY / event.target.height })
map_coords_2.innerHTML = "Lat: " + coords.x.toFixed(4) + " Lng: " + coords.y.toFixed(4)
})
</script>
</body>
</html>