punkish/maximap.html

## maximap.html
<!doctype html>
<head>
    <title>maximap</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- add link to leaflet stylesheet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <style>
        /* width and height for map div are mandatory */
        #map { width: 960px; height: 400px; }
    </style>
</head>

<body>

    <!-- add a div to hold the map; see style note above -->
    <div id="map"></div>

    <!-- add link to leafletjs -->
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script type="text/javascript">
    const data = {
        center : [48.87,2.34],
        zoom : 13,
        points : [
            {
                "name" : "Café Bumperdorfer",
                "type" : "food",
                "coords" : [48.87904, 2.32948],
                "desc" : "Lorem ipsum"
            },
            {
                "name" : "Humbdinger Café",
                "type" : "drinks",
                "coords" : [48.86453, 2.3463],
                "desc" : "Lorem ipsum"
            }
        ]
    };

    window.onload = function() {
        const map = L.map('map').setView(data.center, data.zoom);
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // create custom icons; make sure the icon files exist
        // at the iconUrl, and the iconSize is correct
        const icons = {
            food: L.icon({
                iconUrl: '/img/cafe-food.svg',
                iconSize: [32, 32]
            }),

            drinks: L.icon({
                iconUrl: '/img/cafe-drinks.svg',
                iconSize: [32, 32]
            })
        };

        data.points.forEach(function(point, index) {
            L.marker(
                point.coords,
                { icon: icons[point.type] }
            )
            .addTo(map)
            .bindPopup(
                `
                <div class='name'>${point.name}</div>
                <div class='desc'>${point.desc}</div>
                `
            );
        });
    }
    </script>
</body>
</html>
	<!doctype html>
	<head>
	<title>maximap</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<!-- add link to leaflet stylesheet -->
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
	<style>
	/* width and height for map div are mandatory */
	#map { width: 960px; height: 400px; }
	</style>
	</head>

	<body>

	<!-- add a div to hold the map; see style note above -->
	<div id="map"></div>

	<!-- add link to leafletjs -->
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
	<script type="text/javascript">
	const data = {
	center : [48.87,2.34],
	zoom : 13,
	points : [
	{
	"name" : "Café Bumperdorfer",
	"type" : "food",
	"coords" : [48.87904, 2.32948],
	"desc" : "Lorem ipsum"
	},
	{
	"name" : "Humbdinger Café",
	"type" : "drinks",
	"coords" : [48.86453, 2.3463],
	"desc" : "Lorem ipsum"
	}
	]
	};

	window.onload = function() {
	const map = L.map('map').setView(data.center, data.zoom);
	L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);

	// create custom icons; make sure the icon files exist
	// at the iconUrl, and the iconSize is correct
	const icons = {
	food: L.icon({
	iconUrl: '/img/cafe-food.svg',
	iconSize: [32, 32]
	}),

	drinks: L.icon({
	iconUrl: '/img/cafe-drinks.svg',
	iconSize: [32, 32]
	})
	};

	data.points.forEach(function(point, index) {
	L.marker(
	point.coords,
	{ icon: icons[point.type] }
	)
	.addTo(map)
	.bindPopup(
	`
	<div class='name'>${point.name}</div>
	<div class='desc'>${point.desc}</div>
	`
	);
	});
	}
	</script>
	</body>
	</html>