docs/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Imagery Index</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js'></script>
<script defer src='https://kit.fontawesome.com/c772610440.js' crossorigin='anonymous'></script>
<script defer src='https://cdn.jsdelivr.net/npm/json5@2.1/dist/index.min.js'></script>
<script defer src='https://d3js.org/d3.v5.min.js'></script>
<script defer src='bundle.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css' rel='stylesheet'/>
<link href='style.css' rel='stylesheet' type='text/css'/>
</head>

<body>
<div id='wrap' class='hasCols'>

  <div id='side' class='hasRows'>

    <div id='title' class='hasCols'>
      <div class='icon'><i class='fas fa-satellite fa-2x'></i></div>
      <div><h2>imagery-index</h2></div>
    </div>

    <div id='sidebar' class='hasRows'>
      <div id='gj' class='section'>
        <p>Paste one of:
          <ul>
          <li>An imagery-index .json source</li>
          <li>An editor-layer-index .geojson source</li>
          <li>A single .geojson Feature</li>
        </ul>
        </p>
<textarea autofocus id='gj-textarea' name='gj-textarea' rows='8'>
{
  "type": "Feature",
  "geometry": null,
  "properties": {
    "id": "Mapbox",
    "name": "Mapbox Satellite",
    "type": "tms",
    "url": "https://{switch:a,b,c,d}.tiles.mapbox.com/v4/mapbox.satellite/{zoom}/{x}/{y}.jpg?access_token=pk.eyJ1Ijoib3BlbnN0cmVldG1hcCIsImEiOiJjaml5MjVyb3MwMWV0M3hxYmUzdGdwbzE4In0.q548FjhsSJzvXsGlPsFxAQ"
  }
}
</textarea>
        <div id='button-row' class='hasCols'>
          <div><button id='gj-view-button'>View it!</button></div>
          <div><button id='gj-remove-button' class='invisible'>Remove</button></div>
          <div id='gj-result-icon' class='invisible'>
            <div id='gj-icon-good' class='hidden'><i class='fas fa-check-circle fa-2x'></i></div>
            <div id='gj-icon-bad' class='hidden'><i class='fas fa-times-circle fa-2x'></i></div>
          </div>
        </div>
        <p id='gj-result-message' class='invisible'></p>
      </div>


      <div id='loco' class='section'>
        <p>Paste a locationSet:<a href='https://github.com/rapideditor/location-conflation/blob/main/README.md#location-conflation' target='_blank' style="font-size: smaller; margin-left: 70px">What's this?</a></p>
<textarea autofocus id='loco-textarea' name='loco-textarea' rows='5'>
{
  include: ['de', 'cz', 'pl']
}
</textarea>
        <div id='button-row' class='hasCols'>
          <div><button id='loco-view-button'>View it!</button></div>
          <div><button id='loco-remove-button' class='invisible'>Remove</button></div>
          <div id='loco-result-icon' class='invisible'>
            <div id='loco-icon-good' class='hidden'><i class='fas fa-check-circle fa-2x'></i></div>
            <div id='loco-icon-bad' class='hidden'><i class='fas fa-times-circle fa-2x'></i></div>
          </div>
        </div>
        <p id='loco-result-message' class='invisible'></p>
      </div>

    </div>
  </div>

  <div id='viewer' class='hasRows'>

    <div id='controls' class='hasCols'>
      <div id='control-slider' class='control'>
        <label>Opacity: </label>
        <input id='slider' type='range' min='0' max='100' step='0' value='35'/>
        <span id='slider-value'>35%</span>
      </div>
      <div id='control-zoom' class='control'>
        <label>Zoom: </label>
        <span id='zoom-value'>1</span>
      </div>
      <div id='control-name' class='control'>
      </div>
      <div id='octocat'>
        <a href='https://github.com/rapideditor/imagery-index' target='_blank'>
        <i class='fab fa-github fa-2x'></i>
        </a>
      </div>
    </div>

    <div id='maps'>
      <div id='basemap'></div>
      <div id='tilelayer' style='opacity:0.35;'></div>
      <div id='attribution' class='mapboxgl-ctrl mapboxgl-ctrl-attrib mapboxgl-ctrl-bottom-right'></div>
    </div>

  </div>
</div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWlrZWxtYXJvbiIsImEiOiJjaWZlY25lZGQ2cTJjc2trbmdiZDdjYjllIn0.Wx1n0X7aeCQyDTnK6_mrGw';

var map = new mapboxgl.Map({
  attributionControl: false,
  container: 'basemap',
  style: 'mapbox://styles/mapbox/dark-v10',
  center: [0,0],
  zoom: 1,
  minZoom: 0,
  maxZoom: 24,
  minPitch: 0,
  maxPitch: 0,
  dragRotate: false,
  renderWorldCopies: false
});

// ----------------------------------- STATE ------------------------------------
var _currOpacity = 35;
var _currZoom = 1;
var _gjReset = true;
var _locoReset = true;
var _loco;
var _tilelayer;
var _projection;
var _dimensions;


// ----------------------------------- DOM ------------------------------------
// select some elements to use later
var slider = document.getElementById('slider');
var sliderValue = document.getElementById('slider-value');
var zoomValue = document.getElementById('zoom-value');
var controlName = document.getElementById('control-name');
var gjTextarea = document.getElementById('gj-textarea');
var gjViewButton = document.getElementById('gj-view-button');
var gjRemoveButton = document.getElementById('gj-remove-button');
var gjResultMessage = document.getElementById('gj-result-message');
var gjResultIcon = document.getElementById('gj-result-icon');
var gjIconGood = document.getElementById('gj-icon-good');
var gjIconBad = document.getElementById('gj-icon-bad');
var locoTextarea = document.getElementById('loco-textarea');
var locoViewButton = document.getElementById('loco-view-button');
var locoRemoveButton = document.getElementById('loco-remove-button');
var locoResultMessage = document.getElementById('loco-result-message');
var locoResultIcon = document.getElementById('loco-result-icon');
var locoIconGood = document.getElementById('loco-icon-good');
var locoIconBad = document.getElementById('loco-icon-bad');
var tilelayer = document.getElementById('tilelayer');
var attribution = document.getElementById('attribution');

var baseAttribution = ' <a href="https://www.mapbox.com/about/maps/" target="_blank">© Mapbox</a> <a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap</a>';
attribution.innerHTML = baseAttribution;


// ------------------------------------ STYLE ------------------------------------
var GEOJSON_COLOR = '#f0f';
var LOCO_COLOR = '#f90';
var GEOJSON_CLASS = 'magenta';
var LOCO_CLASS = 'orange';

var GEOJSON_FILL = {
  id: 'geojson-fill-layer',
  type: 'fill',
  source: 'geojson-source',
  paint: {
    'fill-color': GEOJSON_COLOR,
    'fill-opacity': 0.1
  }
};
var GEOJSON_LINE = {
  id: 'geojson-line-layer',
  type: 'line',
  source: 'geojson-source',
  paint: {
    'line-blur': 1,
    'line-width': 4,
    'line-color': GEOJSON_COLOR,
    'line-opacity': 0.9
  }
};
var GEOJSON_POINT = {
  id: 'geojson-point-layer',
  type: 'circle',
  source: 'geojson-source',
  paint: {
    'circle-radius': 2.5,
    'circle-color': GEOJSON_COLOR,
    'circle-opacity': 0.9,
    'circle-stroke-width': 1,
    'circle-stroke-color': '#111',
    'circle-stroke-opacity': 0.9
  }
};
var LOCO_FILL = {
  id: 'loco-fill-layer',
  type: 'fill',
  source: 'loco-source',
  paint: {
    'fill-color': LOCO_COLOR,
    'fill-opacity': 0.1
  }
};
var LOCO_LINE = {
  id: 'loco-line-layer',
  type: 'line',
  source: 'loco-source',
  paint: {
    'line-blur': 1,
    'line-width': 4,
    'line-color': LOCO_COLOR,
    'line-opacity': 0.9
  }
};
var LOCO_POINT = {
  id: 'loco-point-layer',
  type: 'circle',
  source: 'loco-source',
  paint: {
    'circle-radius': 2.5,
    'circle-color': LOCO_COLOR,
    'circle-opacity': 0.9,
    'circle-stroke-width': 1,
    'circle-stroke-color': '#111',
    'circle-stroke-opacity': 0.9
  }
};


// ---------------------------------- HANDLERS ------------------------------------

window.addEventListener('DOMContentLoaded', function(e) {
  _loco = new bundle.LocationConflation(bundle.knownFeatures);

// todo handle resize
  var cr = tilelayer.getBoundingClientRect();
  _dimensions = [cr.width, cr.height];
  _projection = d3.geoMercator().clipExtent([[0, 0], _dimensions]);
  _tileLayer = bundle.TileLayer().projection(_projection).dimensions(_dimensions);
});


// wait for map to load before adjusting it
map.on('load', function() {

  map.on('zoom', function(e) {
    var newZoom = Math.round((e.target.transform.zoom + Number.EPSILON) * 100) / 100;
    if (newZoom !== _currZoom) {
      _currZoom = newZoom;
      zoomValue.textContent = '' + newZoom;
    }
  });

  map.on('viewreset', function() { renderTileLayer(); })
  map.on('move', function() { renderTileLayer(); })

  slider.addEventListener('input', function(e) {
    var newOpacity = parseInt(e.target.value, 10);
    if (newOpacity !== _currOpacity) {
      _currOpacity = newOpacity;
      tilelayer.style.opacity = newOpacity / 100;
      sliderValue.textContent = '' + newOpacity + '%';
    }
  });

  gjViewButton.addEventListener('click', function(e) {
    e.target.blur();
    gjParseInput();
  });

  gjRemoveButton.addEventListener('click', function(e) {
    e.target.blur();
    gjRemoveData();
    gjClearResults();
  });

  gjTextarea.addEventListener('input', gjClearResults);

  locoViewButton.addEventListener('click', function(e) {
    e.target.blur();
    locoParseInput();
  });

  locoRemoveButton.addEventListener('click', function(e) {
    e.target.blur();
    locoRemoveData();
    locoClearResults();
  });

  locoTextarea.addEventListener('input', locoClearResults);
});


// ---------------------------------- FUNCTIONS ------------------------------------

//
// Fit to shape bounds - pass a MultiPolygon coordinates array
//
function flyTo(multipolygon) {
  var bounds = multipolygon.reduce(function(bounds, ring) {
    ring[0].forEach(function(coord) {  // ring[0] is the "outer"
      if (coord[0] > bounds[0])  bounds[0] = coord[0];
      if (coord[1] > bounds[1])  bounds[1] = coord[1];
      if (coord[0] < bounds[2])  bounds[2] = coord[0];
      if (coord[1] < bounds[3])  bounds[3] = coord[1];
    });
    return bounds;
  }, [-180, -90, 180, 90]);  // W,S,E,N

  map.fitBounds(bounds, { padding: 50 });
}

//
// Update the raster tile layer projection to match the Mapbox GL map..
//
function renderTileLayer() {
  if (!_tileLayer.source()) return;

  var setCenter = map.getCenter();
  var setZoom = map.getZoom();

  var merc = d3.geoMercator()    // copy _projection
    .translate(_projection.translate())
    .scale(_projection.scale());

  var tileSize = 512;  // calculate scale based on Mapbox GL tilesize
  var k = tileSize * Math.pow(2, setZoom) / (2 * Math.PI);
  merc.scale(k);

  var t = merc.translate();
  var point = merc([setCenter.lng, setCenter.lat]);
  var center = [_dimensions[0] / 2, _dimensions[1] / 2];
  t[0] += center[0] - point[0];
  t[1] += center[1] - point[1];

  _projection
    .translate(t)
    .scale(k);

  d3.select('#tilelayer').call(_tileLayer);
}

//
// Remove the GeoJSON data from the map..
//
function gjRemoveData() {
  controlName.textContent = '';
  gjRemoveButton.className = gjRemoveButton.className.replace('visible', 'invisible');

  _tileLayer.source(null);
  d3.selectAll('#tilelayer > img.tile')  // remove any existing tiles
    .classed('tile-removing', true)
    .each(function(d, i, nodes) {
      window.setTimeout(function() { d3.select(nodes[i]).remove(); }, 300);
    });

  if (map.getLayer('geojson-fill-layer'))   map.removeLayer('geojson-fill-layer');
  if (map.getLayer('geojson-line-layer'))   map.removeLayer('geojson-line-layer');
  if (map.getLayer('geojson-point-layer'))  map.removeLayer('geojson-point-layer');
  if (map.getSource('geojson-source'))      map.removeSource('geojson-source');
}

//
// Remove the LocationConflation data from the map..
//
function locoRemoveData() {
  locoRemoveButton.className = locoRemoveButton.className.replace('visible', 'invisible');
  if (map.getLayer('loco-fill-layer'))   map.removeLayer('loco-fill-layer');
  if (map.getLayer('loco-line-layer'))   map.removeLayer('loco-line-layer');
  if (map.getLayer('loco-point-layer'))  map.removeLayer('loco-point-layer');
  if (map.getSource('loco-source'))      map.removeSource('loco-source');
}

//
// Remove the GeoJSON results from the DOM..
//
function gjClearResults() {
  if (_gjReset) return;
  _gjReset = true;
  gjResultIcon.className = gjResultIcon.className.replace('visible', 'invisible');
  gjResultMessage.className = gjResultMessage.className.replace('visible', 'invisible');
  window.setTimeout(function() {
    gjIconGood.className = 'hidden';
    gjIconBad.className = 'hidden';
    gjResultMessage.innerHTML = '';
  }, 100);
}

//
// Remove the LocationConflation results from the DOM..
//
function locoClearResults() {
  if (_locoReset) return;
  _locoReset = true;
  locoResultIcon.className = locoResultIcon.className.replace('visible', 'invisible');
  locoResultMessage.className = locoResultMessage.className.replace('visible', 'invisible');
  window.setTimeout(function() {
    locoIconGood.className = 'hidden';
    locoIconBad.className = 'hidden';
    locoResultMessage.innerHTML = '';
  }, 100);
}

//
// Parse the pasted GeoJSON data,
// then update the map and present results..
//
function gjParseInput() {
  if (gjTextarea.value === '') return;
  _gjReset = false;
  gjRemoveData();

  // Lets go!
  try {
    var parsed = JSON5.parse(gjTextarea.value);

    // What was pasted?
    var detected = parsed.locationSet ? 'imagery-index'
     : (parsed.properties && parsed.properties.url) ? 'editor-layer-index'
     : (parsed.type === 'Feature' && parsed.geometry) ? 'geojson'
     : null;

    if (!detected) {
      throw 'Unknown contents.';
    }

    var props = parsed.properties || parsed;
    var minzoom = props.min_zoom || 0;
    var maxzoom = props.max_zoom || 24;

    // Setup name display
    controlName.textContent = '' + props.name;

    // Setup the attribution, if any
    var attr = props.attribution || {};
    var attrText = attr.text || '';
    var attrURL = attr.url || '';

    if (attrText && !/^©/.test(attrText)) {   // prepend © if it doesn't have one
      attrText = '© ' + attrText;
    }

    if (attrText && !attrURL) {
      attribution.innerHTML = '<span>' + attrText + '</span>' + baseAttribution;
    } else if (attrText && attrURL) {
      attribution.innerHTML = '<a href="' + attrURL + '" target="_blank">' + attrText + '</a>' + baseAttribution;
    } else {
      attribution.innerHTML = baseAttribution;
    }

    // Setup the raster tile layer
    if (props.url && props.type) {
      if (props.type === 'wms') {
        var supportedWMSProjections = {
          'EPSG:4326': true,
          'EPSG:3857': true,
          'EPSG:900913': true,
          'EPSG:3587': true,
          'EPSG:54004': true,
          'EPSG:41001': true,
          'EPSG:102113': true,
          'EPSG:102100': true,
          'EPSG:3785': true
        };

        var projections = (props.available_projections || [])
          .map(function(proj) { return proj.toUpperCase(); })
          .filter(function (proj) { return supportedWMSProjections[proj]; });

        if (!projections.length) {
          throw 'No supported wms projection found.';
        }
        props.projection = projections[0];
      }

      // rename a few properties where iD uses different names
      props.template = props.url;
      props.zoomExtent = [minzoom, maxzoom];

      _tileLayer.source(bundle.BackgroundSource(props));
      renderTileLayer();
    }


    // Setup the GeoJSON feature layer
    var feature, multipolygon;

    if (detected === 'editor-layer-index') {
      var coordinates = parsed.geometry && parsed.geometry.coordinates;
      if (coordinates) {
        // Workaround for editor-layer-index weirdness..
        // Add an extra array nest to each element in `coordinates`
        // so the rings are not treated as a bunch of holes:
        // what we have: [ [[outer],[hole],[hole]] ]
        // what we want: [ [[outer]],[[outer]],[[outer]] ]
        multipolygon = coordinates.map(function(ring) { return [ring]; });

        feature = {
          type: 'Feature',
          properties: {},
          geometry: { type: 'MultiPolygon', coordinates: multipolygon }
        };
      }

    } else {
      if (detected === 'imagery-index') {
        feature = _loco.resolveLocationSet(parsed.locationSet).feature;
      } else if (detected === 'geojson') {
        feature = parsed;
      }

      if (feature.geometry.type === 'Polygon') {
        multipolygon = [ feature.geometry.coordinates ];
      } else {      // MultiPolygon
        multipolygon = feature.geometry.coordinates;
      }
    }

    if (feature && multipolygon) {
      map.addSource('geojson-source', { type: 'geojson', data: feature });
      map.addLayer(GEOJSON_FILL);
      map.addLayer(GEOJSON_LINE);
      map.addLayer(GEOJSON_POINT);
      flyTo(multipolygon);
    }

    // Present results..
    gjRemoveButton.className = 'visible';
    gjIconGood.className = '';  // remove 'hidden'
    gjResultIcon.className = 'visible ' + GEOJSON_CLASS;
    gjResultMessage.className = 'visible';

    var detectedText = detected + (detected === 'geojson' ? ' Feature' : ' source');
    var messageHTML = '<strong class="' + GEOJSON_CLASS + '">Valid ' + detectedText + '.</strong><br/>';
    if (props.id || parsed.id) {
      messageHTML += '<em>id = ' + (props.id || parsed.id) + '</em><br/>';
    }
    if (props.name) {
      messageHTML += '<em>name = ' + props.name + '</em><br/>';
    }
    if (props.url) {  // showing raster tiles
      messageHTML += '<em>minzoom = ' + minzoom + '</em><br/>' +
      '<em>maxzoom = ' + maxzoom + '</em>';
    }
    gjResultMessage.innerHTML = messageHTML;

  } catch (err) {
    gjRemoveButton.className = 'visible';
    gjIconBad.className = '';  // remove 'hidden'
    gjResultIcon.className = 'visible red';
    gjResultMessage.className = 'visible';
    gjResultMessage.innerHTML = 'Invalid JSON.<br/><em>' + err + '</em>';
  }
}


//
// Parse the pasted LocationConflation data,
// then update the map and present results..
//
function locoParseInput() {
  if (locoTextarea.value === '') return;
  _locoReset = false;
  locoRemoveData();

  // Lets go!
  try {
    var locationSet = JSON5.parse(locoTextarea.value);
    if (!locationSet.include) {
      throw 'Missing property "include".';
    }

    var feature = _loco.resolveLocationSet(locationSet).feature;
    var props = feature.properties || {};

    // Setup the LocationConflation feature layer
    map.addSource('loco-source', { type: 'geojson', data: feature });
    map.addLayer(LOCO_FILL);
    map.addLayer(LOCO_LINE);
    map.addLayer(LOCO_POINT);

    var multipolygon;
    if (feature.geometry.type === 'Polygon') {
      multipolygon = [ feature.geometry.coordinates ];
    } else {   // MultiPolygon
      multipolygon = feature.geometry.coordinates;
    }

    flyTo(multipolygon);

    // Present results..
    locoRemoveButton.className = 'visible';
    locoIconGood.className = '';  // remove 'hidden'
    locoResultIcon.className = 'visible ' + LOCO_CLASS;
    locoResultMessage.className = 'visible';

    var messageHTML = '<strong class="' + LOCO_CLASS + '">Valid LocationSet.</strong><br/>' +
      '<em>id = ' + feature.id + '</em><br/>';

    if (props.nameEn) {
      messageHTML += '<span class="nameEn">' + props.nameEn + '</span>';
    }
    if (props.emojiFlag) {
      messageHTML += '<span class="emojiFlag">' + props.emojiFlag + '</span>';
    }
    locoResultMessage.innerHTML = messageHTML;

  } catch (err) {
    locoRemoveButton.className = 'visible';
    locoIconBad.className = '';  // remove 'hidden'
    locoResultIcon.className = 'visible red';
    locoResultMessage.className = 'visible';
    locoResultMessage.innerHTML = 'Invalid LocationSet.<br/><em>' + err + '</em>';
  }
}

</script>
</body>
</html>