Html map inside markdown file

support
1

Hi,
I am building a page that tries to embed a html folium map inside a markdown file. However, hugo does not understand that this is a map:

image
image.png866×1318 64.3 KB

However, when I rename the file to .html it renders the page correctly.

Content of file here:

+++
date = "2019-03-24 08:52:57+00:00"
title = "Some title"
active = true
tags = ["tagg"]
+++

Some text here..


<head>    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script>L_PREFER_CANVAS=false; L_NO_TOUCH=false; L_DISABLE_3D=false;</script>
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.4.0/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>
    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
    
    <meta name="viewport" content="width=device-width,
        initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>#map_b40fd5c956d648e08451c11f2270545e {
        position: relative;
        width: 100.0%;
        height: 100.0%;
        left: 0.0%;
        top: 0.0%;
        }
    </style>
</head>
<body>    
    
    <div class="folium-map" id="map_b40fd5c956d648e08451c11f2270545e" ></div>
</body>
<script>    
    
    
        var bounds = null;
    

    var map_b40fd5c956d648e08451c11f2270545e = L.map(
        'map_b40fd5c956d648e08451c11f2270545e', {
        center: [46.4612007, 8.11187762],
        zoom: 13,
        maxBounds: bounds,
        layers: [],
        worldCopyJump: false,
        crs: L.CRS.EPSG3857,
        zoomControl: true,
        });
L.control.scale().addTo(map_b40fd5c956d648e08451c11f2270545e);

    
    var tile_layer_b8d7eb60aec842489f60f1ce3ec1f831 = L.tileLayer(
        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        {
        "attribution": null,
        "detectRetina": false,
        "maxNativeZoom": 18,
        "maxZoom": 18,
        "minZoom": 0,
        "noWrap": false,
        "opacity": 1,
        "subdomains": "abc",
        "tms": false
}).addTo(map_b40fd5c956d648e08451c11f2270545e);
    var tile_layer_66adf4fddf564d6895d10d6678a28ee3 = L.tileLayer(
        'http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
        {
        "attribution": "opentopomap",
        "detectRetina": false,
        "maxNativeZoom": 18,
        "maxZoom": 18,
        "minZoom": 0,
        "noWrap": false,
        "opacity": 1,
        "subdomains": "abc",
        "tms": false
}).addTo(map_b40fd5c956d648e08451c11f2270545e);
    var tile_layer_ec1dd030624d4ae5aaa18b037fcb8163 = L.tileLayer(
        'http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=topo2&zoom={z}&x={x}&y={y}',
        {
        "attribution": "Map layer from: kartverket",
        "detectRetina": false,
        "maxNativeZoom": 18,
        "maxZoom": 18,
        "minZoom": 0,
        "noWrap": false,
        "opacity": 1,
        "subdomains": "abc",
        "tms": false
}).addTo(map_b40fd5c956d648e08451c11f2270545e);
    
            var macro_element_85cd602632c44368ad34124f2df74767 = L.tileLayer.wms(
                'https://wms.geonorge.no/skwms1/wms.hoyde-dtm_somlos_helning_grader',
                {
  "attribution": "geonorge.no",
  "fmr": "image/png",
  "format": "image/jpeg",
  "layers": "las_dtm_helning_grader_somlos",
  "opacity": 0.1,
  "styles": "",
  "transparent": false,
  "version": "1.1.1"
}
                ).addTo(map_b40fd5c956d648e08451c11f2270545e);

        
</script>
2

The correctly rendered page (after renaming file to .html) looks like this:

image
image.jpg900×772 155 KB

3

A Hugo markdown file will take html tags and render them but, I don’t think putting a full HTML page inside a markdown page will work. You will have the <head> from your site and another one that you pasted.

Instead I think you need to paste the parts of that page into your Hugo templates in the right places, kind of merging what that map needs to work, like its javascript or css or whatever, in with your site.

4

Building on what Rick said, and since your code keeps referencing the same map ID, I’d say this would make an excellent, reusable shortcode.

5

thanks for the pointer! Will try to figure this out, and maybe even get my head around the shortcode-stuff.

6

You can check for the existence of the shortcode using .hasshortcode, so you can conditionally load the needed js or css in your head, for pages that use the shortcode.

1 Like