Skip to content

Home

Jump to bottom
Bankn8II©$A edited this page Dec 3, 2024 · 1 revision

Welcome to the mapknitter wiki!

https://aibolem.github.io/mapknitter/app/views/map/leaflet.html

<body>
<!--StartFragment-->
  | <!DOCTYPE html>
-- | --
  | <html>
  | <head>
  | <title>MapKnitter 2.0 preview</title>
  | 
  | <meta name="viewport" content="width=device-width, initial-scale=1.0">
  |  
  | <script src="./lib/leaflet/dist/leaflet.js"></script>
  | <script src="./lib/jquery/dist/jquery.min.js"></script>
  | <script src="./lib/leaflet-distortableimage/lib/easybutton.js"></script>
  | <link rel="stylesheet" href="./lib/leaflet-distortableimage/DistortableImageOverlay.css"/>
  | <script src="./lib/leaflet-distortableimage/DistortableImageOverlay.js"></script>
  | <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
  | <script src="./lib/leaflet-google/index.js"></script>
  |  
  | </head>
  | <body style="margin:0;">
  |  
  | <form id="test_form" >
  | <input type="file" id="inputimage" accept="image/*">
  | </form>
  |  
  | <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
  |  
  | <script>
  |  
  | var map
  |  
  | (function(){
  |  
  | var mapbox = L.tileLayer('https://{s}.tiles.mapbox.com/v3/anishshah101.ipm9j6em/{z}/{x}/{y}.png', {
  | maxZoom: 24,
  | attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
  | '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  | 'Imagery © <a href="http://mapbox.com">Mapbox</a>',
  | id: 'examples.map-i86knfo3'
  | })
  |  
  | var google = new L.Google("SATELLITE",{
  | maxZoom: 24,
  | opacity:0.5
  | });
  |  
  | map = new L.map('map',{
  | layers: [google]
  | }).setView([<%= @map.lat %>,<%= @map.lon %>],<%= @map.zoom.to_i-1 %>);
  |  
  | //map.fitBounds(map._layers[1]._bounds)
  |  
  | var baseMaps = {
  | "OpenStreetMap": mapbox,
  | "Google Satellite": google
  | };
  | var overlayMaps = {
  | };
  |  
  | var layersControl = new L.Control.Layers(baseMaps,overlayMaps);
  | map.addControl(layersControl);
  |  
  | // startup the Leaflet.DistortableImage plugin
  | $L.initialize( {
  | uploadBtn: true // prompt and handle new images
  | })
  |  
  | <% @map.warpables.each do \|warpable\| %>
  | img = L.distortableImageOverlay(
  | '<%= warpable.image.url(:medium) %>',
  | {
  | <% unless warpable.nodes == '' %>
  | latlng:  [
  | L.latLng(<%= @map.nodes[warpable.id.to_s][0][1] %>,
  | <%= @map.nodes[warpable.id.to_s][0][0] %>),
  | L.latLng(<%= @map.nodes[warpable.id.to_s][1][1] %>,
  | <%= @map.nodes[warpable.id.to_s][1][0] %>),
  | L.latLng(<%= @map.nodes[warpable.id.to_s][3][1] %>,
  | <%= @map.nodes[warpable.id.to_s][3][0] %>),
  | L.latLng(<%= @map.nodes[warpable.id.to_s][2][1] %>,
  | <%= @map.nodes[warpable.id.to_s][2][0] %>)
  | ],
  | <% end %>
  | locked: <%= warpable.locked %>
  | });
  | img.mk_id = <%= warpable.id %>
  | img.onDeselect = function() {
  | $.ajax('/images',{
  | type: 'PATCH',
  | data: {
  | warpable_id: this.mk_id,
  | locked: this.locked,
  | points:
  | this.markers[0]._latlng.lng+','+this.markers[0]._latlng.lat+':'+
  | this.markers[1]._latlng.lng+','+this.markers[1]._latlng.lat+':'+
  | this.markers[3]._latlng.lng+','+this.markers[3]._latlng.lat+':'+
  | this.markers[2]._latlng.lng+','+this.markers[2]._latlng.lat,
  | },
  | beforeSend: function(e) {
  | $('.mk-save').removeClass('fa-check-circle fa-times-circle fa-green fa-red').addClass('fa-spinner fa-spin')
  | },
  | complete: function(e) {
  | $('.mk-save').removeClass('fa-spinner fa-spin').addClass('fa-check-circle fa-green')
  | },
  | error: function(e) {
  | $('.mk-save').removeClass('fa-spinner fa-spin').addClass('fa-times-circle fa-red')
  | }
  | })
  | }
  |  
  | <% end %>
  |  
  | $L.saveBtn = L.easyButton('fa-check-circle fa-green mk-save',
  | function() {},
  | 'Save status',
  | map,
  | this
  | )
  |  
  | $L.highResBtn = L.easyButton('fa-delicious',
  | $L.highres = function() {
  | $.each($L.images,function(i,img) {
  | img._image.src = img._image.src.split('_medium').join('')
  | })
  | $L.highResBtn._container.remove()
  | },
  | 'Switch to high-res imagery',
  | map,
  | this
  | )
  |  
  | })()
  |  
  | </script>
  | <style>
  | .fa-green { color:#3a3; }
  | .fa-red { color:#a33; }
  | </style>
  |  
  | </html>
  |  

<!--EndFragment-->
</body>
</html><!DOCTYPE html>
<html>
<head>
  <title>MapKnitter 2.0 preview</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="[./lib/leaflet/dist/leaflet.js](https://aibolem.github.io/mapknitter/app/views/map/lib/leaflet/dist/leaflet.js)"></script>
  <script src="[./lib/jquery/dist/jquery.min.js](https://aibolem.github.io/mapknitter/app/views/map/lib/jquery/dist/jquery.min.js)"></script>
  <script src="[./lib/leaflet-distortableimage/lib/easybutton.js](https://aibolem.github.io/mapknitter/app/views/map/lib/leaflet-distortableimage/lib/easybutton.js)"></script>
  <link rel="stylesheet" href="[./lib/leaflet-distortableimage/DistortableImageOverlay.css](https://aibolem.github.io/mapknitter/app/views/map/lib/leaflet-distortableimage/DistortableImageOverlay.css)"/>
  <script src="[./lib/leaflet-distortableimage/DistortableImageOverlay.js](https://aibolem.github.io/mapknitter/app/views/map/lib/leaflet-distortableimage/DistortableImageOverlay.js)"></script>
  <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script> 
  <script src="[./lib/leaflet-google/index.js](https://aibolem.github.io/mapknitter/app/views/map/lib/leaflet-google/index.js)"></script>

</head>
<body style="margin:0;">

  <form id="test_form" >
    <input type="file" id="inputimage" accept="image/*">
  </form>

  <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>

  <script>

    var map

    (function(){

      var mapbox = L.tileLayer('https://{s}.tiles.mapbox.com/v3/anishshah101.ipm9j6em/{z}/{x}/{y}.png', {
        maxZoom: 24,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
          '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
          'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'examples.map-i86knfo3'
      })

      var google = new L.Google("SATELLITE",{
        maxZoom: 24,
        opacity:0.5
      });

      map = new L.map('map',{
        layers: [google]
      }).setView([<%= @map.lat %>,<%= @map.lon %>],<%= @map.zoom.to_i-1 %>);

      //map.fitBounds(map._layers[1]._bounds)

      var baseMaps = {
          "OpenStreetMap": mapbox,
          "Google Satellite": google
      };
      var overlayMaps = {
      };
   
      var layersControl = new L.Control.Layers(baseMaps,overlayMaps);
      map.addControl(layersControl);

      // startup the Leaflet.DistortableImage plugin
      $L.initialize( {
        uploadBtn: true // prompt and handle new images
      })

    <% @map.warpables.each do |warpable| %>
      img = L.distortableImageOverlay(
        '<%= warpable.image.url(:medium) %>',
        { 
          <% unless warpable.nodes == '' %>
          latlng:  [ 
            L.latLng(<%= @map.nodes[warpable.id.to_s][0][1] %>,
                     <%= @map.nodes[warpable.id.to_s][0][0] %>),
            L.latLng(<%= @map.nodes[warpable.id.to_s][1][1] %>,
                     <%= @map.nodes[warpable.id.to_s][1][0] %>),
            L.latLng(<%= @map.nodes[warpable.id.to_s][3][1] %>,
                     <%= @map.nodes[warpable.id.to_s][3][0] %>),
            L.latLng(<%= @map.nodes[warpable.id.to_s][2][1] %>,
                     <%= @map.nodes[warpable.id.to_s][2][0] %>)
                   ],
          <% end %>
          locked: <%= warpable.locked %> 
      });
      img.mk_id = <%= warpable.id %>
      img.onDeselect = function() {
        $.ajax('/images',{
          type: 'PATCH',
          data: {
            warpable_id: this.mk_id,
            locked: this.locked,
            points: 
              this.markers[0]._latlng.lng+','+this.markers[0]._latlng.lat+':'+
              this.markers[1]._latlng.lng+','+this.markers[1]._latlng.lat+':'+
              this.markers[3]._latlng.lng+','+this.markers[3]._latlng.lat+':'+
              this.markers[2]._latlng.lng+','+this.markers[2]._latlng.lat,
          },
          beforeSend: function(e) {
            $('.mk-save').removeClass('fa-check-circle fa-times-circle fa-green fa-red').addClass('fa-spinner fa-spin')
          },
          complete: function(e) {
            $('.mk-save').removeClass('fa-spinner fa-spin').addClass('fa-check-circle fa-green')
          },
          error: function(e) {
            $('.mk-save').removeClass('fa-spinner fa-spin').addClass('fa-times-circle fa-red')
          }
        })
      }

    <% end %>

      $L.saveBtn = L.easyButton('fa-check-circle fa-green mk-save', 
        function() {},
        'Save status',
        map,
        this
      ) 
 
      $L.highResBtn = L.easyButton('fa-delicious', 
        $L.highres = function() {
          $.each($L.images,function(i,img) {
            img._image.src = img._image.src.split('_medium').join('')
          })
          $L.highResBtn._container.remove()
        },
        'Switch to high-res imagery',
        map,
        this
      ) 

    })()
      
  </script>
  <style>
    .fa-green { color:#3a3; }
    .fa-red { color:#a33; }
  </style>
 
</html>```
Clone this wiki locally