CODEWITHSUNDEEP
javascripthtmlleafletmaptiler
user3200293
user3200293

Reputation: 191

How to embed HTML map onto blog

I've created a HTML file which displays a map using leaflet following this tutorial.

http://build-failed.blogspot.co.uk/2012/11/zoomable-image-with-leaflet.html

My HTML code is as follows...

<!DOCTYPE html>
<html>
  <head>
    <title>eso1119a</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
    <![endif]-->
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script>
      function init() {
        var mapMinZoom = 0;
        var mapMaxZoom = 3;
        var map = L.map('map', {
          maxZoom: mapMaxZoom,
          minZoom: mapMinZoom,
          crs: L.CRS.Simple
        }).setView([0, 0], mapMaxZoom);

        var mapBounds = new L.LatLngBounds(
            map.unproject([0, 1280], mapMaxZoom),
            map.unproject([1280, 0], mapMaxZoom));

        map.fitBounds(mapBounds);
        L.tileLayer('{z}/{x}/{y}.png', {
          minZoom: mapMinZoom, maxZoom: mapMaxZoom,
          bounds: mapBounds,
          attribution: 'Rendered with <a href="http://www.maptiler.com/">MapTiler</a>',
          noWrap: true          
        }).addTo(map);
      }
    </script>
    <style>
      html, body, #map { width:100%; height:100%; margin:0; padding:0; }
    </style>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>

How can I embedd the map onto my blog (tumblr) in the same way this user has? http://blog.thematicmapping.org/2013/06/showing-zoomify-images-with-leaflet.html

Upvotes: 0

Views: 740

Answers (1)

MapTiler
MapTiler

Reputation: 1799

You need to upload the folder with the zoomable image generated by MapTiler to a webhosting.

Tutorials for how to make it are available - hosting is possible for free with Dropbox, or with other services: http://www.maptiler.com/how-to/hosting/

(A different web-hosting provider for the map is required as Tumblr does not support static files hosting anymore..).

After you do this then just create a new post in Tumblr, change for the post the "Text editor" and choose "HTML" and include a code like:

<iframe src="http://yourserver.com/path-to-your-folder/leaflet.html"
style="width: 100%; height: 450px;"></iframe>

See this Thumblr sample post:

http://klokancz.tumblr.com/post/129075897775/maptiler-embedding-test

Upvotes: 1

Related Questions