Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Map by map-machine server is empty #164

Open
mfioretti opened this issue Jun 19, 2024 · 1 comment
Open

Map by map-machine server is empty #164

mfioretti opened this issue Jun 19, 2024 · 1 comment

Comments

@mfioretti
Copy link

Greetings,

I have map-machine installed on Ubuntu 22.04.4 LTS

I have used it to generate tiles for a zone I want to display in a web page with this command:
map-machine tile -b 12.4772,41.8982,12.4779,41.8999 -z 18-20

and then started

map-machine server --port 8081 --cache /absolute/path/to/cache

the server starts without reporting any error, but when I load in firefox the sampe test page below (generated starting from this example: https://leafletjs.com/examples/quick-start/ ) it's totally blank. What am I missing, or doing wrong? The server reports no error.

Thanks,

`

<title>Map Machine test</title>

<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

<link rel="stylesheet" href="https://uidnpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

<style>
	html, body {
		height: 100%;
		margin: 0;
	}
	.leaflet-container {
		height: 400px;
		width: 600px;
		max-width: 100%;
		max-height: 100%;
	}
</style>

Testing Map Machine

<script>

var map = L.map('mapid').setView([48.8555, 2.3655], 18);

L.tileLayer('http://127.0.0.1:8080/tiles/{z}/{x}/{y}', {
maxZoom: 19,
attribution: 'Map data © ' +
'OpenStreetMap ' +
'contributors, imagery © ' +
'Map Machine',
id: 'map_machine',
tileSize: 256,
zoomOffset: 0
}).addTo(map);
</script>

`
@mfioretti
Copy link
Author

Update: with the code below the tiles appear, but the most tiles are white squares, and tiles that should be adjacent are not in the correct relative position. Eg, the two non-blnak tiles in the screenshot should be one on top of the other, NOT side by side:

Screenshot 2024-06-19 at 19-57-52 Map Machine test

<!DOCTYPE html>
<html lang="en">
<head>
	<base target="_top">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<title>Map Machine test</title>
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://uidnpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
/*		.mapid {
			//height: 400px;
			//width: 600px;
			max-width: 100%;
			max-height: 100%;

		}*/
	</style>
</head>
<body>

<h3>Map Machine</h3>
<div id="mapid" style="height: 1024px; width: 1024px"></div>

<script>

const map = L.map('mapid').setView([41.8990, 12.4775], 18);

const tiles = L.tileLayer('http://127.0.0.1:8081/tiles/{z}/{x}/{y}', {
    maxZoom: 20,
    attribution: 'Map data &copy; ' +
        '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> ' +
        'contributors, imagery &copy; ' +
        '<a href="https:/github.com/enzet/map-machine">Map Machine</a>',
    id: 'map_machine',
    tileSize: 256,
    zoomOffset: 0
}).addTo(map);
</script>
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@mfioretti