OpenStreetMaps.js

/* TODO - FIXME function was written from scratch, SHOULD be in an "openstreetmap" module !!! */

function parseOSM(query) {
  $(":root").addClass('js');
  var drawMap = function(id, latLon) {
    var mPoint = ol.proj.transform([latLon[1], latLon[0]], 'EPSG:4326', 'EPSG:3857');
    var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(mPoint) });
    var iconStyle = new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        scale: 0.5,
        src: 'img/logoI.svg'
      })
    });
    iconFeature.setStyle(iconStyle);
    return new ol.Map({
      target: id,
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        }),
        new ol.layer.Vector({
          source: new ol.source.Vector({ features:[iconFeature] })
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([latLon[1], latLon[0]]),
        zoom: 18
      })
    });
  }
  var getLink = function(ll) {
    var base = 'http://www.openstreetmap.org/?';
    var href = [base,'mlat=',ll[0],'&mlon=',ll[1],'#map=19/',ll[0],'/',ll[1]].join('');
    return '<a href="'+href+'#" class="ui pointing blue basic label">' +
              '<i class="map icon"></i> larger map' +
            '</a><br/><br/>';
  }
  var getMap = function(index) {
    var _id = 'osm_'+index;
    var geo = $(this).data('geo');
    var latLon = geo.split(',').map(parseFloat);
    $(this).attr('id', _id);
    // TODO - !is(latLon[0],'number') etc...
    if (latLon.length < 2 || latLon.length > 3 || isNaN(latLon[0]) || isNaN(latLon[1])) {
      // geocoding first ...
      $.getJSON('http://nominatim.openstreetmap.org/search?json_callback=?', {
        q: geo,
        addressdetails: 1,
        polygon_svg: 1,
        format: 'json'
      },
      function(a){
        console.log(a[0])
        if (Array.isArray(a) && a.length > 0) {
          var latLon = [parseFloat(a[0].lat), parseFloat(a[0].lon)];
          drawMap(_id, latLon);
          $(this).after(getLink(latLon));
        } else {
          $(this).height('auto').html('<i class="red map icon"></i> no map found.')
        }
      }.bind(this));
    } else {
      drawMap(_id, latLon);
      $(this).after(getLink(latLon));
    }
  }
  return function() {
    $(query).each(getMap);
  }
}
/* parse localized dates */
function parseDate(query, format) { /* TODO TS defaults : */
  if (!query) {
    query = 'time[datetime]';
  }
  if (!format) {
    format = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
  }
  $(query).each(function(index) {
    var dt = $(this).attr('datetime');
    var ds = (new Date(dt)).toLocaleDateString([], format);
    if (ds !== 'Invalid Date') { $(this).text(ds); }
  });
}
require([
  'components/progress.js',
  '_build/src/auth/IndieAuth/client'
], function (progress, IA) {
  $(document).ready(function() {
    /* init IndieAuth and start verify... */
    var IndieAuth = (new IA.default());
    
    /* parse maps and dates */
    require(['https://openlayers.org/en/v3.19.1/build/ol.js'], function (ol) {
      parseOSM('.osm[data-geo]');
    });
    parseDate();
  });
});