leaflet_img

using leaflet to display zomable image

by cmoni_js

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>test</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

    <!-- leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>


  </head>

  <body>


    <button type="button" class="btn btn-primary" id="btn1">picture1</button>
    <button type="button" class="btn btn-primary" id="btn2">picture2</button>
    <button type="button" class="btn btn-primary" id="btn3">picture3</button>
    <button type="button" class="btn btn-primary" id="btn4">picture4</button>

    <div id="mapid" class="m-2"></div>
    <img class="fit-picture m-2" id="pic">


  </body>

</html>

CSS

#mapid{ 
  height: 180px; 
  width:250px;
}

#pic { 
  width:250px;
}

JavaScript

var map_options = {                                                       
    crs                 : L.CRS.Simple,
    attributionControl  : false,        
    zoomControl         : false,
    maxBoundsViscosity  : 1,
    animate             : false,                                    
    pan                 : false,
    duration            : 0,

    };

var img_map = L.map('mapid', map_options);                                   
var aw_image = L.imageOverlay();

var url1 = "https://images.unsplash.com/photo-1546405439-fdf97d946f48?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fGl0JTIwaXMlMjB3aGF0JTIwaXQlMjBpc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"

var url2 = "https://images.unsplash.com/photo-1561708465-618441a93b7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGl0JTIwaXMlMjB3aGF0JTIwaXQlMjBpc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"


var url3 ="https://images.unsplash.com/photo-1616179381355-e66b373527f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fGl0JTIwaXMlMjB3aGF0JTIwaXQlMjBpc3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60"

var url4 ="https://images.unsplash.com/photo-1542837351-ab91e0a84e03?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8aXQlMjBpcyUyMHdoYXQlMjBpdCUyMGlzfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"



$("button").on("click",function(){
  const ID = $(this).attr("id");
  const url = ID === "btn1" ? url1 : ID === "btn2" ? url2 : ID === "btn3" ? url3 : url4;
  
  $("#pic").one("load", function() { 
  	console.log("loaded");
		change_pic(url)
  });
  
  $("#pic").attr("src",url);
});



function change_pic(url){
    let {clientWidth : div_width, clientHeight : div_height } = $("#pic")[0];
		let bounds = [[0,0],[div_height, div_width]];
    let center = [bounds[1][0]/2, bounds[1][1]/2];
    
    $("#mapid").css({ "height":`${div_height}px` });    



    //aw_image     .setUrl(aw.image_url).setBounds(bounds).addTo(img_map); 

    //img_map.fitBounds(bounds,{duration:0, animate:false, pan:false,...